diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index c6d42c5..07e1556 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-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;font-size:12px}.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);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:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.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}}
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--radius-wrap: 8px;--radius-inner: 4px;--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 var(--radius-inner) var(--radius-inner);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:var(--radius-inner);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:var(--radius-wrap);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:var(--radius-inner);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:var(--radius-inner);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:var(--radius-inner)}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:var(--radius-inner);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:var(--radius-inner);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:var(--radius-wrap);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;font-size:12px}.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);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 var(--radius-inner) var(--radius-inner) 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:var(--radius-inner);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:var(--radius-inner)}.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:var(--radius-inner);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:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.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:var(--radius-inner)}.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:var(--radius-inner);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}.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classB);margin-bottom:15px;padding-bottom:15px}.joe_comment__empty{display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--routine)}.joe_comment__empty-icon{fill:var(--routine)}.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}.joe_comment__close-icon{fill:var(--routine);margin-right:5px}.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none}.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}.joe_comment__respond-type .item.active{color:#fff;background:var(--theme)}.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}.joe_comment__respond-form .head .list{flex:1}.joe_comment__respond-form .head .list input{width:100%;border:none;background:transparent;padding:0 15px;height:40px;color:var(--routine);font-size:14px}.joe_comment__respond-form .head .list:nth-child(2){position:relative}.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(2)::before{left:0}.joe_comment__respond-form .head .list:nth-child(2)::after{right:0}.joe_comment__respond-form .body{padding:15px}.joe_comment__respond-form .body .text{width:100%;height:180px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:transparent;font-size:14px}.joe_comment__respond-form .body .draw{position:relative;width:100%}.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main)}.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;top:10px;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer}.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,0.35)}.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .icon-undo{top:10px}.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}.joe_comment__list{padding-top:15px}.joe_comment__list .comment-list__item .contain{display:flex;margin-bottom:15px}.joe_comment__list .comment-list__item .contain .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD)}.joe_comment__list .comment-list__item .contain .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}.joe_comment__list .comment-list__item .contain .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}.joe_comment__list .comment-list__item .contain .content .user .author{margin-right:10px}.joe_comment__list .comment-list__item .contain .content .user .owner{background:var(--theme);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}.joe_comment__list .comment-list__item .contain .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}.joe_comment__list .comment-list__item .contain .content .user .waiting{color:#e6a23c;font-style:normal}.joe_comment__list .comment-list__item .contain .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-all;line-height:24px}.joe_comment__list .comment-list__item .contain .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500}.joe_comment__list .comment-list__item .contain .content .substance .owo_image{height:22px}.joe_comment__list .comment-list__item .contain .content .substance .draw_image{max-width:100%}.joe_comment__list .comment-list__item .contain .content .handle{display:flex;align-items:center;color:var(--minor)}.joe_comment__list .comment-list__item .contain .content .handle .date{margin-right:10px}.joe_comment__list .comment-list__item .children{padding-left:63px}.joe_comment__list .comment-list__item .children .children{padding-left:0}.joe_comment .joe_pagination{padding-top:0}.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 f80386c..0612914 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,1850 +1,2121 @@
 /* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
 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);
+    --theme: #409eff;
+    --background: #fff;
+    --main: #303133;
+    --routine: #606266;
+    --minor: #909399;
+    --seat: #c0c4cc;
+    --classA: #dcdfe6;
+    --classB: #e4e7ed;
+    --classC: #ebeef5;
+    --classD: #f2f6fc;
+    --radius-wrap: 8px;
+    --radius-inner: 4px;
+    --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;
+    --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;
-	}
+    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 var(--radius-inner) var(--radius-inner);
+        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;
-				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;
-		}
-	}
+    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: var(--radius-inner);
+                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: var(--radius-wrap);
+        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: var(--radius-inner);
+                    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: var(--radius-inner);
+                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: var(--radius-inner);
+            }
+            .information {
+                flex: 1;
+                min-width: 0;
+                .title {
+                    height: 24px;
+                    border-radius: var(--radius-inner);
+                    background: var(--classD);
+                    animation: list_title_loading 0.75s infinite alternate;
+                    margin-bottom: 15px;
+                }
+                .abstract {
+                    p {
+                        height: 18px;
+                        border-radius: var(--radius-inner);
+                        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;
-				font-size: 12px;
-				.author {
-					.link {
-						font-weight: 500;
-						color: var(--theme);
-						&:hover {
-							text-decoration: underline;
-						}
-					}
-				}
-				.item {
-					display: flex;
-					align-items: center;
-					color: var(--minor);
-					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: 15px 0;
-			text-align: center;
-			position: relative;
-			user-select: none;
-			line-height: normal;
-			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;
-					}
-				}
-			}
-		}
-	}
+    background: var(--background);
+    border-radius: var(--radius-wrap);
+    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;
+                font-size: 12px;
+                .author {
+                    .link {
+                        font-weight: 500;
+                        color: var(--theme);
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+                }
+                .item {
+                    display: flex;
+                    align-items: center;
+                    color: var(--minor);
+                    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 var(--radius-inner) var(--radius-inner) 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: var(--radius-inner);
+            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: var(--radius-inner);
+            &::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: var(--radius-inner);
+            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: 15px 0;
+            text-align: center;
+            position: relative;
+            user-select: none;
+            line-height: normal;
+            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: var(--radius-inner);
+            .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: var(--radius-inner);
+                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;
+                }
+            }
+        }
+    }
+}
+
+.joe_comment {
+    background: var(--background);
+    border-radius: var(--radius-wrap);
+    box-shadow: var(--box-shadow);
+    padding: 15px;
+    &__title {
+        font-weight: 500;
+        text-align: center;
+        font-size: 24px;
+        color: var(--main);
+        text-shadow: var(--text-shadow);
+        border-bottom: 1px solid var(--classB);
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+    }
+    &__empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: var(--routine);
+        &-icon {
+            fill: var(--routine);
+        }
+    }
+    &__close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--routine);
+        &-icon {
+            fill: var(--routine);
+            margin-right: 5px;
+        }
+    }
+    &__respond {
+        &-type {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            .item {
+                background: var(--classD);
+                padding: 0 15px;
+                height: 32px;
+                color: var(--main);
+                border: none;
+                &:first-child {
+                    border-top-left-radius: var(--radius-inner);
+                }
+                &:last-child {
+                    border-top-right-radius: var(--radius-inner);
+                }
+                &.active {
+                    color: #fff;
+                    background: var(--theme);
+                }
+            }
+        }
+        &-form {
+            border-radius: 6px 0 6px 6px;
+            background: var(--classD);
+            .head {
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid var(--classA);
+                .list {
+                    flex: 1;
+                    input {
+                        width: 100%;
+                        border: none;
+                        background: transparent;
+                        padding: 0 15px;
+                        height: 40px;
+                        color: var(--routine);
+                        font-size: 14px;
+                    }
+                    &:nth-child(2) {
+                        position: relative;
+                        &::after,
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 1px;
+                            height: 15px;
+                            background: var(--classA);
+                        }
+                        &::before {
+                            left: 0;
+                        }
+                        &::after {
+                            right: 0;
+                        }
+                    }
+                }
+            }
+            .body {
+                padding: 15px;
+                .text {
+                    width: 100%;
+                    height: 180px;
+                    border: none;
+                    resize: none;
+                    vertical-align: middle;
+                    color: var(--routine);
+                    background: transparent;
+                    font-size: 14px;
+                }
+                .draw {
+                    position: relative;
+                    width: 100%;
+                    .line {
+                        display: flex;
+                        align-items: center;
+                        position: absolute;
+                        top: 10px;
+                        left: 10px;
+                        user-select: none;
+                        li {
+                            cursor: pointer;
+                            margin-right: 10px;
+                            color: var(--main);
+                            &.active {
+                                color: var(--theme);
+                            }
+                        }
+                    }
+                    .color {
+                        display: flex;
+                        align-items: center;
+                        position: absolute;
+                        top: 10px;
+                        left: 50%;
+                        transform: translate(-50%);
+                        li {
+                            width: 20px;
+                            height: 20px;
+                            border-radius: 50%;
+                            margin: 0 5px;
+                            cursor: pointer;
+                            &.active {
+                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
+                            }
+                            &:nth-child(1) {
+                                background: #303133;
+                            }
+                            &:nth-child(2) {
+                                background: #67c23a;
+                            }
+                            &:nth-child(3) {
+                                background: #e6a23c;
+                            }
+                            &:nth-child(4) {
+                                background: #f56c6c;
+                            }
+                        }
+                    }
+                    .icon {
+                        position: absolute;
+                        right: 10px;
+                        cursor: pointer;
+                        fill: var(--minor);
+                        user-select: none;
+                        &-undo {
+                            top: 10px;
+                        }
+                        &-animate {
+                            bottom: 10px;
+                        }
+                    }
+                    canvas {
+                        background: var(--background);
+                        border-radius: var(--radius-inner);
+                    }
+                }
+            }
+        }
+    }
+    &__list {
+        padding-top: 15px;
+        .comment-list__item {
+            .contain {
+                display: flex;
+                margin-bottom: 15px;
+                .avatar {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 50%;
+                    margin-right: 15px;
+                    padding: 3px;
+                    border: 1px solid var(--classD);
+                }
+                .content {
+                    min-width: 0;
+                    flex: 1;
+                    border-bottom: 1px solid var(--classC);
+                    padding-bottom: 15px;
+                    .user {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 8px;
+                        line-height: 20px;
+                        color: var(--main);
+                        .author {
+                            margin-right: 10px;
+                        }
+                        .owner {
+                            background: var(--theme);
+                            color: #fff;
+                            padding: 0 5px;
+                            border-radius: 2px;
+                            font-style: normal;
+                        }
+                        .agent {
+                            margin-left: auto;
+                            font-size: 12px;
+                            color: var(--minor);
+                        }
+                        .waiting {
+                            color: #e6a23c;
+                            font-style: normal;
+                        }
+                    }
+                    .substance {
+                        width: 100%;
+                        background: var(--classD);
+                        padding: 12px 15px;
+                        border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
+                        color: var(--main);
+                        margin-bottom: 8px;
+                        word-break: break-all;
+                        line-height: 24px;
+                        .parent {
+                            color: #388bff;
+                            margin-bottom: 5px;
+                            user-select: none;
+                            font-weight: 500;
+                        }
+                        .owo_image {
+                            height: 22px;
+                        }
+                        .draw_image {
+                            max-width: 100%;
+                        }
+                    }
+                    .handle {
+                        display: flex;
+                        align-items: center;
+                        color: var(--minor);
+                        .date {
+                            margin-right: 10px;
+                        }
+                    }
+                }
+            }
+            .children {
+                padding-left: 63px;
+                .children {
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+    .joe_pagination {
+        padding-top: 0;
+    }
 }
 
 .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/js/joe.global.js b/assets/js/joe.global.js
index af34523..f9a7b4a 100644
--- a/assets/js/joe.global.js
+++ b/assets/js/joe.global.js
@@ -210,6 +210,31 @@ document.addEventListener('DOMContentLoaded', () => {
         $(window).on('scroll', () => calcProgress());
     }
 
+    /* 评论框点击切换画图模式和文本模式 */
+    {
+        $('.joe_comment__respond-type .item').on('click', function () {
+            $(this).addClass('active').siblings().removeClass('active');
+            if ($(this).attr('data-type') === 'draw') {
+                $('.joe_comment__respond-form .body .draw').show().siblings().hide();
+                $('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width());
+            } else {
+                $('.joe_comment__respond-form .body .text').show().siblings().hide();
+            }
+        });
+    }
+
+    /* 激活画图功能 */
+    {
+        if ($('#joe_comment_draw').length !== 0) {
+            window.sketchpad = new Sketchpad({
+                element: '#joe_comment_draw',
+                height: 300,
+                penSize: 5,
+                color: '303133'
+            });
+        }
+    }
+
     /* 懒加载 */
     new LazyLoad('.lazyload');
 
diff --git a/assets/js/joe.post&page.js b/assets/js/joe.post&page.js
index 063909a..9448261 100644
--- a/assets/js/joe.post&page.js
+++ b/assets/js/joe.post&page.js
@@ -33,7 +33,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     /* 设置文章内的链接为新窗口打开 */
     {
-        $('.joe_detail__article a').each(() => $(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' }));
+        $('.joe_detail__article a').each(function () {
+            $(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' });
+        });
     }
 
     /* 当前页的CID */
diff --git a/assets/js/joe.sketchpad.js b/assets/js/joe.sketchpad.js
new file mode 100644
index 0000000..2d32e18
--- /dev/null
+++ b/assets/js/joe.sketchpad.js
@@ -0,0 +1 @@
+function Sketchpad(t){for(var e in this.constructor.prototype)this[e]=this[e].bind(this);t.hasOwnProperty("element")?("string"==typeof t.element?this.element=$(t.element):this.element=t.element,this._width=t.width||this.element.attr("data-width")||0,this._height=t.height||this.element.attr("data-height")||0,this.color=t.color||this.element.attr("data-color")||"#000000",this.penSize=t.penSize||this.element.attr("data-penSize")||5,this.readOnly=t.readOnly||this.element.attr("data-readOnly")||!1,this.readOnly||this.element.css({cursor:"crosshair"}),this.strokes=t.strokes||[],this._currentStroke={color:null,size:null,lines:[]},this.undoHistory=t.undoHistory||[],this.animateIds=[],this._sketching=!1,this.reset()):console.error("SKETCHPAD ERROR: No element selected")}Sketchpad.prototype._cursorPosition=function(t){return{x:t.pageX-$(this.canvas).offset().left,y:t.pageY-$(this.canvas).offset().top}},Sketchpad.prototype._draw=function(t,e,s,i){this._stroke(t,e,s,i,"source-over")},Sketchpad.prototype._erase=function(t,e,s,i){this._stroke(t,e,s,i,"destination-out")},Sketchpad.prototype._stroke=function(t,e,s,i,o){this.context.save(),this.context.lineJoin="round",this.context.lineCap="round",this.context.strokeStyle=s,this.context.lineWidth=i,this.context.globalCompositeOperation=o,this.context.beginPath(),this.context.moveTo(t.x,t.y),this.context.lineTo(e.x,e.y),this.context.closePath(),this.context.stroke(),this.context.restore()},Sketchpad.prototype._mouseDown=function(t){this._lastPosition=this._cursorPosition(t),this._currentStroke.color=this.color,this._currentStroke.size=this.penSize,this._currentStroke.lines=[],this._sketching=!0,this.canvas.addEventListener("mousemove",this._mouseMove)},Sketchpad.prototype._mouseUp=function(t){this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("mousemove",this._mouseMove)},Sketchpad.prototype._mouseMove=function(t){var e=this._cursorPosition(t);this._draw(this._lastPosition,e,this.color,this.penSize),this._currentStroke.lines.push({start:$.extend(!0,{},this._lastPosition),end:$.extend(!0,{},e)}),this._lastPosition=e},Sketchpad.prototype._touchStart=function(t){t.preventDefault(),this._sketching||(this._lastPosition=this._cursorPosition(t.changedTouches[0]),this._currentStroke.color=this.color,this._currentStroke.size=this.penSize,this._currentStroke.lines=[],this._sketching=!0,this.canvas.addEventListener("touchmove",this._touchMove,!1))},Sketchpad.prototype._touchEnd=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchCancel=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchLeave=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchMove=function(t){t.preventDefault();var e=this._cursorPosition(t.changedTouches[0]);this._draw(this._lastPosition,e,this.color,this.penSize),this._currentStroke.lines.push({start:$.extend(!0,{},this._lastPosition),end:$.extend(!0,{},e)}),this._lastPosition=e},Sketchpad.prototype.reset=function(){this.canvas=this.element[0],this.canvas.width=this._width,this.canvas.height=this._height,this.context=this.canvas.getContext("2d"),this.redraw(this.strokes),this.readOnly||(this.canvas.addEventListener("mousedown",this._mouseDown),this.canvas.addEventListener("mouseout",this._mouseUp),this.canvas.addEventListener("mouseup",this._mouseUp),this.canvas.addEventListener("touchstart",this._touchStart),this.canvas.addEventListener("touchend",this._touchEnd),this.canvas.addEventListener("touchcancel",this._touchCancel),this.canvas.addEventListener("touchleave",this._touchLeave))},Sketchpad.prototype.drawStroke=function(t){for(var e=0;e<t.lines.length;e++){var s=t.lines[e];this._draw(s.start,s.end,t.color,t.size)}},Sketchpad.prototype.redraw=function(t){for(var e=0;e<t.length;e++)this.drawStroke(t[e])},Sketchpad.prototype.toObject=function(){return{width:this.canvas.width,height:this.canvas.height,strokes:this.strokes,undoHistory:this.undoHistory}},Sketchpad.prototype.toJSON=function(){return JSON.stringify(this.toObject())},Sketchpad.prototype.animate=function(t,e,s){this.clear();for(var i=t,o=null,h=0;h<this.strokes.length;h++)for(var n=this.strokes[h],r=0;r<n.lines.length;r++){var a=n.lines[r];o=this._draw.bind(this,a.start,a.end,n.color,n.size),this.animateIds.push(setTimeout(o,i)),i+=t}e&&(s=s||0,o=this.animate.bind(this,t,e,s),this.animateIds.push(setTimeout(o,i+s)))},Sketchpad.prototype.cancelAnimation=function(){for(var t=0;t<this.animateIds.length;t++)clearTimeout(this.animateIds[t])},Sketchpad.prototype.clear=function(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height)},Sketchpad.prototype.undo=function(){this.clear();var t=this.strokes.pop();t&&(this.undoHistory.push(t),this.redraw(this.strokes))},Sketchpad.prototype.redo=function(){var t=this.undoHistory.pop();t&&(this.strokes.push(t),this.drawStroke(t))};
\ No newline at end of file
diff --git a/core/core.php b/core/core.php
index 80eea5a..deae7fc 100644
--- a/core/core.php
+++ b/core/core.php
@@ -193,6 +193,78 @@ function _parseAsideLink($link)
     echo str_replace("#", "?scroll=", $link);
 }
 
+function _getAgentOS($agent)
+{
+    $os = "Linux";
+    if (preg_match('/win/i', $agent)) {
+        if (preg_match('/nt 6.0/i', $agent)) {
+            $os = 'Windows Vista';
+        } else if (preg_match('/nt 6.1/i', $agent)) {
+            $os = 'Windows 7';
+        } else if (preg_match('/nt 6.2/i', $agent)) {
+            $os = 'Windows 8';
+        } else if (preg_match('/nt 6.3/i', $agent)) {
+            $os = 'Windows 8.1';
+        } else if (preg_match('/nt 5.1/i', $agent)) {
+            $os = 'Windows XP';
+        } else if (preg_match('/nt 10.0/i', $agent)) {
+            $os = 'Windows 10';
+        } else {
+            $os = 'Windows X64';
+        }
+    } else if (preg_match('/android/i', $agent)) {
+        if (preg_match('/android 9/i', $agent)) {
+            $os = 'Android Pie';
+        } else if (preg_match('/android 8/i', $agent)) {
+            $os = 'Android Oreo';
+        } else {
+            $os = 'Android';
+        }
+    } else if (preg_match('/ubuntu/i', $agent)) {
+        $os = 'Ubuntu';
+    } else if (preg_match('/linux/i', $agent)) {
+        $os = 'Linux';
+    } else if (preg_match('/iPhone/i', $agent)) {
+        $os = 'iPhone';
+    } else if (preg_match('/mac/i', $agent)) {
+        $os = 'MacOS';
+    } else if (preg_match('/fusion/i', $agent)) {
+        $os = 'Android';
+    } else {
+        $os = 'Linux';
+    }
+    echo $os;
+}
+
+function _getAgentBrowser($agent)
+{
+    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
+        $outputer = 'Internet Explore';
+    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'FireFox';
+    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'MicroSoft Edge';
+    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
+        $outputer = '360 Fast Browser';
+    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'MicroSoft Edge';
+    } else if (preg_match('/UC/i', $agent)) {
+        $outputer = 'UC Browser';
+    } else if (preg_match('/QQ/i', $agent, $regs) || preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'QQ Browser';
+    } else if (preg_match('/UBrowser/i', $agent, $regs)) {
+        $outputer = 'UC Browser';
+    } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'Opera';
+    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'Google Chrome';
+    } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
+        $outputer = 'Safari';
+    } else {
+        $outputer = 'Google Chrome';
+    }
+    echo $outputer;
+}
 
 function _parseAsideReply($text, $type = true)
 {
@@ -219,6 +291,22 @@ function _parseReply($text)
     return $text;
 }
 
