diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index 5042db7..ac23e70 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 4px 4px;padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:4px;visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 8px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:3px}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:8px;box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:4px;overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_list__item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__item:last-child{border-bottom:none}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;overflow:hidden}.joe_list__item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:4px;transition:opacity 0.35s}.joe_list__item .thumbnail img:hover{opacity:0.85}.joe_list__item .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item .information .title{display:flex;align-items:center;margin-bottom:10px}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap}.joe_list__item .information .title h6{color:var(--main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;line-height:24px;transition:color 0.35s}.joe_list__item .information .title h6:hover{color:var(--theme)}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:opacity 0.35s;word-break:break-all;line-height:24px}.joe_list__item .information .abstract:hover{opacity:0.8}.joe_list__item .information .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .information .meta .items{display:flex;align-items:center}.joe_list__item .information .meta .items li::after{content:'/';color:#e1e1e1;padding:0 5px}.joe_list__item .information .meta .items li:last-child::after{display:none}.joe_list__item .information .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .information .meta .last .icon{margin-right:3px}.joe_list__item .information .meta .last .link{color:var(--minor)}.joe_list__item .information .meta .last .link:hover{color:var(--theme)}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:4px}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:4px;background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:4px;background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:8px;padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classB)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);font-size:12px;line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:15px;position:relative}.joe_detail__article h1{padding:0 15px 0 20px}.joe_detail__article h1::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px}.joe_detail__article h3::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:15px}.joe_detail__article p{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 4px 4px 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a{display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:4px;font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;padding:15px;padding-top:35px;margin:0 0 15px;border-radius:4px}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article img{display:block;max-width:100%;border-radius:4px;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:hover{box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:15px;padding:0 30px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article ul li::marker{color:var(--routine)}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:15px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:10px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-hide i::after{content:'';position:absolute;bottom:-2px;left:0;right:0;width:100%;height:1px;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article-hide i:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classB)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:4px}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__friends{display:flex;flex-wrap:wrap;margin:0 -7.5px}.joe_detail__friends-item{width:25%;padding:7.5px}.joe_detail__friends-item .contain{display:block;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:15px;color:#fff;word-break:break-all}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #333;--theme: #54b5db;--main: #808080;--routine: #7b7b7b;--minor: #6d6d6d;--seat: #666;--classA: #444;--classB: #444;--classC: #444;--classD: #444;--text-shadow: none;--box-shadow: none}html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 4px 4px;padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;z-index:2;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:4px;visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 8px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:3px}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;z-index:1;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:8px;box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:4px;overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_list__item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__item:last-child{border-bottom:none}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;overflow:hidden}.joe_list__item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:4px;transition:opacity 0.35s}.joe_list__item .thumbnail img:hover{opacity:0.85}.joe_list__item .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item .information .title{display:flex;align-items:center;margin-bottom:10px}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap}.joe_list__item .information .title h6{color:var(--main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;line-height:24px;transition:color 0.35s}.joe_list__item .information .title h6:hover{color:var(--theme)}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:opacity 0.35s;word-break:break-all;line-height:24px}.joe_list__item .information .abstract:hover{opacity:0.8}.joe_list__item .information .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .information .meta .items{display:flex;align-items:center}.joe_list__item .information .meta .items li::after{content:'/';color:#e1e1e1;padding:0 5px}.joe_list__item .information .meta .items li:last-child::after{display:none}.joe_list__item .information .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .information .meta .last .icon{margin-right:3px}.joe_list__item .information .meta .last .link{color:var(--minor)}.joe_list__item .information .meta .last .link:hover{color:var(--theme)}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:4px}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:4px;background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:4px;background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:8px;padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classB)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);font-size:12px;line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:15px;position:relative}.joe_detail__article h1{padding:0 15px 0 20px}.joe_detail__article h1::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px}.joe_detail__article h3::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:15px}.joe_detail__article p{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 4px 4px 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a{display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:4px;font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;padding:15px;padding-top:35px;margin:0 0 15px;border-radius:4px}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article img{display:block;max-width:100%;border-radius:4px;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:15px;padding:0 30px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article ul li::marker{color:var(--routine)}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:15px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:10px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-hide i::after{content:'';position:absolute;bottom:-2px;left:0;right:0;width:100%;height:1px;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article-hide i:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classB)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:4px}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__friends{display:flex;flex-wrap:wrap;margin:0 -7.5px;margin-bottom:15px}.joe_detail__friends-item{width:25%;padding:7.5px}.joe_detail__friends-item .contain{display:block;border-radius:4px;overflow:hidden;padding:15px;color:#fff;word-break:break-all;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__friends-item .contain:hover{-webkit-transform:translateY(-5px) scale(1.025);transform:translateY(-5px) scale(1.025);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .desc{margin-right:10px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}
diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss
index 78d2ad2..24f7b8b 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,1806 +1,1849 @@
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+	--theme: #409eff;
+	--background: #fff;
+	--main: #303133;
+	--routine: #606266;
+	--minor: #909399;
+	--seat: #c0c4cc;
+	--classA: #dcdfe6;
+	--classB: #e4e7ed;
+	--classC: #ebeef5;
+	--classD: #f2f6fc;
+	--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+	--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
+}
+
+/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
 html[data-night='night'] {
-    body::before {
-        background: #202122;
-        z-index: -500;
-    }
-    .joe_header__above-logo img {
-        display: none;
-    }
-    .joe_header__above-logo svg {
-        display: block;
-    }
+	--background: #333;
+	--theme: #54b5db;
+	--main: #808080;
+	--routine: #7b7b7b;
+	--minor: #6d6d6d;
+	--seat: #666;
+	--classA: #444;
+	--classB: #444;
+	--classC: #444;
+	--classD: #444;
+	--text-shadow: none;
+	--box-shadow: none;
+}
+
+/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
+html[data-night='night'] {
+	body::before {
+		background: #202122;
+		z-index: -500;
+	}
+	.joe_header__above-logo img {
+		display: none;
+	}
+	.joe_header__above-logo svg {
+		display: block;
+	}
 }
 
 .joe_dropdown {
-    position: relative;
-    &__link {
-        display: flex;
-        align-items: center;
-        &-icon {
-            transition: transform 0.35s;
-        }
-    }
-    &__menu {
-        position: absolute;
-        left: 50%;
-        visibility: hidden;
-        z-index: 999;
-        border-top: 3px solid var(--theme);
-        transform-origin: top;
-        background: var(--background);
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-        border-radius: 0 0 4px 4px;
-        padding: 10px 0;
-        opacity: 0;
-        transform: translateX(-50%) perspective(600px) rotateX(-45deg);
-        transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
-        &::before {
-            content: '';
-            position: absolute;
-            top: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border-left: 7px solid transparent;
-            border-right: 7px solid transparent;
-            border-bottom: 7px solid var(--theme);
-        }
-    }
-    &.active {
-        .joe_dropdown__link-icon {
-            transform: rotate(-180deg);
-        }
-        .joe_dropdown__menu {
-            visibility: visible;
-            opacity: 1;
-            transform: translateX(-50%) perspective(600px) rotateX(0);
-        }
-    }
+	position: relative;
+	&__link {
+		display: flex;
+		align-items: center;
+		&-icon {
+			transition: transform 0.35s;
+		}
+	}
+	&__menu {
+		position: absolute;
+		left: 50%;
+		visibility: hidden;
+		z-index: 999;
+		border-top: 3px solid var(--theme);
+		transform-origin: top;
+		background: var(--background);
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+		border-radius: 0 0 4px 4px;
+		padding: 10px 0;
+		opacity: 0;
+		transform: translateX(-50%) perspective(600px) rotateX(-45deg);
+		transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
+		&::before {
+			content: '';
+			position: absolute;
+			top: -10px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 0;
+			height: 0;
+			border-left: 7px solid transparent;
+			border-right: 7px solid transparent;
+			border-bottom: 7px solid var(--theme);
+		}
+	}
+	&.active {
+		.joe_dropdown__link-icon {
+			transform: rotate(-180deg);
+		}
+		.joe_dropdown__menu {
+			visibility: visible;
+			opacity: 1;
+			transform: translateX(-50%) perspective(600px) rotateX(0);
+		}
+	}
 }
 
 .joe_header {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background: var(--background);
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    &__above {
-        &-logo {
-            position: relative;
-            display: flex;
-            align-items: center;
-            height: 60px;
-            padding-right: 15px;
-            margin-right: 15px;
-            img {
-                max-width: 150px;
-                max-height: 50px;
-                object-fit: cover;
-            }
-            svg {
-                display: none;
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                width: 1px;
-                height: 20px;
-                background: var(--classC);
-                transform: translateY(-50%);
-            }
-        }
-        &-nav {
-            display: flex;
-            align-items: center;
-            .item {
-                position: relative;
-                height: 60px;
-                line-height: 60px;
-                font-size: 15px;
-                padding: 0 8px;
-                margin-right: 15px;
-                transition: color 0.35s;
-                white-space: nowrap;
-                color: var(--main);
-                &:last-child {
-                    margin-right: 0;
-                }
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    height: 3px;
-                    transition: opacity 0.5s, transform 0.5s;
-                    border-radius: 6px 6px 0 0;
-                    opacity: 0;
-                    transform: scaleX(0.25);
-                    background: var(--theme);
-                }
-                &.active,
-                &:hover {
-                    color: var(--theme);
-                    &::after {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-                }
-            }
-            .joe_dropdown {
-                &__link {
-                    a {
-                        height: 60px;
-                        line-height: 60px;
-                        font-size: 15px;
-                        padding-left: 8px;
-                        padding-right: 3px;
-                        transition: color 0.35s;
-                        white-space: nowrap;
-                        color: var(--main);
-                    }
-                }
-                &__menu {
-                    width: 110px;
-                    text-align: center;
-                    a {
-                        display: block;
-                        line-height: 34px;
-                        height: 34px;
-                        transition: color 0.35s, background 0.35s;
-                        color: var(--minor);
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        padding: 0 15px;
-                        &:hover,
-                        &.active {
-                            color: var(--theme);
-                            background: var(--classD);
-                        }
-                    }
-                }
-            }
-        }
-        &-search {
-            position: relative;
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            .input {
-                background: var(--classC);
-                width: 170px;
-                height: 34px;
-                border: 1px solid transparent;
-                padding: 0 18px;
-                color: var(--routine);
-                transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
-                border-radius: 17px 0 0 17px;
-                &:focus {
-                    background: var(--background);
-                    border-color: var(--theme);
-                    padding-right: 28px;
-                    ~ .icon {
-                        transform: translate3d(0, -50%, 0) rotateY(180deg);
-                    }
-                }
-            }
-            .submit {
-                position: relative;
-                z-index: 1;
-                height: 34px;
-                border: none;
-                background: var(--theme);
-                color: #fff;
-                border-radius: 0 17px 17px 0;
-                padding: 0 10px;
-            }
-            .icon {
-                position: absolute;
-                top: 50%;
-                left: 142px;
-                width: 28px;
-                height: 38px;
-                background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
-                background-size: 100% 100%;
-                transition: transform 0.35s;
-                transform: translate3d(100%, -50%, 0) rotateY(180deg);
-            }
-            .result {
-                position: absolute;
-                top: 60px;
-                left: 0;
-                right: 0;
-                background: var(--background);
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-                border-radius: 4px;
-                visibility: hidden;
-                opacity: 0;
-                transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
-                transform: translate3d(0, 15px, 0);
-                &.active {
-                    transform: translate3d(0, 0, 0);
-                    opacity: 1;
-                    visibility: visible;
-                }
-                .item {
-                    height: 40px;
-                    line-height: 40px;
-                    border-bottom: 1px solid var(--classD);
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden;
-                    padding: 0 8px;
-                    transition: background 0.35s;
-                    &:last-child {
-                        border-bottom: none;
-                    }
-                    &:nth-child(1) .sort {
-                        background: #fe2d46;
-                    }
-                    &:nth-child(2) .sort {
-                        background: #f60;
-                    }
-                    &:nth-child(3) .sort {
-                        background: #faa90e;
-                    }
-                    &:hover {
-                        background: var(--classD);
-                    }
-                    .sort {
-                        color: #fff;
-                        background: #7f7f8c;
-                        width: 18px;
-                        height: 18px;
-                        line-height: 18px;
-                        border-radius: 50%;
-                        text-align: center;
-                        margin-right: 8px;
-                        font-weight: 500;
-                    }
-                    .text {
-                        flex: 1;
-                        min-width: 0;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        color: var(--routine);
-                        font-size: 12px;
-                    }
-                    .views {
-                        color: var(--seat);
-                        font-size: 12px;
-                        margin-left: 3px;
-                    }
-                }
-            }
-        }
-    }
-    &__below {
-        position: relative;
-        border-top: 1px solid var(--classC);
-        height: 45px;
-        &-class {
-            display: flex;
-            .item {
-                margin-right: 15px;
-                color: var(--minor);
-                height: 45px;
-                line-height: 45px;
-                transition: color 0.35s;
-                white-space: nowrap;
-                &:hover,
-                &.active {
-                    color: var(--theme);
-                }
-            }
-            .joe_dropdown {
-                margin-right: 15px;
-                &__link {
-                    .item {
-                        margin-right: 3px;
-                    }
-                }
-                &__menu {
-                    width: 110px;
-                    text-align: center;
-                    a {
-                        display: block;
-                        height: 34px;
-                        line-height: 34px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        color: var(--minor);
-                        transition: color 0.35s, background 0.35s;
-                        &:hover,
-                        &.active {
-                            color: var(--theme);
-                            background: var(--classD);
-                        }
-                    }
-                }
-            }
-        }
-        &-progress {
-            position: absolute;
-            left: 0;
-            bottom: -3px;
-            height: 3px;
-            border-radius: 1.5px;
-            background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
-            transition: width 0.35s;
-        }
-    }
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	background: var(--background);
+	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+	&__above {
+		&-logo {
+			position: relative;
+			display: flex;
+			align-items: center;
+			height: 60px;
+			padding-right: 15px;
+			margin-right: 15px;
+			img {
+				max-width: 150px;
+				max-height: 50px;
+				object-fit: cover;
+			}
+			svg {
+				display: none;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				right: 0;
+				width: 1px;
+				height: 20px;
+				background: var(--classC);
+				transform: translateY(-50%);
+			}
+		}
+		&-nav {
+			display: flex;
+			align-items: center;
+			.item {
+				position: relative;
+				height: 60px;
+				line-height: 60px;
+				font-size: 15px;
+				padding: 0 8px;
+				margin-right: 15px;
+				transition: color 0.35s;
+				white-space: nowrap;
+				color: var(--main);
+				&:last-child {
+					margin-right: 0;
+				}
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					height: 3px;
+					transition: opacity 0.5s, transform 0.5s;
+					border-radius: 6px 6px 0 0;
+					opacity: 0;
+					transform: scaleX(0.25);
+					background: var(--theme);
+				}
+				&.active,
+				&:hover {
+					color: var(--theme);
+					&::after {
+						opacity: 1;
+						transform: scaleX(1);
+					}
+				}
+			}
+			.joe_dropdown {
+				&__link {
+					a {
+						height: 60px;
+						line-height: 60px;
+						font-size: 15px;
+						padding-left: 8px;
+						padding-right: 3px;
+						transition: color 0.35s;
+						white-space: nowrap;
+						color: var(--main);
+					}
+				}
+				&__menu {
+					width: 110px;
+					text-align: center;
+					a {
+						display: block;
+						line-height: 34px;
+						height: 34px;
+						transition: color 0.35s, background 0.35s;
+						color: var(--minor);
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						padding: 0 15px;
+						&:hover,
+						&.active {
+							color: var(--theme);
+							background: var(--classD);
+						}
+					}
+				}
+			}
+		}
+		&-search {
+			position: relative;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			.input {
+				background: var(--classC);
+				width: 170px;
+				height: 34px;
+				border: 1px solid transparent;
+				padding: 0 18px;
+				color: var(--routine);
+				transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
+				border-radius: 17px 0 0 17px;
+				&:focus {
+					background: var(--background);
+					border-color: var(--theme);
+					padding-right: 28px;
+					~ .icon {
+						transform: translate3d(0, -50%, 0) rotateY(180deg);
+					}
+				}
+			}
+			.submit {
+				position: relative;
+				z-index: 1;
+				height: 34px;
+				border: none;
+				background: var(--theme);
+				color: #fff;
+				border-radius: 0 17px 17px 0;
+				padding: 0 10px;
+			}
+			.icon {
+				position: absolute;
+				top: 50%;
+				left: 142px;
+				width: 28px;
+				height: 38px;
+				background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
+				background-size: 100% 100%;
+				transition: transform 0.35s;
+				transform: translate3d(100%, -50%, 0) rotateY(180deg);
+			}
+			.result {
+				position: absolute;
+				z-index: 2;
+				top: 60px;
+				left: 0;
+				right: 0;
+				background: var(--background);
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+				border-radius: 4px;
+				visibility: hidden;
+				opacity: 0;
+				transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
+				transform: translate3d(0, 15px, 0);
+				&.active {
+					transform: translate3d(0, 0, 0);
+					opacity: 1;
+					visibility: visible;
+				}
+				.item {
+					height: 40px;
+					line-height: 40px;
+					border-bottom: 1px solid var(--classD);
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					padding: 0 8px;
+					transition: background 0.35s;
+					&:last-child {
+						border-bottom: none;
+					}
+					&:nth-child(1) .sort {
+						background: #fe2d46;
+					}
+					&:nth-child(2) .sort {
+						background: #f60;
+					}
+					&:nth-child(3) .sort {
+						background: #faa90e;
+					}
+					&:hover {
+						background: var(--classD);
+					}
+					.sort {
+						color: #fff;
+						background: #7f7f8c;
+						width: 18px;
+						height: 18px;
+						line-height: 18px;
+						border-radius: 50%;
+						text-align: center;
+						margin-right: 8px;
+						font-weight: 500;
+					}
+					.text {
+						flex: 1;
+						min-width: 0;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: var(--routine);
+						font-size: 12px;
+					}
+					.views {
+						color: var(--seat);
+						font-size: 12px;
+						margin-left: 3px;
+					}
+				}
+			}
+		}
+	}
+	&__below {
+		position: relative;
+		border-top: 1px solid var(--classC);
+		height: 45px;
+		&-class {
+			display: flex;
+			.item {
+				margin-right: 15px;
+				color: var(--minor);
+				height: 45px;
+				line-height: 45px;
+				transition: color 0.35s;
+				white-space: nowrap;
+				&:hover,
+				&.active {
+					color: var(--theme);
+				}
+			}
+			.joe_dropdown {
+				margin-right: 15px;
+				&__link {
+					.item {
+						margin-right: 3px;
+					}
+				}
+				&__menu {
+					width: 110px;
+					text-align: center;
+					a {
+						display: block;
+						height: 34px;
+						line-height: 34px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: var(--minor);
+						transition: color 0.35s, background 0.35s;
+						&:hover,
+						&.active {
+							color: var(--theme);
+							background: var(--classD);
+						}
+					}
+				}
+			}
+		}
+		&-progress {
+			position: absolute;
+			z-index: 1;
+			left: 0;
+			bottom: -3px;
+			height: 3px;
+			border-radius: 1.5px;
+			background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
+			transition: width 0.35s;
+		}
+	}
 }
 
 .joe_aside {
-    padding: 15px 0;
-    margin-left: 15px;
-    &__item {
-        position: relative;
-        width: 250px;
-        margin-bottom: 15px;
-        border-radius: 8px;
-        box-shadow: var(--box-shadow);
-        overflow: hidden;
-        &:last-child {
-            position: sticky;
-            margin-bottom: 0;
-        }
-        &-title {
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid var(--classC);
-            font-size: 16px;
-            font-weight: 500;
-            height: 45px;
-            line-height: 45px;
-            padding: 0 15px;
-            color: var(--main);
-            .icon {
-                width: 18px;
-                height: 18px;
-                margin-right: 8px;
-                fill: var(--main);
-            }
-            .line {
-                width: 10px;
-                height: 1px;
-                background: #54b5db;
-                margin-left: 12px;
-            }
-        }
-        &-contain {
-            position: relative;
-            padding: 15px;
-        }
-        &.author {
-            background: var(--background);
-            padding: 45px 15px 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 90px;
-                left: 0;
-                width: 100%;
-                height: 30px;
-                z-index: 2;
-                background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
-            }
-            &::after {
-                display: none;
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 273px;
-                background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
-                background-size: cover;
-                z-index: 3;
-                pointer-events: none;
-            }
-            &:hover::after {
-                display: block;
-            }
-            .image {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 120px;
-                object-fit: cover;
-                z-index: 1;
-            }
-            .user {
-                position: relative;
-                z-index: 4;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding-bottom: 15px;
-                .avatar {
-                    width: 75px;
-                    height: 75px;
-                    border-radius: 50%;
-                    overflow: hidden;
-                    margin-bottom: 10px;
-                    object-fit: cover;
-                    transition: transform 0.75s;
-                    background: var(--background);
-                    padding: 5px;
-                    &:hover {
-                        transform: rotate(360deg);
-                    }
-                }
-                .link {
-                    color: var(--theme);
-                    margin-bottom: 10px;
-                    font-size: 16px;
-                    font-weight: 500;
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-                .motto {
-                    color: var(--main);
-                    text-align: center;
-                }
-            }
-            .count {
-                width: 100%;
-                padding-bottom: 15px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid var(--classC);
-                .item {
-                    min-width: 0;
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    color: var(--routine);
-                    font-size: 12px;
-                    &:first-child {
-                        border-right: 1px solid var(--classC);
-                    }
-                    .num {
-                        max-width: 70px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        font-weight: 500;
-                        font-size: 22px;
-                        color: var(--main);
-                        margin-bottom: 3px;
-                        text-shadow: var(--text_shadow);
-                    }
-                }
-            }
-            .list {
-                padding-top: 15px;
-                .item {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    line-height: 30px;
-                    .link {
-                        position: relative;
-                        color: var(--routine);
-                        max-width: 85%;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            width: 0;
-                            height: 1px;
-                            background: var(--theme);
-                            transition: all 0.35s;
-                        }
-                        &:hover {
-                            color: var(--theme);
-                            &::after {
-                                width: 100%;
-                            }
-                        }
-                    }
-                    .icon {
-                        fill: var(--routine);
-                    }
-                }
-            }
-        }
-        &.timelife {
-            background: var(--background);
-            .item {
-                margin-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                .title {
-                    font-size: 12px;
-                    color: var(--minor);
-                    margin-bottom: 5px;
-                    display: flex;
-                    align-items: center;
-                    .text {
-                        color: var(--theme);
-                        font-weight: 500;
-                        font-size: 14px;
-                        margin: 0 5px;
-                    }
-                }
-                .progress {
-                    display: flex;
-                    align-items: center;
-                    &-bar {
-                        height: 10px;
-                        border-radius: 5px;
-                        overflow: hidden;
-                        background: var(--classC);
-                        width: 0;
-                        min-width: 0;
-                        flex: 1;
-                        margin-right: 5px;
-                        &-inner {
-                            width: 0;
-                            height: 100%;
-                            border-radius: 5px;
-                            transition: width 0.35s;
-                            animation: progress 750ms linear infinite;
-                            &-0 {
-                                background: #bde6ff;
-                                background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-1 {
-                                background: #ffd980;
-                                background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-2 {
-                                background: #ffa9a9;
-                                background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-3 {
-                                background: #67c23a;
-                                background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                        }
-                    }
-                    &-percentage {
-                        color: var(--minor);
-                    }
-                }
-            }
-        }
-        &.weather {
-            background: var(--background);
-            .joe_aside__item-contain {
-                min-height: 300px;
-            }
-        }
-        &.hot {
-            background: var(--background);
-            .empty {
-                text-align: center;
-                color: var(--routine);
-            }
-            .item {
-                margin-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                &:nth-child(1) .link .sort {
-                    background: #ff183e;
-                }
-                &:nth-child(2) .link .sort {
-                    background: #ff5c38;
-                }
-                &:nth-child(3) .link .sort {
-                    background: #ffb821;
-                }
-                .link {
-                    position: relative;
-                    display: block;
-                    border-radius: 4px;
-                    overflow: hidden;
-                    &:hover .image {
-                        transform: scale(1.2);
-                    }
-                    .sort {
-                        position: absolute;
-                        top: 5px;
-                        right: -20px;
-                        background: #7f7f8c;
-                        color: #fff;
-                        width: 65px;
-                        text-align: center;
-                        font-size: 12px;
-                        transform: rotate(45deg);
-                        font-weight: 500;
-                        z-index: 1;
-                        font-style: normal;
-                    }
-                    .image {
-                        width: 100%;
-                        height: 130px;
-                        object-fit: cover;
-                        transition: transform 0.35s;
-                    }
-                    .describe {
-                        position: absolute;
-                        z-index: 1;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        padding: 10px;
-                        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
-                        font-size: 12px;
-                        color: var(--seat);
-                        h6 {
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            color: #fff;
-                            line-height: 24px;
-                            font-size: 14px;
-                        }
-                    }
-                }
-            }
-        }
-        &.ranking {
-            background: var(--background);
-            .item {
-                display: flex;
-                align-items: center;
-                line-height: 32px;
-                overflow: hidden;
-                &:nth-child(1) .sort {
-                    color: #fe2d46;
-                }
-                &:nth-child(2) .sort {
-                    color: #f60;
-                }
-                &:nth-child(3) .sort {
-                    color: #faa90e;
-                }
-                .sort {
-                    color: var(--minor);
-                    font-weight: 700;
-                    font-size: 18px;
-                    width: 18px;
-                    min-width: 18px;
-                    max-width: 18px;
-                }
-                .link {
-                    position: relative;
-                    color: var(--routine);
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    &::after {
-                        position: absolute;
-                        content: '';
-                        bottom: 0;
-                        left: 0;
-                        width: 0;
-                        height: 1px;
-                        background: var(--theme);
-                        transition: width 0.5s;
-                    }
-                    &:hover {
-                        color: var(--theme);
-                        &::after {
-                            width: 100%;
-                        }
-                    }
-                }
-            }
-            .error {
-                text-align: center;
-                color: var(--routine);
-            }
-        }
-        &.newreply {
-            background: var(--background);
-            .empty {
-                text-align: center;
-                color: var(--routine);
-            }
-            .item {
-                margin-bottom: 15px;
-                border-bottom: 1px dashed var(--classC);
-                padding-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                    border-bottom-color: transparent;
-                    padding-bottom: 0;
-                }
-                .user {
-                    display: flex;
-                    margin-bottom: 12px;
-                    .avatar {
-                        width: 40px;
-                        height: 40px;
-                        min-width: 40px;
-                        min-height: 40px;
-                        margin-right: 12px;
-                        border-radius: 50%;
-                        border: 1px solid var(--classA);
-                        padding: 3px;
-                    }
-                    .info {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-between;
-                        .author {
-                            color: var(--main);
-                            font-weight: 600;
-                            max-width: 150px;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        }
-                        .date {
-                            font-size: 12px;
-                            color: var(--minor);
-                        }
-                    }
-                }
-                .reply {
-                    position: relative;
-                    background: var(--classD);
-                    border-radius: 6px;
-                    padding: 5px 10px;
-                    &::before {
-                        content: '';
-                        width: 0;
-                        height: 0;
-                        border-bottom: 6px solid var(--classD);
-                        border-left: 6px solid transparent;
-                        border-right: 6px solid transparent;
-                        position: absolute;
-                        left: 15px;
-                        bottom: 100%;
-                    }
-                    .link {
-                        display: -webkit-box;
-                        -webkit-line-clamp: 2;
-                        /*! autoprefixer: off */
-                        -webkit-box-orient: vertical;
-                        /* autoprefixer: on */
-                        overflow: hidden;
-                        text-overflow: ellipsis;
+	padding: 15px 0;
+	margin-left: 15px;
+	&__item {
+		position: relative;
+		width: 250px;
+		margin-bottom: 15px;
+		border-radius: 8px;
+		box-shadow: var(--box-shadow);
+		overflow: hidden;
+		&:last-child {
+			position: sticky;
+			margin-bottom: 0;
+		}
+		&-title {
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid var(--classC);
+			font-size: 16px;
+			font-weight: 500;
+			height: 45px;
+			line-height: 45px;
+			padding: 0 15px;
+			color: var(--main);
+			.icon {
+				width: 18px;
+				height: 18px;
+				margin-right: 8px;
+				fill: var(--main);
+			}
+			.line {
+				width: 10px;
+				height: 1px;
+				background: #54b5db;
+				margin-left: 12px;
+			}
+		}
+		&-contain {
+			position: relative;
+			padding: 15px;
+		}
+		&.author {
+			background: var(--background);
+			padding: 45px 15px 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 90px;
+				left: 0;
+				width: 100%;
+				height: 30px;
+				z-index: 2;
+				background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
+			}
+			&::after {
+				display: none;
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 273px;
+				background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
+				background-size: cover;
+				z-index: 3;
+				pointer-events: none;
+			}
+			&:hover::after {
+				display: block;
+			}
+			.image {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 120px;
+				object-fit: cover;
+				z-index: 1;
+			}
+			.user {
+				position: relative;
+				z-index: 4;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding-bottom: 15px;
+				.avatar {
+					width: 75px;
+					height: 75px;
+					border-radius: 50%;
+					overflow: hidden;
+					margin-bottom: 10px;
+					object-fit: cover;
+					transition: transform 0.75s;
+					background: var(--background);
+					padding: 5px;
+					&:hover {
+						transform: rotate(360deg);
+					}
+				}
+				.link {
+					color: var(--theme);
+					margin-bottom: 10px;
+					font-size: 16px;
+					font-weight: 500;
+					&:hover {
+						text-decoration: underline;
+					}
+				}
+				.motto {
+					color: var(--main);
+					text-align: center;
+				}
+			}
+			.count {
+				width: 100%;
+				padding-bottom: 15px;
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--classC);
+				.item {
+					min-width: 0;
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					color: var(--routine);
+					font-size: 12px;
+					&:first-child {
+						border-right: 1px solid var(--classC);
+					}
+					.num {
+						max-width: 70px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-weight: 500;
+						font-size: 22px;
+						color: var(--main);
+						margin-bottom: 3px;
+						text-shadow: var(--text_shadow);
+					}
+				}
+			}
+			.list {
+				padding-top: 15px;
+				.item {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					line-height: 30px;
+					.link {
+						position: relative;
+						color: var(--routine);
+						max-width: 85%;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						&::after {
+							content: '';
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 0;
+							height: 1px;
+							background: var(--theme);
+							transition: all 0.35s;
+						}
+						&:hover {
+							color: var(--theme);
+							&::after {
+								width: 100%;
+							}
+						}
+					}
+					.icon {
+						fill: var(--routine);
+					}
+				}
+			}
+		}
+		&.timelife {
+			background: var(--background);
+			.item {
+				margin-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				.title {
+					font-size: 12px;
+					color: var(--minor);
+					margin-bottom: 5px;
+					display: flex;
+					align-items: center;
+					.text {
+						color: var(--theme);
+						font-weight: 500;
+						font-size: 14px;
+						margin: 0 5px;
+					}
+				}
+				.progress {
+					display: flex;
+					align-items: center;
+					&-bar {
+						height: 10px;
+						border-radius: 5px;
+						overflow: hidden;
+						background: var(--classC);
+						width: 0;
+						min-width: 0;
+						flex: 1;
+						margin-right: 5px;
+						&-inner {
+							width: 0;
+							height: 100%;
+							border-radius: 5px;
+							transition: width 0.35s;
+							animation: progress 750ms linear infinite;
+							&-0 {
+								background: #bde6ff;
+								background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-1 {
+								background: #ffd980;
+								background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-2 {
+								background: #ffa9a9;
+								background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-3 {
+								background: #67c23a;
+								background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+						}
+					}
+					&-percentage {
+						color: var(--minor);
+					}
+				}
+			}
+		}
+		&.weather {
+			background: var(--background);
+			.joe_aside__item-contain {
+				min-height: 300px;
+			}
+		}
+		&.hot {
+			background: var(--background);
+			.empty {
+				text-align: center;
+				color: var(--routine);
+			}
+			.item {
+				margin-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				&:nth-child(1) .link .sort {
+					background: #ff183e;
+				}
+				&:nth-child(2) .link .sort {
+					background: #ff5c38;
+				}
+				&:nth-child(3) .link .sort {
+					background: #ffb821;
+				}
+				.link {
+					position: relative;
+					display: block;
+					border-radius: 4px;
+					overflow: hidden;
+					&:hover .image {
+						transform: scale(1.2);
+					}
+					.sort {
+						position: absolute;
+						top: 5px;
+						right: -20px;
+						background: #7f7f8c;
+						color: #fff;
+						width: 65px;
+						text-align: center;
+						font-size: 12px;
+						transform: rotate(45deg);
+						font-weight: 500;
+						z-index: 1;
+						font-style: normal;
+					}
+					.image {
+						width: 100%;
+						height: 130px;
+						object-fit: cover;
+						transition: transform 0.35s;
+					}
+					.describe {
+						position: absolute;
+						z-index: 1;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						padding: 10px;
+						background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
+						font-size: 12px;
+						color: var(--seat);
+						h6 {
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							color: #fff;
+							line-height: 24px;
+							font-size: 14px;
+						}
+					}
+				}
+			}
+		}
+		&.ranking {
+			background: var(--background);
+			.item {
+				display: flex;
+				align-items: center;
+				line-height: 32px;
+				overflow: hidden;
+				&:nth-child(1) .sort {
+					color: #fe2d46;
+				}
+				&:nth-child(2) .sort {
+					color: #f60;
+				}
+				&:nth-child(3) .sort {
+					color: #faa90e;
+				}
+				.sort {
+					color: var(--minor);
+					font-weight: 700;
+					font-size: 18px;
+					width: 18px;
+					min-width: 18px;
+					max-width: 18px;
+				}
+				.link {
+					position: relative;
+					color: var(--routine);
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					&::after {
+						position: absolute;
+						content: '';
+						bottom: 0;
+						left: 0;
+						width: 0;
+						height: 1px;
+						background: var(--theme);
+						transition: width 0.5s;
+					}
+					&:hover {
+						color: var(--theme);
+						&::after {
+							width: 100%;
+						}
+					}
+				}
+			}
+			.error {
+				text-align: center;
+				color: var(--routine);
+			}
+		}
+		&.newreply {
+			background: var(--background);
+			.empty {
+				text-align: center;
+				color: var(--routine);
+			}
+			.item {
+				margin-bottom: 15px;
+				border-bottom: 1px dashed var(--classC);
+				padding-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+					border-bottom-color: transparent;
+					padding-bottom: 0;
+				}
+				.user {
+					display: flex;
+					margin-bottom: 12px;
+					.avatar {
+						width: 40px;
+						height: 40px;
+						min-width: 40px;
+						min-height: 40px;
+						margin-right: 12px;
+						border-radius: 50%;
+						border: 1px solid var(--classA);
+						padding: 3px;
+					}
+					.info {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						.author {
+							color: var(--main);
+							font-weight: 600;
+							max-width: 150px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+						.date {
+							font-size: 12px;
+							color: var(--minor);
+						}
+					}
+				}
+				.reply {
+					position: relative;
+					background: var(--classD);
+					border-radius: 6px;
+					padding: 5px 10px;
+					&::before {
+						content: '';
+						width: 0;
+						height: 0;
+						border-bottom: 6px solid var(--classD);
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						position: absolute;
+						left: 15px;
+						bottom: 100%;
+					}
+					.link {
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						/*! autoprefixer: off */
+						-webkit-box-orient: vertical;
+						/* autoprefixer: on */
+						overflow: hidden;
+						text-overflow: ellipsis;
 
-                        color: var(--minor);
-                        font-size: 13px;
-                        font-weight: 500;
-                        line-height: 24px;
-                        transition: all 0.35s;
-                        &:hover {
-                            color: var(--theme);
-                        }
-                        .owo_image {
-                            height: 18px;
-                            vertical-align: -5px;
-                        }
-                    }
-                }
-            }
-        }
-    }
+						color: var(--minor);
+						font-size: 13px;
+						font-weight: 500;
+						line-height: 24px;
+						transition: all 0.35s;
+						&:hover {
+							color: var(--theme);
+						}
+						.owo_image {
+							height: 18px;
+							vertical-align: -5px;
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_list {
-    &__item {
-        display: flex;
-        position: relative;
-        width: 100%;
-        padding: 15px 0;
-        border-bottom: 1px solid var(--classC);
-        &:last-child {
-            border-bottom: none;
-        }
-        &:hover {
-            .line {
-                transform: scaleY(1);
-            }
-            .thumbnail {
-                time {
-                    transform: translate3d(0, 0, 0);
-                }
-            }
-        }
-        .line {
-            position: absolute;
-            z-index: 1;
-            top: 15px;
-            left: -15px;
-            width: 4px;
-            height: 25px;
-            border-radius: 2px;
-            background: var(--theme);
-            transform: scaleY(0);
-            transition: transform 0.35s;
-        }
-        .thumbnail {
-            position: relative;
-            width: 210px;
-            height: 140px;
-            min-width: 210px;
-            min-height: 140px;
-            margin-right: 15px;
-            overflow: hidden;
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: 4px;
-                transition: opacity 0.35s;
-                &:hover {
-                    opacity: 0.85;
-                }
-            }
-            time {
-                position: absolute;
-                z-index: 1;
-                top: 5px;
-                right: 5px;
-                background: var(--theme);
-                height: 20px;
-                line-height: 20px;
-                padding: 0 8px;
-                color: #fff;
-                font-size: 12px;
-                border-radius: 10px;
-                transition: transform 0.35s;
-                transform: translate3d(120%, 0, 0);
-            }
-            svg {
-                position: absolute;
-                z-index: 1;
-                top: 5px;
-                left: 5px;
-                width: 20px;
-                height: 20px;
-                fill: #fff;
-            }
-        }
-        .information {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            min-width: 0;
-            .title {
-                display: flex;
-                align-items: center;
-                margin-bottom: 10px;
-                .badge {
-                    height: 20px;
-                    line-height: 20px;
-                    background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
-                    color: #fff;
-                    font-size: 12px;
-                    margin-right: 5px;
-                    border-radius: 2px;
-                    padding: 0 8px;
-                    white-space: nowrap;
-                }
-                h6 {
-                    color: var(--main);
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    font-size: 18px;
-                    line-height: 24px;
-                    transition: color 0.35s;
-                    &:hover {
-                        color: var(--theme);
-                    }
-                }
-            }
-            .abstract {
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                /*! autoprefixer: off */
-                -webkit-box-orient: vertical;
-                /* autoprefixer: on */
-                overflow: hidden;
-                text-overflow: ellipsis;
-                color: var(--minor);
-                transition: opacity 0.35s;
-                word-break: break-all;
-                line-height: 24px;
-                &:hover {
-                    opacity: 0.8;
-                }
-            }
-            .meta {
-                display: flex;
-                align-items: center;
-                margin-top: auto;
-                color: var(--minor);
-                font-size: 13px;
-                .items {
-                    display: flex;
-                    align-items: center;
-                    li {
-                        &::after {
-                            content: '/';
-                            color: #e1e1e1;
-                            padding: 0 5px;
-                        }
-                        &:last-child::after {
-                            display: none;
-                        }
-                    }
-                }
-                .last {
-                    margin-left: auto;
-                    display: flex;
-                    align-items: center;
-                    .icon {
-                        margin-right: 3px;
-                    }
-                    .link {
-                        color: var(--minor);
-                        &:hover {
-                            color: var(--theme);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__loading {
-        .item {
-            display: flex;
-            position: relative;
-            width: 100%;
-            padding: 15px 0;
-            border-bottom: 1px solid var(--classC);
-            &:last-child {
-                border-bottom: none;
-            }
-            .thumbnail {
-                position: relative;
-                width: 210px;
-                height: 140px;
-                min-width: 210px;
-                min-height: 140px;
-                margin-right: 15px;
-                background: var(--classD);
-                animation: list_thumbnail_loading 0.5s infinite alternate;
-                border-radius: 4px;
-            }
-            .information {
-                flex: 1;
-                min-width: 0;
-                .title {
-                    height: 24px;
-                    border-radius: 4px;
-                    background: var(--classD);
-                    animation: list_title_loading 0.75s infinite alternate;
-                    margin-bottom: 15px;
-                }
-                .abstract {
-                    p {
-                        height: 18px;
-                        border-radius: 4px;
-                        background: var(--classD);
-                        margin-bottom: 5px;
-                        animation: list_abstract_loading 0.8s infinite alternate;
-                    }
-                }
-            }
-        }
-    }
+	&__item {
+		display: flex;
+		position: relative;
+		width: 100%;
+		padding: 15px 0;
+		border-bottom: 1px solid var(--classC);
+		&:last-child {
+			border-bottom: none;
+		}
+		&:hover {
+			.line {
+				transform: scaleY(1);
+			}
+			.thumbnail {
+				time {
+					transform: translate3d(0, 0, 0);
+				}
+			}
+		}
+		.line {
+			position: absolute;
+			z-index: 1;
+			top: 15px;
+			left: -15px;
+			width: 4px;
+			height: 25px;
+			border-radius: 2px;
+			background: var(--theme);
+			transform: scaleY(0);
+			transition: transform 0.35s;
+		}
+		.thumbnail {
+			position: relative;
+			width: 210px;
+			height: 140px;
+			min-width: 210px;
+			min-height: 140px;
+			margin-right: 15px;
+			overflow: hidden;
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				border-radius: 4px;
+				transition: opacity 0.35s;
+				&:hover {
+					opacity: 0.85;
+				}
+			}
+			time {
+				position: absolute;
+				z-index: 1;
+				top: 5px;
+				right: 5px;
+				background: var(--theme);
+				height: 20px;
+				line-height: 20px;
+				padding: 0 8px;
+				color: #fff;
+				font-size: 12px;
+				border-radius: 10px;
+				transition: transform 0.35s;
+				transform: translate3d(120%, 0, 0);
+			}
+			svg {
+				position: absolute;
+				z-index: 1;
+				top: 5px;
+				left: 5px;
+				width: 20px;
+				height: 20px;
+				fill: #fff;
+			}
+		}
+		.information {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-width: 0;
+			.title {
+				display: flex;
+				align-items: center;
+				margin-bottom: 10px;
+				.badge {
+					height: 20px;
+					line-height: 20px;
+					background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
+					color: #fff;
+					font-size: 12px;
+					margin-right: 5px;
+					border-radius: 2px;
+					padding: 0 8px;
+					white-space: nowrap;
+				}
+				h6 {
+					color: var(--main);
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: 18px;
+					line-height: 24px;
+					transition: color 0.35s;
+					&:hover {
+						color: var(--theme);
+					}
+				}
+			}
+			.abstract {
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				/*! autoprefixer: off */
+				-webkit-box-orient: vertical;
+				/* autoprefixer: on */
+				overflow: hidden;
+				text-overflow: ellipsis;
+				color: var(--minor);
+				transition: opacity 0.35s;
+				word-break: break-all;
+				line-height: 24px;
+				&:hover {
+					opacity: 0.8;
+				}
+			}
+			.meta {
+				display: flex;
+				align-items: center;
+				margin-top: auto;
+				color: var(--minor);
+				font-size: 13px;
+				.items {
+					display: flex;
+					align-items: center;
+					li {
+						&::after {
+							content: '/';
+							color: #e1e1e1;
+							padding: 0 5px;
+						}
+						&:last-child::after {
+							display: none;
+						}
+					}
+				}
+				.last {
+					margin-left: auto;
+					display: flex;
+					align-items: center;
+					.icon {
+						margin-right: 3px;
+					}
+					.link {
+						color: var(--minor);
+						&:hover {
+							color: var(--theme);
+						}
+					}
+				}
+			}
+		}
+	}
+	&__loading {
+		.item {
+			display: flex;
+			position: relative;
+			width: 100%;
+			padding: 15px 0;
+			border-bottom: 1px solid var(--classC);
+			&:last-child {
+				border-bottom: none;
+			}
+			.thumbnail {
+				position: relative;
+				width: 210px;
+				height: 140px;
+				min-width: 210px;
+				min-height: 140px;
+				margin-right: 15px;
+				background: var(--classD);
+				animation: list_thumbnail_loading 0.5s infinite alternate;
+				border-radius: 4px;
+			}
+			.information {
+				flex: 1;
+				min-width: 0;
+				.title {
+					height: 24px;
+					border-radius: 4px;
+					background: var(--classD);
+					animation: list_title_loading 0.75s infinite alternate;
+					margin-bottom: 15px;
+				}
+				.abstract {
+					p {
+						height: 18px;
+						border-radius: 4px;
+						background: var(--classD);
+						margin-bottom: 5px;
+						animation: list_abstract_loading 0.8s infinite alternate;
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_load {
-    margin: 15px auto 0;
-    width: 120px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    border-radius: 16px;
-    cursor: pointer;
-    user-select: none;
-    background: var(--background);
-    color: var(--routine);
-    transition: transform 0.25s;
-    box-shadow: var(--box-shadow);
-    &:active {
-        transform: scale(0.75);
-    }
+	margin: 15px auto 0;
+	width: 120px;
+	height: 32px;
+	line-height: 32px;
+	text-align: center;
+	border-radius: 16px;
+	cursor: pointer;
+	user-select: none;
+	background: var(--background);
+	color: var(--routine);
+	transition: transform 0.25s;
+	box-shadow: var(--box-shadow);
+	&:active {
+		transform: scale(0.75);
+	}
 }
 
 .joe_detail {
-    background: var(--background);
-    border-radius: 8px;
-    padding: 15px;
-    box-shadow: var(--box-shadow);
-    margin-bottom: 15px;
-    &__category {
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        .item {
-            color: #fff;
-            font-size: 12px;
-            padding: 3px 8px;
-            margin-right: 5px;
-            border-radius: 2px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: 120px;
-            transition: transform 0.35s, opacity 0.35s;
-            &:hover {
-                opacity: 0.85;
-                transform: translate3d(0, -3px, 0);
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-            &-0 {
-                background: #0396ff;
-            }
-            &-1 {
-                background: #ea5455;
-            }
-            &-2 {
-                background: #7367f0;
-            }
-            &-3 {
-                background: #28c76f;
-            }
-            &-4 {
-                background: #9f44d3;
-            }
-        }
-    }
-    &__title {
-        font-size: 24px;
-        color: var(--main);
-        text-shadow: var(--text-shadow);
-        text-align: center;
-        margin-bottom: 15px;
-        word-break: break-all;
-    }
-    &__count {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-bottom: 15px;
-        border-bottom: 1px solid var(--classB);
-        &::after {
-            content: '';
-            position: absolute;
-            bottom: -1.5px;
-            left: 0;
-            width: 80px;
-            height: 3px;
-            border-radius: 1.5px;
-            background: var(--theme);
-        }
-        &-information {
-            display: flex;
-            align-items: center;
-            .avatar {
-                width: 35px;
-                height: 35px;
-                border-radius: 50%;
-                margin-right: 10px;
-                border: 1px solid var(--classA);
-                padding: 3px;
-            }
-            .meta {
-                display: flex;
-                flex-direction: column;
-                height: 35px;
-                justify-content: space-between;
-                .author {
-                    .link {
-                        font-weight: 500;
-                        color: var(--theme);
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-                }
-                .item {
-                    display: flex;
-                    align-items: center;
-                    color: var(--minor);
-                    font-size: 12px;
-                    line-height: 16px;
-                    .line {
-                        color: var(--seat);
-                        margin: 0 7px;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-        &-created {
-            font-size: 32px;
-            line-height: 42px;
-            color: var(--routine);
-            user-select: none;
-            text-shadow: var(--text-shadow);
-            font-family: consolas;
-        }
-    }
-    &__article {
-        padding-top: 15px;
-        font-size: 15px;
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            color: var(--main);
-            font-size: 18px;
-            line-height: 24px;
-            margin-bottom: 15px;
-            position: relative;
-        }
-        h1 {
-            padding: 0 15px 0 20px;
-            &::before {
-                content: '#';
-                color: var(--theme);
-                font-weight: 700;
-                position: absolute;
-                top: 0;
-                left: 0;
-                line-height: 24px;
-            }
-        }
-        h2 {
-            padding: 0 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 10%;
-                bottom: 10%;
-                left: 0;
-                width: 4px;
-                border-radius: 2px;
-                background: var(--theme);
-            }
-        }
-        h3 {
-            padding: 0 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 8.5px;
-                left: 0;
-                height: 7px;
-                width: 7px;
-                border-radius: 50%;
-                background: var(--theme);
-            }
-        }
-        h4 {
-            &::before {
-                content: '「';
-                color: var(--theme);
-                font-weight: 600;
-                margin-right: 5px;
-            }
-            &::after {
-                content: '」';
-                color: var(--theme);
-                font-weight: 600;
-                margin-left: 5px;
-            }
-        }
-        h5 {
-            padding: 0 15px 0 28px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 2px;
-                left: 0;
-                width: 20px;
-                height: 20px;
-                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
-                background-size: 100% 100%;
-            }
-        }
-        h6 {
-            padding: 0 15px 0 28px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 2px;
-                left: 0;
-                width: 20px;
-                height: 20px;
-                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
-                background-size: 100% 100%;
-            }
-        }
-        hr {
-            border: none;
-            height: 1px;
-            background-color: var(--classB);
-            margin-bottom: 15px;
-        }
-        p {
-            color: var(--routine);
-            line-height: 26px;
-            white-space: pre-wrap;
-            word-spacing: 5px;
-            letter-spacing: 1px;
-            word-break: break-all;
-            margin-bottom: 15px;
-        }
-        blockquote {
-            color: var(--routine);
-            line-height: 26px;
-            white-space: pre-wrap;
-            word-spacing: 5px;
-            letter-spacing: 1px;
-            word-break: break-all;
-            margin-bottom: 15px;
-            background: #ecf8ff;
-            border-left: 5px solid #50bfff;
-            padding: 10px 15px;
-            border-radius: 0 4px 4px 0;
-            font-size: 14px;
-            p {
-                margin: 0;
-            }
-        }
-        a {
-            display: inline-block;
-            line-height: 26px;
-            color: var(--theme);
-            position: relative;
-            &:hover::after {
-                opacity: 1;
-                transform: scaleX(1);
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 1px;
-                bottom: -1px;
-                left: 0;
-                background: var(--theme);
-                transform: scaleX(0.25);
-                opacity: 0;
-                transition: transform 0.35s, opacity 0.35s;
-            }
-        }
-        code {
-            display: inline-block;
-            min-height: 26px;
-            line-height: 26px;
-            border-radius: 4px;
-            font-size: 12px;
-            background: #fdf6ec;
-            padding: 0 8px;
-            color: #e6a23c;
-        }
-        pre code {
-            display: unset;
-            vertical-align: unset;
-            min-height: unset;
-            line-height: unset;
-            border-radius: unset;
-            font-size: unset;
-            background: unset;
-            padding: unset;
-            color: unset;
-        }
-        pre[class*='language-'] {
-            position: relative;
-            padding: 15px;
-            padding-top: 35px;
-            margin: 0 0 15px;
-            border-radius: 4px;
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 30px;
-                background: #2d2d2d;
-            }
-            &::before {
-                content: '';
-                position: absolute;
-                top: 9px;
-                left: 15px;
-                width: 12px;
-                height: 12px;
-                border-radius: 50%;
-                background: #fc625d;
-                box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-                z-index: 1;
-            }
-        }
-        img {
-            display: block;
-            max-width: 100%;
-            border-radius: 4px;
-            transition: transform 0.35s, box-shadow 0.35s;
-            cursor: zoom-in;
-            margin: 0 auto;
-            &:hover {
-                // transform: translateY(-5px);
-                box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
-            }
-        }
-        ol,
-        ul {
-            color: var(--routine);
-            margin-bottom: 15px;
-            padding: 0 30px;
-            li {
-                line-height: 26px;
-            }
-        }
-        ol li {
-            list-style: decimal;
-        }
-        ul li {
-            list-style: disc;
-            &::marker {
-                color: var(--routine);
-            }
-        }
-        table {
-            width: 100%;
-            max-width: 100%;
-            table-layout: fixed;
-            color: var(--minor);
-            margin-bottom: 15px;
-            font-size: 13px;
-            border-top: 1px solid var(--classC);
-            border-left: 1px solid var(--classC);
-            td,
-            th {
-                padding: 8px;
-                border-bottom: 1px solid var(--classC);
-                border-right: 1px solid var(--classC);
-            }
-            thead {
-                th {
-                    font-weight: 500;
-                    background: var(--classC);
-                }
-            }
-            tbody {
-                tr {
-                    transition: background 0.35s;
-                    &:hover {
-                        background: var(--classD);
-                    }
-                }
-            }
-        }
-        span.block {
-            display: block;
-        }
-        &-hide {
-            background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
-            padding: 10px 0;
-            text-align: center;
-            position: relative;
-            user-select: none;
-            i {
-                position: relative;
-                font-style: normal;
-                cursor: pointer;
-                color: var(--theme);
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: -2px;
-                    left: 0;
-                    right: 0;
-                    width: 100%;
-                    height: 1px;
-                    background: var(--theme);
-                    transform: scaleX(0.25);
-                    opacity: 0;
-                    transition: transform 0.35s, opacity 0.35s;
-                }
-                &:hover::after {
-                    opacity: 1;
-                    transform: scaleX(1);
-                }
-            }
-        }
-    }
-    &__agree {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 15px;
-        .agree {
-            text-align: center;
-            font-size: 12px;
-            color: var(--minor);
-            user-select: none;
-            .icon {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 42px;
-                height: 42px;
-                border-radius: 50%;
-                background: #f56c6c;
-                cursor: pointer;
-                margin-bottom: 8px;
-                &.active {
-                    animation: box_shadow 1s;
-                    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
-                }
-                svg {
-                    position: absolute;
-                    width: 28px;
-                    height: 28px;
-                    transform: scale(0);
-                    opacity: 0;
-                    transition: transform 0.85s, opacity 0.85s;
-                    &.active {
-                        transform: scale(1);
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-    &__copyright {
-        padding-top: 15px;
-        border-top: 1px solid var(--classB);
-        .content {
-            background: var(--classD);
-            padding: 15px;
-            border-radius: 4px;
-            .item {
-                display: flex;
-                align-items: center;
-                color: var(--minor);
-                white-space: nowrap;
-                margin-bottom: 10px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                .icon {
-                    width: 20px;
-                    height: 20px;
-                    min-width: 20px;
-                    min-height: 20px;
-                    margin-right: 5px;
-                }
-                .link {
-                    color: var(--minor);
-                    &:hover {
-                        color: var(--theme);
-                    }
-                }
-                .text {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
-    }
-    &__friends{
-        display: flex;
-        flex-wrap: wrap;
-        margin: 0 -7.5px;
-        &-item {
-            width: 25%;
-            padding: 7.5px;
-            .contain {
-                display: block;
-                border-radius: 4px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding: 15px;
-                color: #fff;
-                word-break: break-all;
-                .title {
-                    position: relative;
-                    &::after{
-                        content: "";
-                        position: absolute;
-                        bottom: -5px;
-                        left: 0;
-                        width: 100%;
-                        height: 1px;
-                        background: #fff;
-                    }
-                }
-                .content {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-top: 15px;
-                    .avatar {
-                        width: 40px;
-                        height: 40px;
-                        min-width: 40px;
-                        min-height: 40px;
-                        border-radius: 50%;
-                    }
-                }
-            }
-        }
-    }
+	background: var(--background);
+	border-radius: 8px;
+	padding: 15px;
+	box-shadow: var(--box-shadow);
+	margin-bottom: 15px;
+	&__category {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15px;
+		.item {
+			color: #fff;
+			font-size: 12px;
+			padding: 3px 8px;
+			margin-right: 5px;
+			border-radius: 2px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 120px;
+			transition: transform 0.35s, opacity 0.35s;
+			&:hover {
+				opacity: 0.85;
+				transform: translate3d(0, -3px, 0);
+			}
+			&:last-child {
+				margin-right: 0;
+			}
+			&-0 {
+				background: #0396ff;
+			}
+			&-1 {
+				background: #ea5455;
+			}
+			&-2 {
+				background: #7367f0;
+			}
+			&-3 {
+				background: #28c76f;
+			}
+			&-4 {
+				background: #9f44d3;
+			}
+		}
+	}
+	&__title {
+		font-size: 24px;
+		color: var(--main);
+		text-shadow: var(--text-shadow);
+		text-align: center;
+		margin-bottom: 15px;
+		word-break: break-all;
+	}
+	&__count {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 15px;
+		border-bottom: 1px solid var(--classB);
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: -1.5px;
+			left: 0;
+			width: 80px;
+			height: 3px;
+			border-radius: 1.5px;
+			background: var(--theme);
+		}
+		&-information {
+			display: flex;
+			align-items: center;
+			.avatar {
+				width: 35px;
+				height: 35px;
+				border-radius: 50%;
+				margin-right: 10px;
+				border: 1px solid var(--classA);
+				padding: 3px;
+			}
+			.meta {
+				display: flex;
+				flex-direction: column;
+				height: 35px;
+				justify-content: space-between;
+				.author {
+					.link {
+						font-weight: 500;
+						color: var(--theme);
+						&:hover {
+							text-decoration: underline;
+						}
+					}
+				}
+				.item {
+					display: flex;
+					align-items: center;
+					color: var(--minor);
+					font-size: 12px;
+					line-height: 16px;
+					.line {
+						color: var(--seat);
+						margin: 0 7px;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+		&-created {
+			font-size: 32px;
+			line-height: 42px;
+			color: var(--routine);
+			user-select: none;
+			text-shadow: var(--text-shadow);
+			font-family: consolas;
+		}
+	}
+	&__article {
+		padding-top: 15px;
+		font-size: 15px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: var(--main);
+			font-size: 18px;
+			line-height: 24px;
+			margin-bottom: 15px;
+			position: relative;
+		}
+		h1 {
+			padding: 0 15px 0 20px;
+			&::before {
+				content: '#';
+				color: var(--theme);
+				font-weight: 700;
+				position: absolute;
+				top: 0;
+				left: 0;
+				line-height: 24px;
+			}
+		}
+		h2 {
+			padding: 0 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 10%;
+				bottom: 10%;
+				left: 0;
+				width: 4px;
+				border-radius: 2px;
+				background: var(--theme);
+			}
+		}
+		h3 {
+			padding: 0 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 8.5px;
+				left: 0;
+				height: 7px;
+				width: 7px;
+				border-radius: 50%;
+				background: var(--theme);
+			}
+		}
+		h4 {
+			&::before {
+				content: '「';
+				color: var(--theme);
+				font-weight: 600;
+				margin-right: 5px;
+			}
+			&::after {
+				content: '」';
+				color: var(--theme);
+				font-weight: 600;
+				margin-left: 5px;
+			}
+		}
+		h5 {
+			padding: 0 15px 0 28px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 0;
+				width: 20px;
+				height: 20px;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
+				background-size: 100% 100%;
+			}
+		}
+		h6 {
+			padding: 0 15px 0 28px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 0;
+				width: 20px;
+				height: 20px;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
+				background-size: 100% 100%;
+			}
+		}
+		hr {
+			border: none;
+			height: 1px;
+			background-color: var(--classB);
+			margin-bottom: 15px;
+		}
+		p {
+			color: var(--routine);
+			line-height: 26px;
+			white-space: pre-wrap;
+			word-spacing: 5px;
+			letter-spacing: 1px;
+			word-break: break-all;
+			margin-bottom: 15px;
+		}
+		blockquote {
+			color: var(--routine);
+			line-height: 26px;
+			white-space: pre-wrap;
+			word-spacing: 5px;
+			letter-spacing: 1px;
+			word-break: break-all;
+			margin-bottom: 15px;
+			background: #ecf8ff;
+			border-left: 5px solid #50bfff;
+			padding: 10px 15px;
+			border-radius: 0 4px 4px 0;
+			font-size: 14px;
+			p {
+				margin: 0;
+			}
+		}
+		a {
+			display: inline-block;
+			line-height: 26px;
+			color: var(--theme);
+			position: relative;
+			&:hover::after {
+				opacity: 1;
+				transform: scaleX(1);
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				width: 100%;
+				height: 1px;
+				bottom: -1px;
+				left: 0;
+				background: var(--theme);
+				transform: scaleX(0.25);
+				opacity: 0;
+				transition: transform 0.35s, opacity 0.35s;
+			}
+		}
+		code {
+			display: inline-block;
+			min-height: 26px;
+			line-height: 26px;
+			border-radius: 4px;
+			font-size: 12px;
+			background: #fdf6ec;
+			padding: 0 8px;
+			color: #e6a23c;
+		}
+		pre code {
+			display: unset;
+			vertical-align: unset;
+			min-height: unset;
+			line-height: unset;
+			border-radius: unset;
+			font-size: unset;
+			background: unset;
+			padding: unset;
+			color: unset;
+		}
+		pre[class*='language-'] {
+			position: relative;
+			padding: 15px;
+			padding-top: 35px;
+			margin: 0 0 15px;
+			border-radius: 4px;
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 30px;
+				background: #2d2d2d;
+			}
+			&::before {
+				content: '';
+				position: absolute;
+				top: 9px;
+				left: 15px;
+				width: 12px;
+				height: 12px;
+				border-radius: 50%;
+				background: #fc625d;
+				box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+				z-index: 1;
+			}
+		}
+		img {
+			display: block;
+			max-width: 100%;
+			border-radius: 4px;
+			transition: transform 0.35s, box-shadow 0.35s;
+			cursor: zoom-in;
+			margin: 0 auto;
+			&:hover {
+				transform: translateY(-5px);
+				box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+			}
+		}
+		ol,
+		ul {
+			color: var(--routine);
+			margin-bottom: 15px;
+			padding: 0 30px;
+			li {
+				line-height: 26px;
+			}
+		}
+		ol li {
+			list-style: decimal;
+		}
+		ul li {
+			list-style: disc;
+			&::marker {
+				color: var(--routine);
+			}
+		}
+		table {
+			width: 100%;
+			max-width: 100%;
+			table-layout: fixed;
+			color: var(--minor);
+			margin-bottom: 15px;
+			font-size: 13px;
+			border-top: 1px solid var(--classC);
+			border-left: 1px solid var(--classC);
+			td,
+			th {
+				padding: 8px;
+				border-bottom: 1px solid var(--classC);
+				border-right: 1px solid var(--classC);
+			}
+			thead {
+				th {
+					font-weight: 500;
+					background: var(--classC);
+				}
+			}
+			tbody {
+				tr {
+					transition: background 0.35s;
+					&:hover {
+						background: var(--classD);
+					}
+				}
+			}
+		}
+		span.block {
+			display: block;
+		}
+		&-hide {
+			background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
+			padding: 10px 0;
+			text-align: center;
+			position: relative;
+			user-select: none;
+			i {
+				position: relative;
+				font-style: normal;
+				cursor: pointer;
+				color: var(--theme);
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: -2px;
+					left: 0;
+					right: 0;
+					width: 100%;
+					height: 1px;
+					background: var(--theme);
+					transform: scaleX(0.25);
+					opacity: 0;
+					transition: transform 0.35s, opacity 0.35s;
+				}
+				&:hover::after {
+					opacity: 1;
+					transform: scaleX(1);
+				}
+			}
+		}
+	}
+	&__agree {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 15px;
+		.agree {
+			text-align: center;
+			font-size: 12px;
+			color: var(--minor);
+			user-select: none;
+			.icon {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 42px;
+				height: 42px;
+				border-radius: 50%;
+				background: #f56c6c;
+				cursor: pointer;
+				margin-bottom: 8px;
+				&.active {
+					animation: box_shadow 1s;
+					box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+				}
+				svg {
+					position: absolute;
+					width: 28px;
+					height: 28px;
+					transform: scale(0);
+					opacity: 0;
+					transition: transform 0.85s, opacity 0.85s;
+					&.active {
+						transform: scale(1);
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+	&__copyright {
+		padding-top: 15px;
+		border-top: 1px solid var(--classB);
+		.content {
+			background: var(--classD);
+			padding: 15px;
+			border-radius: 4px;
+			.item {
+				display: flex;
+				align-items: center;
+				color: var(--minor);
+				white-space: nowrap;
+				margin-bottom: 10px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				.icon {
+					width: 20px;
+					height: 20px;
+					min-width: 20px;
+					min-height: 20px;
+					margin-right: 5px;
+				}
+				.link {
+					color: var(--minor);
+					&:hover {
+						color: var(--theme);
+					}
+				}
+				.text {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+	}
+	&__friends {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 -7.5px;
+		margin-bottom: 15px;
+		&-item {
+			width: 25%;
+			padding: 7.5px;
+			.contain {
+				display: block;
+				border-radius: 4px;
+				overflow: hidden;
+				padding: 15px;
+				color: #fff;
+				word-break: break-all;
+				transition: transform 0.35s, box-shadow 0.35s;
+				&:hover {
+					transform: translateY(-5px) scale(1.025);
+					box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+				}
+				.title {
+					position: relative;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: -5px;
+						left: 0;
+						width: 100%;
+						height: 1px;
+						background: #fff;
+					}
+				}
+				.content {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 15px;
+					.desc {
+						margin-right: 10px;
+					}
+					.avatar {
+						width: 40px;
+						height: 40px;
+						min-width: 40px;
+						min-height: 40px;
+						border-radius: 50%;
+						object-fit: cover;
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_footer {
-    border-top: 1px solid var(--classB);
-    color: var(--minor);
-    .joe_container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 65px;
-        a {
-            color: var(--minor);
-            transition: all 0.35s;
-            &:hover {
-                color: var(--theme);
-            }
-        }
-    }
+	border-top: 1px solid var(--classB);
+	color: var(--minor);
+	.joe_container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: 65px;
+		a {
+			color: var(--minor);
+			transition: all 0.35s;
+			&:hover {
+				color: var(--theme);
+			}
+		}
+	}
 }
 
 .joe_pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-top: 15px;
-    li {
-        margin-left: 5px;
-        &.active a {
-            background: var(--theme);
-            color: #fff;
-            font-weight: 500;
-        }
-        a {
-            display: flex;
-            align-items: center;
-            height: 32px;
-            color: var(--main);
-            padding: 0 15px;
-            background: var(--background);
-            border-radius: 2px;
-            transition: background 0.35s, color 0.35s;
-            user-select: none;
-            &:hover {
-                background: var(--theme);
-                color: #fff;
-                .icon {
-                    fill: #fff;
-                }
-            }
-            .icon {
-                width: 12px;
-                height: 12px;
-                fill: var(--routine);
-                transition: fill 0.35s;
-                &-next {
-                    transform: rotate(180deg);
-                }
-            }
-        }
-    }
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding-top: 15px;
+	li {
+		margin-left: 5px;
+		&.active a {
+			background: var(--theme);
+			color: #fff;
+			font-weight: 500;
+		}
+		a {
+			display: flex;
+			align-items: center;
+			height: 32px;
+			color: var(--main);
+			padding: 0 15px;
+			background: var(--background);
+			border-radius: 2px;
+			transition: background 0.35s, color 0.35s;
+			user-select: none;
+			&:hover {
+				background: var(--theme);
+				color: #fff;
+				.icon {
+					fill: #fff;
+				}
+			}
+			.icon {
+				width: 12px;
+				height: 12px;
+				fill: var(--routine);
+				transition: fill 0.35s;
+				&-next {
+					transform: rotate(180deg);
+				}
+			}
+		}
+	}
 }
 
 .joe_action {
-    position: fixed;
-    bottom: 90px;
-    right: 30px;
-    z-index: 333;
-    &_item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        background: var(--background);
-        border-radius: 50%;
-        cursor: pointer;
-        margin-top: 15px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
-        svg {
-            position: absolute;
-            width: 25px;
-            height: 25px;
-            fill: var(--theme);
-        }
-        &.scroll {
-            visibility: hidden;
-            transform: scale(0);
-            transition: visibility 0.35s, transform 0.35s;
-            &.active {
-                visibility: visible;
-                transform: scale(1);
-            }
-        }
-        &.mode {
-            svg {
-                transform: scale(0);
-                opacity: 0;
-                transition: transform 0.85s, opacity 0.85s;
-                &.active {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-            }
-        }
-    }
+	position: fixed;
+	bottom: 90px;
+	right: 30px;
+	z-index: 333;
+	&_item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		background: var(--background);
+		border-radius: 50%;
+		cursor: pointer;
+		margin-top: 15px;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+		svg {
+			position: absolute;
+			width: 25px;
+			height: 25px;
+			fill: var(--theme);
+		}
+		&.scroll {
+			visibility: hidden;
+			transform: scale(0);
+			transition: visibility 0.35s, transform 0.35s;
+			&.active {
+				visibility: visible;
+				transform: scale(1);
+			}
+		}
+		&.mode {
+			svg {
+				transform: scale(0);
+				opacity: 0;
+				transition: transform 0.85s, opacity 0.85s;
+				&.active {
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+	}
 }
 
 .profile-color-modes-illu-frame {
-    opacity: 0;
+	opacity: 0;
 }
 .profile-color-modes-illu-red {
-    stroke: #da3633;
+	stroke: #da3633;
 }
 .profile-color-modes-illu-orange {
-    stroke: #f0883e;
+	stroke: #f0883e;
 }
 .profile-color-modes-illu-purple {
-    stroke: #8957e5;
+	stroke: #8957e5;
 }
 .profile-color-modes-illu-green {
-    stroke: #3fb950;
+	stroke: #3fb950;
 }
 .profile-color-modes-illu-blue {
-    stroke: #388bfd;
+	stroke: #388bfd;
 }
 .profile-color-modes-illu-group {
-    animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
+	animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
 }
 .profile-color-modes-illu-frame {
-    animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
+	animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
 }
 .profile-color-modes-illu-frame:first-child {
-    opacity: 1;
-    animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
+	opacity: 1;
+	animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
 }
 .profile-color-modes-illu-frame:nth-child(8) {
-    animation: profile-color-modes-illu-anim-frame-show 0s forwards;
+	animation: profile-color-modes-illu-anim-frame-show 0s forwards;
 }
 .profile-color-modes-illu-red {
-    animation-delay: 0.4s;
-    animation-duration: 0.1s;
+	animation-delay: 0.4s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-orange {
-    animation-delay: 0.5s;
-    animation-duration: 0.1s;
+	animation-delay: 0.5s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-purple {
-    animation-delay: 0.6s;
-    animation-duration: 0.1s;
+	animation-delay: 0.6s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-blue {
-    animation-delay: 0.7s;
-    animation-duration: 0.1s;
+	animation-delay: 0.7s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-green {
-    animation-delay: 0.8s;
-    animation-duration: 0.2s;
-    animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
+	animation-delay: 0.8s;
+	animation-duration: 0.2s;
+	animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
 }
 .profile-color-modes-illu-frame:first-child {
-    animation-delay: 1.8s;
+	animation-delay: 1.8s;
 }
 .profile-color-modes-illu-frame:nth-child(2) {
-    animation-delay: 1.8s, 2.58s;
+	animation-delay: 1.8s, 2.58s;
 }
 .profile-color-modes-illu-frame:nth-child(3) {
-    animation-delay: 2.58s, 2.66s;
+	animation-delay: 2.58s, 2.66s;
 }
 .profile-color-modes-illu-frame:nth-child(4) {
-    animation-delay: 2.66s, 2.78s;
+	animation-delay: 2.66s, 2.78s;
 }
 .profile-color-modes-illu-frame:nth-child(5) {
-    animation-delay: 2.78s, 2.84s;
+	animation-delay: 2.78s, 2.84s;
 }
 .profile-color-modes-illu-frame:nth-child(6) {
-    animation-delay: 2.84s, 3.44s;
+	animation-delay: 2.84s, 3.44s;
 }
 .profile-color-modes-illu-frame:nth-child(7) {
-    animation-delay: 3.44s, 3.56s;
+	animation-delay: 3.44s, 3.56s;
 }
 .profile-color-modes-illu-frame:nth-child(8) {
-    animation-delay: 3.56s;
+	animation-delay: 3.56s;
 }
 .profile-color-modes-illu-frame:nth-child(9),
 .profile-color-modes-illu-frame:nth-child(10) {
-    animation: none;
+	animation: none;
 }
 @keyframes box_shadow {
-    0% {
-        box-shadow: 0 0 0 0 #f56c6c;
-    }
+	0% {
+		box-shadow: 0 0 0 0 #f56c6c;
+	}
 }
 @keyframes progress {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: 30px 0;
-    }
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 30px 0;
+	}
 }
 @keyframes list_thumbnail_loading {
-    0% {
-        transform: scale(0.85);
-    }
-    100% {
-        transform: scale(1);
-    }
+	0% {
+		transform: scale(0.85);
+	}
+	100% {
+		transform: scale(1);
+	}
 }
 @keyframes list_title_loading {
-    0% {
-        width: 80%;
-    }
-    100% {
-        width: 95%;
-    }
+	0% {
+		width: 80%;
+	}
+	100% {
+		width: 95%;
+	}
 }
 @keyframes list_abstract_loading {
-    0% {
-        width: 60%;
-    }
-    100% {
-        width: 80%;
-    }
+	0% {
+		width: 60%;
+	}
+	100% {
+		width: 80%;
+	}
 }
 @keyframes profile-color-modes-illu-anim {
-    0% {
-        stroke: #666;
-    }
+	0% {
+		stroke: #666;
+	}
 }
 @keyframes profile-color-modes-illu-anim-frame-show {
-    0% {
-        opacity: 0;
-        animation-timing-function: ease-out;
-    }
-    to {
-        opacity: 1;
-    }
+	0% {
+		opacity: 0;
+		animation-timing-function: ease-out;
+	}
+	to {
+		opacity: 1;
+	}
 }
 @keyframes profile-color-modes-illu-anim-frame-hide {
-    0% {
-        opacity: 1;
-        animation-timing-function: ease-in;
-    }
-    to {
-        opacity: 0;
-    }
+	0% {
+		opacity: 1;
+		animation-timing-function: ease-in;
+	}
+	to {
+		opacity: 0;
+	}
 }
diff --git a/assets/css/joe.normalize.css b/assets/css/joe.normalize.css
index bddf64d..c4f089c 100644
--- a/assets/css/joe.normalize.css
+++ b/assets/css/joe.normalize.css
@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #303133;--box-shadow: none}
+*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}
diff --git a/assets/css/joe.normalize.scss b/assets/css/joe.normalize.scss
index 50bf144..fc2ad84 100644
--- a/assets/css/joe.normalize.scss
+++ b/assets/css/joe.normalize.scss
@@ -1,59 +1,60 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	outline: none;
+	-webkit-tap-highlight-color: transparent;
 }
 
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+	width: 8px;
+	height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background: var(--seat);
+	border-radius: 4px;
+	background: var(--seat);
 }
 
 ::-webkit-scrollbar-track {
-    background: transparent;
+	background: transparent;
 }
 
 body {
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+	font-size: 14px;
+	/* 我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 */
+	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 }
 
 body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+	content: '';
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	z-index: -520;
 	pointer-events: none;
 }
 
 input[type='text'] {
-    -webkit-appearance: none;
-    border-radius: 0;
-    font-size: 13px;
-    font-weight: 500;
+	-webkit-appearance: none;
+	border-radius: 0;
+	font-size: 13px;
+	font-weight: 500;
 }
 
 textarea {
-    resize: none;
-    -webkit-appearance: none;
+	resize: none;
+	-webkit-appearance: none;
 }
 
 li {
-    list-style: none;
+	list-style: none;
 }
 
 a {
-    text-decoration: none;
+	text-decoration: none;
 }
 
 h1,
@@ -62,91 +63,71 @@ h3,
 h4,
 h5,
 h6 {
-    font-weight: 500;
+	font-weight: 500;
 }
 
 img {
-    border: 0;
-    vertical-align: middle;
+	border: 0;
+	vertical-align: middle;
 }
 
 img[src=''],
 img:not([src]) {
-    border: 0;
-    opacity: 0;
+	border: 0;
+	opacity: 0;
 }
 
 svg,
 canvas {
-    vertical-align: middle;
+	vertical-align: middle;
 }
 
 button {
-    cursor: pointer;
-    -webkit-appearance: none;
-    font-size: 13px;
+	cursor: pointer;
+	-webkit-appearance: none;
+	font-size: 13px;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
 .joe_main {
-    min-width: 0;
-    flex: 1;
-    padding: 15px 0;
+	min-width: 0;
+	flex: 1;
+	padding: 15px 0;
 }
 
 .joe_container {
-    display: flex;
-    width: 100%;
-    margin: 0 auto;
-    padding: 0 15px;
+	display: flex;
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 15px;
 }
 
 @media (min-width: 576px) {
-    .joe_container {
-        max-width: 540px;
-    }
+	.joe_container {
+		max-width: 540px;
+	}
 }
 @media (min-width: 768px) {
-    .joe_container {
-        max-width: 720px;
-    }
+	.joe_container {
+		max-width: 720px;
+	}
 }
 @media (min-width: 992px) {
-    .joe_container {
-        max-width: 960px;
-    }
+	.joe_container {
+		max-width: 960px;
+	}
 }
 @media (min-width: 1200px) {
-    .joe_container {
-        max-width: 1140px;
-    }
+	.joe_container {
+		max-width: 1140px;
+	}
 }
 @media (min-width: 1400px) {
-    .joe_container {
-        max-width: 1320px;
-    }
-}
-
-html {
-    --background: #fff;
-    --theme: #f24e4e;
-    --main: #303133;
-    --routine: #606266;
-    --minor: #909399;
-    --seat: #c0c4cc;
-    --classA: #dcdfe6;
-    --classB: #e4e7ed;
-    --classC: #ebeef5;
-    --classD: #f2f6fc;
-    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
-}
-
-html[data-night='night'] {
-    --background: #303133;
-    --box-shadow: none;
+	.joe_container {
+		max-width: 1320px;
+	}
 }
diff --git a/assets/js/joe.index.js b/assets/js/joe.index.js
index 60399fc..5a52091 100644
--- a/assets/js/joe.index.js
+++ b/assets/js/joe.index.js
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	/* 初始化首页列表功能 */
 	{
-		let queryData = { page: 1, pageSize: 10, type: 'created' }
+		let queryData = { page: 1, pageSize: 12, type: 'created' }
 		const initDom = () => {
 			$('.joe_index__list .joe_list').html('')
 			let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]')
@@ -82,7 +82,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		pushDom()
 		$('.joe_index__title-title .item').on('click', async function () {
 			if ($(this).attr('data-type') === queryData.type) return
-			queryData = { page: 1, pageSize: 10, type: $(this).attr('data-type') }
+			queryData = { page: 1, pageSize: 12, type: $(this).attr('data-type') }
 			initDom()
 			pushDom()
 		})
diff --git a/core/core.php b/core/core.php
index 06f6ce0..d4e0be5 100644
--- a/core/core.php
+++ b/core/core.php
@@ -11,7 +11,7 @@ function themeInit($self)
 {
     Helper::options()->commentsThreaded = true;
     /* 强制显示一页15篇文章 */
-    $self->parameter->pageSize = 15;
+    $self->parameter->pageSize = 12;
 
     /* 主题开放API 路由规则 */
     $path_info = $self->request->getPathinfo();
diff --git a/friends.php b/friends.php
index bc14080..f1e9cce 100644
--- a/friends.php
+++ b/friends.php
@@ -32,20 +32,44 @@
                     <?php
                     $friends = [];
                     $friends_color = [
-                        '#0396ff',
-                        '#ea5455',
-                        '#7367f0',
-                        '#28c76f',
-                        '#9f44d3',
+                        '#F8D800',
+                        '#0396FF',
+                        '#EA5455',
+                        '#7367F0',
+                        '#32CCBC',
+                        '#F6416C',
+                        '#28C76F',
+                        '#9F44D3',
+                        '#F55555',
+                        '#736EFE',
+                        '#E96D71',
+                        '#DE4313',
+                        '#D939CD',
+                        '#4C83FF',
+                        '#F072B6',
+                        '#C346C2',
+                        '#5961F9',
+                        '#FD6585',
+                        '#465EFB',
+                        '#FFC600',
+                        '#FA742B',
+                        '#5151E5',
+                        '#BB4E75',
+                        '#FF52E5',
+                        '#49C628',
+                        '#00EAFF',
+                        '#F067B4',
+                        '#F067B4',
+                        '#ff9a9e',
+                        '#00f2fe',
+                        '#4facfe',
+                        '#f093fb',
                         '#6fa3ef',
                         '#bc99c4',
                         '#46c47c',
                         '#f9bb3c',
                         '#e8583d',
                         '#f68e5f',
-                        '#67c23a',
-                        '#e6a23c',
-                        '#f56c6c'
                     ];
                     $friends_text = $this->options->JFriends;
                     if ($friends_text) {
@@ -68,7 +92,7 @@
                                     <a class="contain" href="http://ae.js.cn" target="_blank" rel="noopener noreferrer" style="background: <?php echo $friends_color[rand(0, count($friends_color) - 1)] ?>">
                                         <span class="title"><?php echo $item['name']; ?></span>
                                         <div class="content">
-                                            <p class="desc"><?php echo $item['desc']; ?></p>
+                                            <div class="desc"><?php echo $item['desc']; ?></div>
                                             <img class="avatar" src="<?php echo $item['avatar']; ?>" alt="<?php echo $item['name']; ?>" />
                                         </div>
                                     </a>
diff --git a/functions.php b/functions.php
index 52a3966..4ae6434 100644
--- a/functions.php
+++ b/functions.php
@@ -588,7 +588,7 @@ function themeConfig($form)
         'Joe的博客 || https://ae.js.cn || https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/link.png || Joe主题作者',
         '友情链接（非必填）',
         '介绍：用于填写友情链接 <br />
-         注意：您需要先增加友联链接页面，该项才会生效 <br />
+         注意：您需要先增加友联链接页面（新增独立页面-右侧模板选择友联），该项才会生效 <br />
          格式：博客名称 || 博客地址 || 博客头像 || 博客简介 <br />
          其他：一行一个，一行代表一个友联'
     );