+function _getParentReply($parent)
+{
+    if ($parent !== "0") {
+        $db = Typecho_Db::get();
+        $commentInfo = $db->fetchRow($db->select('author')->from('table.comments')->where('coid = ?', $parent));
+        echo '<div class="parent"><span style="vertical-align: 1px;">@</span> ' . $commentInfo['author'] . '</div>';
+    }
+}
+
+function _parseCommentReply($text)
+{
+    $text = _parseReply($text);
+    $text = preg_replace('/\{!{(.*?)\}!}/', '<img src="$1" class="draw_image"/>', $text);
+    echo $text;
+}
+
 
 function _getLazyload($type = true)
 {
diff --git a/friends.php b/friends.php
index dd22bbc..980675a 100644
--- a/friends.php
+++ b/friends.php
@@ -104,6 +104,7 @@
                     <?php $this->need('public/handle.php'); ?>
                     <?php $this->need('public/copyright.php'); ?>
                 </div>
+                <?php $this->need('public/comment.php'); ?>
             </div>
             <?php $this->need('public/aside.php'); ?>
         </div>
diff --git a/library/player.php b/library/player.php
new file mode 100644
index 0000000..37b94fa
--- /dev/null
+++ b/library/player.php
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="renderer" content="webkit" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
+    <title>M3U8 - Player</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            -webkit-tap-highlight-color: transparent;
+            outline: none;
+            text-decoration: none;
+        }
+
+        html,
+        body,
+        #dplayer {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="dplayer"></div>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.16/dist/hls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
+    <script>
+        new DPlayer({
+            container: document.getElementById('dplayer'), // 播放器容器元素
+            autoplay: false, // 视频自动播放
+            theme: '#409eff', // 主题色
+            loop: false, // 视频循环播放
+            screenshot: false, // 开启截图，如果开启，视频和视频封面需要允许跨域
+            airplay: true, // 在 Safari 中开启 AirPlay
+            volume: 0.5, // 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
+            playbackSpeed: [2, 1.5, 1.25, 1], // 可选的播放速率，可以设置成自定义的数组
+            video: {
+                url: '<?php echo $_GET['url'] ?>',
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/live.php b/live.php
new file mode 100644
index 0000000..0e83a4d
--- /dev/null
+++ b/live.php
@@ -0,0 +1,37 @@
+<?php
+
+/**
+ * 直播
+ * 
+ * @package custom 
+ * 
+ **/
+
+?>
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <?php $this->need('public/include.php'); ?>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
+    <script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
+</head>
+
+<body>
+    <div id="Joe">
+        <?php $this->need('public/header.php'); ?>
+        <div class="joe_container">
+            <div class="joe_main">
+                
+            </div>
+            <?php $this->need('public/aside.php'); ?>
+        </div>
+        <?php $this->need('public/footer.php'); ?>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/page.php b/page.php
index 99bd2a0..878d562 100644
--- a/page.php
+++ b/page.php
@@ -14,7 +14,6 @@
 <body>
     <div id="Joe">
         <?php $this->need('public/header.php'); ?>
-
         <div class="joe_container">
             <div class="joe_main">
                 <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
@@ -22,10 +21,10 @@
                     <?php $this->need('public/handle.php'); ?>
                     <?php $this->need('public/copyright.php'); ?>
                 </div>
+                <?php $this->need('public/comment.php'); ?>
             </div>
             <?php $this->need('public/aside.php'); ?>
         </div>
-
         <?php $this->need('public/footer.php'); ?>
     </div>
 </body>
diff --git a/post.php b/post.php
index 97c6351..a01187e 100644
--- a/post.php
+++ b/post.php
@@ -47,6 +47,7 @@
                     <?php $this->need('public/handle.php'); ?>
                     <?php $this->need('public/copyright.php'); ?>
                 </div>
+                <?php $this->need('public/comment.php'); ?>
             </div>
             <?php $this->need('public/aside.php'); ?>
         </div>
diff --git a/public/comment.php b/public/comment.php
new file mode 100644
index 0000000..406e032
--- /dev/null
+++ b/public/comment.php
@@ -0,0 +1,119 @@
+<?php $this->comments()->to($comments); ?>
+<div class="joe_comment">
+    <h3 class="joe_comment__title">评论 <?php if ($this->allow('comment')) : ?>(<?php $this->commentsNum(); ?>)<?php endif; ?></h3>
+
+    <?php if ($this->allow('comment')) : ?>
+        <div class="joe_comment__respond">
+            <div class="joe_comment__respond-type">
+                <button class="item" data-type="draw">画图模式</button>
+                <button class="item active" data-type="text">文本模式</button>
+            </div>
+            <div class="joe_comment__respond-form" data-action="<?php $this->commentUrl() ?>">
+                <div class="head">
+                    <div class="list">
+                        <input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
+                    </div>
+                    <div class="list">
+                        <input type="text" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" autocomplete="off" name="mail" placeholder="请输入邮箱..." />
+                    </div>
+                    <div class="list">
+                        <input type="text" value="<?php $this->remember('url'); ?>" autocomplete="off" name="url" placeholder="（选填）请输入网址..." />
+                    </div>
+                </div>
+                <div class="body">
+                    <textarea class="text" name="text" autocomplete="off" rows="5" placeholder="说点什么吧，点击右上角可切换成画图模式哦~"></textarea>
+                    <div class="draw" style="display: none;">
+                        <ul class="line">
+                            <li data-line="3">细</li>
+                            <li data-line="5" class="active">中</li>
+                            <li data-line="8">粗</li>
+                        </ul>
+                        <ul class="color">
+                            <li data-color="#303133" class="active"></li>
+                            <li data-color="#67c23a"></li>
+                            <li data-color="#e6a23c"></li>
+                            <li data-color="#f56c6c"></li>
+                        </ul>
+                        <svg title="撤销" class="icon icon-undo" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <path d="M754.133333 337.333333c-16.4-2.266667-32.933333-3.6-49.6-3.6h-7.066666V161.866667c0-40.4-14.666667-65.733333-36.666667-70.133334-1.466667-0.4-3.066667 0-4.666667-0.133333-2.8-0.266667-5.466667-0.666667-8.533333-0.133333-10.133333 1.466667-21.2 6.533333-33.066667 16L192 447.466667c-3.066667 2.4-4.8 5.466667-7.466667 8-3.2 3.2-6.4 6.4-9.066666 9.866666-2.4 3.333333-4.533333 6.533333-6.533334 9.866667-2.666667 4.666667-4.666667 9.466667-6.4 14.4-0.8 2.266667-1.866667 4.4-2.4 6.666667-0.8 3.333333-0.933333 6.666667-1.333333 9.866666-0.133333 1.333333-0.4 2.533333-0.4 3.866667-0.266667 3.066667-0.133333 6 0 9.066667 0.133333 1.733333 0.4 3.333333 0.666667 4.933333 0.4 2.8 0.4 5.733333 1.066666 8.533333 0.8 3.866667 2.666667 7.333333 4.133334 11.066667 1.066667 2.8 2.266667 5.733333 3.733333 8.533333 2.533333 4.8 5.466667 9.466667 9.2 14l0.133333 0.133334c4.4 5.466667 8.666667 11.066667 14.666667 15.866666L611.466667 918.666667c45.466667 36.4 85.466667-0.533333 85.466666-54.666667V680.4h63.6c22 0 43.466667 1.333333 64.133334 3.6 9.466667 1.066667 18.533333 3.2 27.866666 4.666667 11.066667 1.866667 22.4 3.333333 33.2 5.866666 8.666667 2 16.8 4.933333 25.2 7.466667 11.066667 3.333333 22.133333 6.266667 32.8 10.4 7.2 2.666667 14 6.266667 21.066667 9.333333 11.333333 5.066667 22.8 10 33.6 16 5.466667 3.066667 10.533333 6.8 15.866667 10 11.866667 7.333333 23.6 14.666667 34.533333 23.066667 3.6 2.8 6.933333 6.133333 10.533333 9.066667 12.133333 10 24.133333 20.266667 35.333334 31.733333 1.2 1.2 2.266667 2.666667 3.466666 4 26.666667 28.133333 50.666667 60.4 71.333334 97.2 8.533333 14 17.2 19.333333 23.733333 18.4 6.666667-0.533333 11.333333-7.333333 11.333333-18.4-3.333333-255.733333-206.4-540.933333-450.4-575.466667z m6.4 276.266667h-130.4V862.666667c-6-2.4-12.266667-5.733333-18.533333-10.8L232.8 548c-10-21.333333-10.133333-44.933333-0.4-66.266667l382.133333-307.466666c5.2-4.266667 10.4-7.466667 15.466667-10v236.8l66.933333-0.533334h7.6c99.866667 0 194.4 43.866667 274.133334 112.533334 62.8 73.733333 123.2 161.466667 149.066666 254.133333-85.733333-102-217.866667-153.6-367.2-153.6z m0 0" fill="" p-id="1775"></path>
+                        </svg>
+                        <svg title="动画" class="icon icon-animate" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <path d="M954.9 228.4H619.1c-4.5 0-8.1 3.6-8.1 8s53.8 56 58.2 56H955c4.4 0 8.1-3.6 8.1-8v-48c-0.1-4.4-3.7-8-8.2-8z m5.3 352H837.9c-1.5 0-2.8 3.6-2.8 8v48c0 4.4 1.3 8 2.8 8h122.4c1.5 0 2.8-3.6 2.8-8v-48c-0.1-4.4-1.3-8-2.9-8z m-1.6 128H807.4c-2.4 0-4.4 3.6-4.4 8v48c0 4.4 2 8 4.4 8h151.2c2.4 0 4.4-3.6 4.4-8v-48c0-4.4-2-8-4.4-8z" p-id="4541"></path>
+                            <path d="M457.4 798.5l-171.7 90.3c-31.3 16.4-70 4.4-86.4-26.9-6.5-12.5-8.8-26.7-6.4-40.6l32.8-191.2-139-135.4c-25.3-24.7-25.8-65.2-1.2-90.5 9.8-10.1 22.7-16.6 36.6-18.7l192-27.9 85.9-174c15.6-31.7 54-44.7 85.7-29.1 12.6 6.2 22.8 16.4 29.1 29.1l85.9 174 192 27.9c35 5.1 59.2 37.6 54.1 72.5-2 13.9-8.6 26.8-18.7 36.6L689.2 630.1 722 821.4c6 34.8-17.4 67.9-52.3 73.9-13.9 2.4-28.1 0.1-40.6-6.4l-171.7-90.4zM656 837.8c1.2 0.7 2.7 0.9 4.1 0.6 3.5-0.6 5.8-3.9 5.2-7.4l-37.9-221L788 453.4c1-1 1.7-2.3 1.9-3.7 0.5-3.5-1.9-6.7-5.4-7.3l-222-32.3-99.3-201.2c-0.6-1.3-1.6-2.3-2.9-2.9-3.2-1.6-7-0.3-8.6 2.9l-99.3 201.2-222 32.3c-1.4 0.2-2.7 0.9-3.7 1.9-2.5 2.5-2.4 6.6 0.1 9.1L287.5 610l-37.9 221.1c-0.2 1.4 0 2.8 0.6 4.1 1.6 3.1 5.5 4.3 8.6 2.7l198.6-104.4L656 837.8z" p-id="4542"></path>
+                        </svg>
+                        <canvas id="joe_comment_draw" height="300"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <?php if ($comments->have()) : ?>
+            <div class="joe_comment__list">
+                <?php $comments->listComments(); ?>
+            </div>
+            <?php $comments->pageNav(
+                '<svg class="icon icon-prev" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
+                '<svg class="icon icon-next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
+                1,
+                '...',
+                array(
+                    'wrapTag' => 'ul',
+                    'wrapClass' => 'joe_pagination',
+                    'itemTag' => 'li',
+                    'textTag' => 'a',
+                    'currentClass' => 'active',
+                    'prevClass' => 'prev',
+                    'nextClass' => 'next'
+                )
+            );
+            ?>
+        <?php else : ?>
+            <div class="joe_comment__empty">
+                <svg class="joe_comment__empty-icon" viewBox="0 0 2148 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="120" height="120">
+                    <path d="M1635.928611 983.061118H449.948176a20.469441 20.469441 0 0 0 0 40.938882h1185.980435a20.469441 20.469441 0 1 0 0-40.938882z m327.212826-634.417113h-40.803323v-40.91177a20.442329 20.442329 0 1 0-40.884658 0v40.91177h-40.911771a20.469441 20.469441 0 0 0 0 40.938883h40.911771v40.938882a20.442329 20.442329 0 1 0 40.884658 0v-40.938882h40.91177a20.469441 20.469441 0 0 0 0-40.938883z m-1431.50528-266.021397h20.44233v20.442329a20.469441 20.469441 0 1 0 40.91177 0V82.622608h20.442329a20.469441 20.469441 0 0 0 0-40.938882h-20.442329V21.214285a20.469441 20.469441 0 1 0-40.91177 0v20.469441h-20.44233a20.469441 20.469441 0 0 0 0 40.938882zM81.850692 635.161956a81.877764 81.877764 0 1 0 81.904876 81.850652A81.82354 81.82354 0 0 0 81.850692 635.161956z m0 122.789534a40.938882 40.938882 0 1 1 40.884658-40.938882 40.938882 40.938882 0 0 1-40.884658 40.938882z m2024.54972-61.381211A40.938882 40.938882 0 1 0 2147.312182 737.482049a40.91177 40.91177 0 0 0-40.91177-40.91177z m-1307.577048 62.004784h47.174606v37.631237a13.908375 13.908375 0 0 0 27.81675 0v-37.631237h335.671721v37.631237a13.908375 13.908375 0 1 0 27.816751 0v-37.631237h47.174605a69.352093 69.352093 0 0 0 69.243646-69.243646v-217.05741a69.270757 69.270757 0 0 0-52.190297-67.10181v-77.377198c0-24.210875-12.932349-46.767928-36.519651-63.387488-22.123263-15.670645-51.160047-24.210875-81.769317-24.210875H900.058984c-30.60927 0-59.646053 8.621566-81.769317 24.210875-23.505967 16.619559-36.519652 39.095277-36.519652 63.387488v77.350086a69.270757 69.270757 0 0 0-52.190296 67.128922v217.084522a69.297869 69.297869 0 0 0 69.243645 69.216534z m10.844737-430.780064c0-32.534211 41.399783-59.646053 90.445107-59.646054h283.047634c49.072435 0 90.472218 27.355849 90.472219 59.646054v76.048718a69.297869 69.297869 0 0 0-58.371797 68.43029v65.77333a94.62033 94.62033 0 0 0-67.156034-27.816751h-212.909298a94.674554 94.674554 0 0 0-67.156034 27.870974v-65.827553a69.324981 69.324981 0 0 0-58.42602-68.403179z m405.593163 277.327036v6.588177a6.994855 6.994855 0 0 1-6.967744 6.967744H875.007642a6.994855 6.994855 0 0 1-6.967744-6.967744v-6.588177a67.237369 67.237369 0 0 1 67.156034-67.156034h212.909298a67.237369 67.237369 0 0 1 67.156034 67.156034z m-457.756348-132.848028a41.399783 41.399783 0 0 1 82.799567 0v161.776364a13.962599 13.962599 0 0 0 13.908375 13.908375h375.038116a13.962599 13.962599 0 0 0 13.908376-13.908375v-161.776364a41.399783 41.399783 0 0 1 82.799566 0v217.084522a41.454007 41.454007 0 0 1-41.399783 41.399783H798.823364a41.454007 41.454007 0 0 1-41.318448-41.426895z" p-id="21273"></path>
+                </svg>
+                <span>暂无评论，期待你来坐沙发</span>
+            </div>
+        <?php endif; ?>
+    <?php else : ?>
+        <div class="joe_comment__close">
+            <svg class="joe_comment__close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18417" width="18" height="18">
+                <path d="M512.3072 0.9728C794.624 0.9728 1023.488 202.24 1023.488 450.56a402.8416 402.8416 0 0 1-39.2704 173.2608 232.448 232.448 0 0 0-52.6336-45.9776c16.384-39.7824 25.2928-82.688 25.2928-127.2832 0-211.0976-199.1168-382.1568-444.6208-382.1568-245.5552 0-444.5696 171.0592-444.5696 382.1568 0 133.4272 79.5136 250.88 200.0384 319.1808v107.9808l102.0416-65.1264a510.1568 510.1568 0 0 0 142.4896 20.1216l19.4048-0.3584c19.4048-0.7168 38.7584-2.5088 57.9584-5.4272l3.584 13.4144c5.376 17.7152 12.8512 34.7136 22.3232 50.688l-20.6336 3.328a581.4784 581.4784 0 0 1-227.1232-12.288l-131.1232 100.352c-19.6608 15.0016-35.6352 7.168-35.6352-17.664v-157.3888C79.4112 725.1968 1.024 595.968 1.024 450.56 1.024 202.24 229.9392 0.9728 512.3072 0.9728z m318.464 617.0112c97.4848 0 176.7936 80.4352 176.7936 179.2s-79.3088 179.0464-176.7936 179.0464c-97.4336 0-176.7424-80.2816-176.7424-179.0464 0-98.816 79.3088-179.1488 176.7424-179.1488z m-103.0144 101.0176a131.1744 131.1744 0 0 0-25.7536 78.1824c0 71.8848 57.8048 130.4064 128.768 130.4064 28.8768 0 55.552-9.6256 77.056-26.0096z m103.0144-52.3264c-19.712 0-39.1168 4.5568-56.6784 13.312l172.2368 174.592c8.4992-17.3056 13.1584-36.864 13.1584-57.3952 0-71.9872-57.8048-130.5088-128.7168-130.5088z m-318.464-283.5456l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 445.6448 450.56a67.072 67.072 0 0 1 66.6624-67.4304z m266.752 0l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584a67.072 67.072 0 0 1-59.8528-67.072h-0.0512l0.3072-6.8608a67.072 67.072 0 0 1 66.4064-60.5696z m-533.504 0l6.8608 0.3584A67.072 67.072 0 0 1 312.2688 450.56l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 178.8928 450.56a67.072 67.072 0 0 1 66.6624-67.4304z" p-id="18418"></path>
+            </svg>
+            <span>博主关闭了当前页面的评论</span>
+        </div>
+    <?php endif; ?>
+</div>
+
+<?php
+function threadedComments($comments, $options)
+{ ?>
+    <li class="comment-list__item" id="li-<?php $comments->theId(); ?>">
+        <div class="contain" id="<?php $comments->theId(); ?>">
+            <img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" />
+            <div class="content">
+                <div class="user">
+                    <span class="author"><?php $comments->author(); ?></span>
+                    <?php if ($comments->authorId === $comments->ownerId) : ?>
+                        <i class="owner">作者</i>
+                    <?php endif; ?>
+                    <?php if ($comments->status === "waiting") : ?>
+                        <em class="waiting">（评论审核中...）</em>
+                    <?php endif; ?>
+                    <div class="agent"><?php _getAgentOS($comments->agent); ?> · <?php _getAgentBrowser($comments->agent); ?></div>
+                </div>
+                <div class="substance">
+                    <?php _getParentReply($comments->parent) ?>
+                    <?php echo _parseCommentReply($comments->content); ?>
+                </div>
+                <div class="handle">
+                    <time class="date" datetime="<?php $comments->date('Y-m-d'); ?>"><?php $comments->date('Y-m-d'); ?></time>
+                </div>
+            </div>
+        </div>
+        <?php if ($comments->children) : ?>
+            <div class="children">
+                <?php $comments->threadedComments($options); ?>
+            </div>
+        <?php endif; ?>
+    </li>
+<?php } ?>
\ No newline at end of file