From da28b49a77a438dc4bc2e8afd7e9af2e9ce50aab Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Fri, 21 Oct 2022 23:03:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/assets/js/utils.js         |  120 +-
 templates/assets/zhheo/zhheoblog.css | 8987 +++++++++++++-------------
 templates/modules/head.html          |    1 +
 templates/modules/post-list.html     |   22 +-
 4 files changed, 4601 insertions(+), 4529 deletions(-)

diff --git a/templates/assets/js/utils.js b/templates/assets/js/utils.js
index f86281ba..a2ee41cb 100644
--- a/templates/assets/js/utils.js
+++ b/templates/assets/js/utils.js
@@ -1 +1,119 @@
-"use strict";function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var btf={debounce:function(r,o,i){var a;return function(){var e=this,t=arguments,n=i&&!a;clearTimeout(a),a=setTimeout(function(){a=null,i||r.apply(e,t)},o),n&&r.apply(e,t)}},throttle:function(n,r,o){var i,a,s,u=0;o=o||{};function l(){u=!1===o.leading?0:(new Date).getTime(),i=null,n.apply(a,s),i||(a=s=null)}return function(){var e=(new Date).getTime();u||!1!==o.leading||(u=e);var t=r-(e-u);a=this,s=arguments,t<=0||r<t?(i&&(clearTimeout(i),i=null),u=e,n.apply(a,s),i||(a=s=null)):i||!1===o.trailing||(i=setTimeout(l,t))}},sidebarPaddingR:function(){var e=window.innerWidth,t=document.body.clientWidth,n=e-t;e!==t&&(document.body.style.paddingRight=n+"px")},snackbarShow:function(e,t,n){var r=void 0!==t&&t,o=void 0!==n?n:5e3,i=GLOBAL_CONFIG.Snackbar.position,a="light"===document.documentElement.getAttribute("data-theme")?GLOBAL_CONFIG.Snackbar.bgLight:GLOBAL_CONFIG.Snackbar.bgDark;document.styleSheets[0].addRule(":root","--heo-snackbar-time:"+o+"ms!important"),Snackbar.show({text:e,backgroundColor:a,showAction:r,duration:o,pos:i})},initJustifiedGallery:function(e){e instanceof jQuery||(e=$(e)),e.each(function(e,t){$(this).is(":visible")&&$(this).justifiedGallery({rowHeight:220,margins:4})})},diffDate:function(e,t){var n,r,o,i=1<arguments.length&&void 0!==t&&t,a=new Date,s=new Date(e),u=a.getTime()-s.getTime();return i?(n=u/864e5,r=u/36e5,o=u/6e4,12<u/2592e6?s.toLocaleDateString():7<=n?s.toLocaleDateString().substr(5):1<=n?parseInt(n)+""+GLOBAL_CONFIG.date_suffix.day:1<=r||1<=o?"最近":GLOBAL_CONFIG.date_suffix.just):parseInt(u/864e5)},loadComment:function(e,t){var n;"IntersectionObserver"in window?(n=new IntersectionObserver(function(e){e[0].isIntersecting&&(t(),n.disconnect())},{threshold:[0]})).observe(e):t()},scrollToDest:function(o,i){var a,s;o<0||i<0||(a=window.scrollY||window.screenTop,o-=70,"CSS"in window&&CSS.supports("scroll-behavior","smooth")?window.scrollTo({top:o,behavior:"smooth"}):(s=null,i=i||500,window.requestAnimationFrame(function e(t){var n,r;s=s||t,a<o?(n=t-s,window.scrollTo(0,(o-a)*n/i+a),n<i?window.requestAnimationFrame(e):window.scrollTo(0,o)):(r=t-s,window.scrollTo(0,a-(a-o)*r/i),r<i?window.requestAnimationFrame(e):window.scrollTo(0,o))})))},fadeIn:function(e,t){e.style.cssText="display:block;animation: to_show ".concat(t,"s")},fadeOut:function(t,e){t.addEventListener("animationend",function e(){t.style.cssText="display: none; animation: '' ",t.removeEventListener("animationend",e)}),t.style.animation="to_hide ".concat(e,"s")},getParents:function(e,t){for(;e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},siblings:function(t,n){return _toConsumableArray(t.parentNode.children).filter(function(e){return n?e!==t&&e.matches(n):e!==t})},wrap:function(e,t,n,r){var o=2<arguments.length&&void 0!==n?n:"",i=3<arguments.length&&void 0!==r?r:"",a=document.createElement(t);o&&(a.id=o),i&&(a.className=i),e.parentNode.insertBefore(a,e),a.appendChild(e)},unwrap:function(e){var t=e.parentNode;t!==document.body&&(t.parentNode.insertBefore(e,t),t.parentNode.removeChild(t))},isJqueryLoad:function(e){"undefined"==typeof jQuery?getScript(GLOBAL_CONFIG.source.jQuery).then(e):e()},isHidden:function(e){return 0===e.offsetHeight&&0===e.offsetWidth},getEleTop:function(e){for(var t=e.offsetTop,n=e.offsetParent;null!==n;)t+=n.offsetTop,n=n.offsetParent;return t}};
\ No newline at end of file
+"use strict";
+
+function _toConsumableArray(e) {
+    return _arrayWithoutHoles(e) || _iterableToArray(e) || _unsupportedIterableToArray(e) || _nonIterableSpread()
+}
+
+function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
+}
+
+function _unsupportedIterableToArray(e, t) {
+    if (e) {
+        if ("string" == typeof e) return _arrayLikeToArray(e, t);
+        var n = Object.prototype.toString.call(e).slice(8, -1);
+        return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? _arrayLikeToArray(e, t) : void 0
+    }
+}
+
+function _iterableToArray(e) {
+    if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e)
+}
+
+function _arrayWithoutHoles(e) {
+    if (Array.isArray(e)) return _arrayLikeToArray(e)
+}
+
+function _arrayLikeToArray(e, t) {
+    (null == t || t > e.length) && (t = e.length);
+    for (var n = 0, r = new Array(t); n < t; n++) r[n] = e[n];
+    return r
+}
+
+var btf = {
+    debounce: function (r, o, i) {
+        var a;
+        return function () {
+            var e = this, t = arguments, n = i && !a;
+            clearTimeout(a), a = setTimeout(function () {
+                a = null, i || r.apply(e, t)
+            }, o), n && r.apply(e, t)
+        }
+    }, throttle: function (n, r, o) {
+        var i, a, s, u = 0;
+        o = o || {};
+
+        function l() {
+            u = !1 === o.leading ? 0 : (new Date).getTime(), i = null, n.apply(a, s), i || (a = s = null)
+        }
+
+        return function () {
+            var e = (new Date).getTime();
+            u || !1 !== o.leading || (u = e);
+            var t = r - (e - u);
+            a = this, s = arguments, t <= 0 || r < t ? (i && (clearTimeout(i), i = null), u = e, n.apply(a, s), i || (a = s = null)) : i || !1 === o.trailing || (i = setTimeout(l, t))
+        }
+    }, sidebarPaddingR: function () {
+        var e = window.innerWidth, t = document.body.clientWidth, n = e - t;
+        e !== t && (document.body.style.paddingRight = n + "px")
+    }, snackbarShow: function (e, t, n) {
+        var r = void 0 !== t && t, o = void 0 !== n ? n : 5e3, i = GLOBAL_CONFIG.Snackbar.position,
+            a = "light" === document.documentElement.getAttribute("data-theme") ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark;
+        document.styleSheets[0].addRule(":root", "--heo-snackbar-time:" + o + "ms!important"), Snackbar.show({
+            text: e,
+            backgroundColor: a,
+            showAction: r,
+            duration: o,
+            pos: i
+        })
+    }, initJustifiedGallery: function (e) {
+        e instanceof jQuery || (e = $(e)), e.each(function (e, t) {
+            $(this).is(":visible") && $(this).justifiedGallery({rowHeight: 220, margins: 4})
+        })
+    }, diffDate: function (e, t) {
+        var n, r, o, i = 1 < arguments.length && void 0 !== t && t, a = new Date, s = new Date(e),
+            u = a.getTime() - s.getTime();
+        return i ? (n = u / 864e5, r = u / 36e5, o = u / 6e4, 12 < u / 2592e6 ? s.toLocaleDateString() : 7 <= n ? s.toLocaleDateString().substr(5) : 1 <= n ? parseInt(n) + "" + GLOBAL_CONFIG.date_suffix.day : 1 <= r || 1 <= o ? "最近" : GLOBAL_CONFIG.date_suffix.just) : parseInt(u / 864e5)
+    }, loadComment: function (e, t) {
+        var n;
+        "IntersectionObserver" in window ? (n = new IntersectionObserver(function (e) {
+            e[0].isIntersecting && (t(), n.disconnect())
+        }, {threshold: [0]})).observe(e) : t()
+    }, scrollToDest: function (o, i) {
+        var a, s;
+        o < 0 || i < 0 || (a = window.scrollY || window.screenTop, o -= 70, "CSS" in window && CSS.supports("scroll-behavior", "smooth") ? window.scrollTo({
+            top: o,
+            behavior: "smooth"
+        }) : (s = null, i = i || 500, window.requestAnimationFrame(function e(t) {
+            var n, r;
+            s = s || t, a < o ? (n = t - s, window.scrollTo(0, (o - a) * n / i + a), n < i ? window.requestAnimationFrame(e) : window.scrollTo(0, o)) : (r = t - s, window.scrollTo(0, a - (a - o) * r / i), r < i ? window.requestAnimationFrame(e) : window.scrollTo(0, o))
+        })))
+    }, fadeIn: function (e, t) {
+        e.style.cssText = "display:block;animation: to_show ".concat(t, "s")
+    }, fadeOut: function (t, e) {
+        t.addEventListener("animationend", function e() {
+            t.style.cssText = "display: none; animation: '' ", t.removeEventListener("animationend", e)
+        }), t.style.animation = "to_hide ".concat(e, "s")
+    }, getParents: function (e, t) {
+        for (; e && e !== document; e = e.parentNode) if (e.matches(t)) return e;
+        return null
+    }, siblings: function (t, n) {
+        return _toConsumableArray(t.parentNode.children).filter(function (e) {
+            return n ? e !== t && e.matches(n) : e !== t
+        })
+    }, wrap: function (e, t, n, r) {
+        var o = 2 < arguments.length && void 0 !== n ? n : "", i = 3 < arguments.length && void 0 !== r ? r : "",
+            a = document.createElement(t);
+        o && (a.id = o), i && (a.className = i), e.parentNode.insertBefore(a, e), a.appendChild(e)
+    }, unwrap: function (e) {
+        var t = e.parentNode;
+        t !== document.body && (t.parentNode.insertBefore(e, t), t.parentNode.removeChild(t))
+    }, isJqueryLoad: function (e) {
+        "undefined" == typeof jQuery ? getScript(GLOBAL_CONFIG.source.jQuery).then(e) : e()
+    }, isHidden: function (e) {
+        return 0 === e.offsetHeight && 0 === e.offsetWidth
+    }, getEleTop: function (e) {
+        for (var t = e.offsetTop, n = e.offsetParent; null !== n;) t += n.offsetTop, n = n.offsetParent;
+        return t
+    }
+};
\ No newline at end of file
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 46e90307..83a43210 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -1,9 +1,3 @@
-/*
- 备注：
- search 关键字相关的 css 不知是否有用，能清理的清理了一部分
-
- */
-@charset "UTF-8";
 :root {
     --heo-white: #fff;
     --heo-white-op: rgba(255, 255, 255, 0.2);
@@ -17,12 +11,12 @@
     --heo-main-op: var(--heo-theme-op);
     --heo-main-none: var(--heo-theme-none);
     --heo-shadow-theme: 0 8px 12px -3px var(--heo-theme-op);
-    --heo-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, .15);
+    --heo-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
     --heo-shadow-main: 0 8px 12px -3px var(--heo-main-op);
-    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
-    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
-    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .05);
-    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
+    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
+    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
+    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
+    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
     --heo-shadow-red: 0 8px 12px -3px #ee7d7936;
     --heo-shadow-green: 0 8px 12px -3px #87ee7936;
     --heo-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
@@ -31,17 +25,18 @@
     --style-border-always: 1px solid var(--heo-card-border);
     --style-border-hover: 1px solid var(--heo-main);
     --style-border-hover-always: 1px solid var(--heo-main);
-    --style-border-dashed: 1px dashed var(--heo-theme-op)
+    --style-border-dashed: 1px dashed var(--heo-theme-op);
 }
 
 ::selection {
     background: var(--heo-fontcolor);
-    color: var(--heo-background)
+    color: var(--heo-background);
 }
 
-[data-theme=light] {
+[data-theme="light"] {
     --heo-theme: #425AEF;
     --heo-theme-op: #4259ef23;
+    --heo-theme-op-deep: #4259efdd;
     --heo-theme-none: #4259ef01;
     --heo-blue: #425AEF;
     --heo-red: #D8213C;
@@ -68,16 +63,17 @@
     --heo-card-bg: #fff;
     --heo-card-bg-op: var(--heo-black-op);
     --heo-card-bg-none: rgba(255, 255, 255, 0);
-    --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
-    --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
+    --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
     --heo-card-border: #e3e8f7;
     --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
-    --style-border-forever: 2px solid var(--heo-main)
+    --style-border-forever: 2px solid var(--heo-main);
 }
 
-[data-theme=dark] {
+[data-theme="dark"] {
     --heo-theme: #0084FF;
     --heo-theme-op: #0084FF23;
+    --heo-theme-op-deep: #0084ffdd;
     --heo-theme-none: #0084FF00;
     --heo-blue: #0084FF;
     --heo-red: #FF3842;
@@ -101,136 +97,147 @@
     --heo-post-tabs-bg: #121212;
     --heo-secondbg: #30343f;
     --heo-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
-    --heo-card-bg: #1d1b26;
+    --heo-card-bg: #1d1e22;
     --heo-card-bg-op: var(--heo-white-op);
     --heo-card-bg-none: #1d1b2600;
-    --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
-    --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
-    --heo-card-border: #42444a;
+    --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
+    --heo-card-border: #282829;
     --heo-shadow-border: 0 8px 16px -4px #00000050;
-    --style-border-forever: 2px solid var(--heo-lighttext)
+    --style-border-forever: 2px solid var(--heo-lighttext);
 }
 
 @media screen and (max-width: 768px) {
     :root {
         --style-border: 0px solid var(--heo-card-border);
-        --style-border-hover: 0px solid var(--heo-main)
+        --style-border-hover: 0px solid var(--heo-main);
     }
 }
 
 @keyframes barrageIn {
     0% {
         transform: translateY(20px);
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
-        transform: translateY(0);
-        opacity: 1
+        transform: translateY(0px);
+        opacity: 1;
     }
 }
 
 @keyframes barrageOut {
     0% {
-        transform: translateY(0);
-        opacity: 1
+        transform: translateY(0px);
+        opacity: 1;
     }
+
     100% {
         transform: translateY(20px);
-        opacity: 0
+        opacity: 0;
     }
 }
 
 html {
     line-height: 1.15;
-    text-size-adjust: 100%
-}
-
-body {
-    margin: 0
+    text-size-adjust: 100%;
 }
 
 main {
-    display: block
+    display: block;
 }
 
 h1 {
     font-size: 2em;
-    margin: .67em 0
+    margin: 0.67em 0px;
 }
 
 hr {
     box-sizing: content-box;
-    height: 0;
-    overflow: visible
+    height: 0px;
+    overflow: visible;
 }
 
 pre {
     font-family: monospace, monospace;
-    font-size: 1em
+    font-size: 1em;
 }
 
 a {
-    background-color: transparent
+    background-color: transparent;
 }
 
 abbr[title] {
     border-bottom: none;
-    text-decoration: underline dotted
+    text-decoration: underline dotted;
 }
 
-b, strong {
-    font-weight: bolder
+b,
+strong {
+    font-weight: bolder;
 }
 
-code, kbd, samp {
+code,
+kbd,
+samp {
     font-family: monospace, monospace;
-    font-size: 1em
+    font-size: 1em;
 }
 
 small {
-    font-size: 80%
+    font-size: 80%;
 }
 
-sub, sup {
+sub,
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
-    vertical-align: baseline
+    vertical-align: baseline;
 }
 
 sub {
-    bottom: -.25em
+    bottom: -0.25em;
 }
 
 sup {
-    top: -.5em
+    top: -0.5em;
 }
 
 img {
-    border-style: none
+    border-style: none;
 }
 
-button, input, optgroup, select, textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
     font-family: inherit;
     font-size: 100%;
     line-height: 1.15;
-    margin: 0
+    margin: 0px;
 }
 
-button, input {
-    overflow: visible
+button,
+input {
+    overflow: visible;
 }
 
-button, select {
-    text-transform: none
+button,
+select {
+    text-transform: none;
 }
 
-[type=button], [type=reset], [type=submit], button {
-    appearance: button
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+    appearance: button;
 }
 
 fieldset {
-    padding: .35em .75em .625em
+    padding: 0.35em 0.75em 0.625em;
 }
 
 legend {
@@ -238,211 +245,247 @@ legend {
     color: inherit;
     display: table;
     max-width: 100%;
-    padding: 0;
-    white-space: normal
+    padding: 0px;
+    white-space: normal;
 }
 
 progress {
-    vertical-align: baseline
+    vertical-align: baseline;
 }
 
 textarea {
-    overflow: auto
+    overflow: auto;
 }
 
-[type=checkbox], [type=radio] {
+[type="checkbox"],
+[type="radio"] {
     box-sizing: border-box;
-    padding: 0
+    padding: 0px;
 }
 
-[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
-    height: auto
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
 }
 
-[type=search] {
+[type="search"] {
     appearance: textfield;
-    outline-offset: -2px
+    outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-decoration {
-    appearance: none
+[type="search"]::-webkit-search-decoration {
+    appearance: none;
 }
 
 ::-webkit-file-upload-button {
     appearance: button;
-    font: inherit
+    font: inherit;
 }
 
 details {
-    display: block
+    display: block;
 }
 
 summary {
-    display: list-item
+    display: list-item;
 }
 
 template {
-    display: none
+    display: none;
 }
 
 [hidden] {
-    display: none
+    display: none;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span, #aside-content .card-info .card-info-data > .card-info-data-item a .headline, #pagination .next_info, #pagination .prev_info, #sidebar #sidebar-menus .menus_items .site-page, #sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div, .flink#article-container .flink-list > .flink-list-item a .flink-item-desc, .flink#article-container .flink-list > .flink-list-item a .flink-item-name, .limit-one-line {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span,
+#aside-content .card-info .card-info-data > .card-info-data-item a .headline,
+#pagination .next_info,
+#pagination .prev_info,
+#sidebar #sidebar-menus .menus_items .site-page,
+#sidebar #sidebar-menus .site-data .data-item .data-item-link > a > div,
+.flink#article-container .flink-list > .flink-list-item a .flink-item-desc,
+.flink#article-container .flink-list > .flink-list-item a .flink-item-name,
+.limit-one-line {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > .title, #error-wrap .error-content .error-info .error_subtitle, #post-info .post-title, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content, .article-sort-item-title, .limit-more-line, .relatedPosts > .relatedPosts-list .content .title, figure.gallery-group .gallery-group-name, figure.gallery-group p {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical
-}
-
-#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before, #post .post-copyright::before, #post .post-outdate-notice::before, .fontawesomeIcon, .note:not(.no-icon)::before {
+#aside-content .aside-list > .aside-list-item .content > .comment,
+#aside-content .aside-list > .aside-list-item .content > .name,
+#aside-content .aside-list > .aside-list-item .content > .title,
+#error-wrap .error-content .error-info .error_subtitle,
+#post-info .post-title,
+#recent-posts > .recent-post-item > .recent-post-info > .article-title,
+#recent-posts > .recent-post-item > .recent-post-info > .content,
+.article-sort-item-title,
+.limit-more-line,
+.relatedPosts > .relatedPosts-list .content .title,
+#article-container h1::before,
+#article-container h2::before,
+#article-container h3::before,
+#article-container h4::before,
+#article-container h5::before,
+#article-container h6::before,
+#post .post-copyright::before,
+#post .post-outdate-notice::before,
+.fontawesomeIcon,
+.note:not(.no-icon)::before {
     display: inline-block;
     font-weight: 600;
     font-style: normal;
     font-variant: normal;
     font-family: "Font Awesome 5 Free";
     text-rendering: auto;
-    -webkit-font-smoothing: antialiased
+    -webkit-font-smoothing: antialiased;
 }
 
 .card-announcement-animation {
     color: red;
-    animation: .8s linear 0s infinite normal none running announ_animation
+    animation: 0.8s linear 0s infinite normal none running announ_animation;
 }
 
 .scroll-down-effects {
-    animation: 1.5s ease 0s infinite normal none running scroll-down-effect
+    animation: 1.5s ease 0s infinite normal none running scroll-down-effect;
 }
 
 .reward-main {
-    animation: .3s ease .1s 1 normal both running donate_effcet
+    animation: 0.3s ease 0.1s 1 normal both running donate_effcet;
 }
 
 @-webkit-keyframes scroll-down-effect {
     0% {
-        top: 0;
-        opacity: .4
+        top: 0px;
+        opacity: 0.4;
     }
+
     50% {
         top: -16px;
         opacity: 1;
-        filter: none
+        filter: none;
     }
+
     100% {
-        top: 0;
-        opacity: .4
+        top: 0px;
+        opacity: 0.4;
     }
 }
 
 @keyframes scroll-down-effect {
     0% {
-        top: 0;
-        opacity: .4
+        top: 0px;
+        opacity: 0.4;
     }
+
     50% {
         top: -16px;
         opacity: 1;
-        filter: none
+        filter: none;
     }
+
     100% {
-        top: 0;
-        opacity: .4
+        top: 0px;
+        opacity: 0.4;
     }
 }
 
 @-webkit-keyframes header-effect {
     0% {
         opacity: 0;
-        transform: translateY(-50px)
+        transform: translateY(-50px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @keyframes header-effect {
     0% {
         opacity: 0;
-        transform: translateY(-50px)
+        transform: translateY(-50px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @-webkit-keyframes headerNoOpacity {
     0% {
-        transform: translateY(-50px)
+        transform: translateY(-50px);
     }
+
     100% {
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @keyframes headerNoOpacity {
     0% {
-        transform: translateY(-50px)
+        transform: translateY(-50px);
     }
+
     100% {
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @-webkit-keyframes bottom-top {
     0% {
         opacity: 0;
-        margin-top: 50px
+        margin-top: 50px;
     }
+
     100% {
         opacity: 1;
         filter: none;
-        margin-top: 0
+        margin-top: 0px;
     }
 }
 
 @keyframes bottom-top {
     0% {
         opacity: 0;
-        margin-top: 50px
+        margin-top: 50px;
     }
+
     100% {
         opacity: 1;
         filter: none;
-        margin-top: 0
+        margin-top: 0px;
     }
 }
 
 @-webkit-keyframes titlescale {
     0% {
         opacity: 0;
-        transform: scale(.7)
+        transform: scale(0.7);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: scale(1)
+        transform: scale(1);
     }
 }
 
 @keyframes titlescale {
     0% {
         opacity: 0;
-        transform: scale(.7)
+        transform: scale(0.7);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: scale(1)
+        transform: scale(1);
     }
 }
 
@@ -450,11 +493,12 @@ template {
     0% {
         opacity: 1;
         filter: none;
-        transform: scale(1)
+        transform: scale(1);
     }
+
     100% {
         opacity: 0;
-        transform: scale(.7)
+        transform: scale(0.7);
     }
 }
 
@@ -462,175 +506,196 @@ template {
     0% {
         opacity: 1;
         filter: none;
-        transform: scale(1)
+        transform: scale(1);
     }
+
     100% {
         opacity: 0;
-        transform: scale(.7)
+        transform: scale(0.7);
     }
 }
 
 @-webkit-keyframes to_show {
     0% {
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
         opacity: 1;
-        filter: none
+        filter: none;
     }
 }
 
 @keyframes to_show {
     0% {
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
         opacity: 1;
-        filter: none
+        filter: none;
     }
 }
 
 @-webkit-keyframes to_hide {
     0% {
         opacity: 1;
-        filter: none
+        filter: none;
     }
+
     100% {
-        opacity: 0
+        opacity: 0;
     }
 }
 
 @keyframes to_hide {
     0% {
         opacity: 1;
-        filter: none
+        filter: none;
     }
+
     100% {
-        opacity: 0
+        opacity: 0;
     }
 }
 
 @-webkit-keyframes ribbon_to_show {
     0% {
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
-        opacity: .6
+        opacity: 0.6;
     }
 }
 
 @keyframes ribbon_to_show {
     0% {
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
-        opacity: .6
+        opacity: 0.6;
     }
 }
 
 @-webkit-keyframes avatar_turn_around {
     0% {
-        transform: rotate(0)
+        transform: rotate(0deg);
     }
+
     100% {
-        transform: rotate(360deg)
+        transform: rotate(360deg);
     }
 }
 
 @keyframes avatar_turn_around {
     0% {
-        transform: rotate(0)
+        transform: rotate(0deg);
     }
+
     100% {
-        transform: rotate(360deg)
+        transform: rotate(360deg);
     }
 }
 
 @-webkit-keyframes sub_menus {
     0% {
         opacity: 0;
-        transform: translateY(10px)
+        transform: translateY(10px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @keyframes sub_menus {
     0% {
         opacity: 0;
-        transform: translateY(10px)
+        transform: translateY(10px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @-webkit-keyframes donate_effcet {
     0% {
         opacity: 0;
-        transform: translateY(-20px)
+        transform: translateY(-20px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @keyframes donate_effcet {
     0% {
         opacity: 0;
-        transform: translateY(-20px)
+        transform: translateY(-20px);
     }
+
     100% {
         opacity: 1;
         filter: none;
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @-webkit-keyframes announ_animation {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: scale(1);
-        filter: blur(0)
+        filter: blur(0px);
     }
+
     50% {
         transform: scale(1.2);
-        filter: blur(20px)
+        filter: blur(20px);
     }
 }
 
 @keyframes announ_animation {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: scale(1);
-        filter: blur(0)
+        filter: blur(0px);
     }
+
     50% {
         transform: scale(1.2);
-        filter: blur(20px)
+        filter: blur(20px);
     }
 }
 
 @-webkit-keyframes sidebarItem {
     0% {
-        transform: translateX(200px)
+        transform: translateX(200px);
     }
+
     100% {
-        transform: translateX(0)
+        transform: translateX(0px);
     }
 }
 
 @keyframes sidebarItem {
     0% {
-        transform: translateX(200px)
+        transform: translateX(200px);
     }
+
     100% {
-        transform: translateX(0)
+        transform: translateX(0px);
     }
 }
 
@@ -664,12 +729,12 @@ template {
     --reward-pop: #f5f5f5;
     --toc-link-color: #666261;
     --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
-    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15)
+    --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
 }
 
 html {
     height: 100%;
-    font-size: 20px
+    font-size: 20px;
 }
 
 body {
@@ -680,272 +745,211 @@ body {
     font-size: var(--global-font-size);
     font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
     line-height: 2;
-    -webkit-tap-highlight-color: transparent
+    -webkit-tap-highlight-color: transparent;
+    margin: 0px;
 }
 
 input::placeholder {
-    color: var(--font-color)
+    color: var(--font-color);
 }
 
 #web_bg {
     position: fixed;
     z-index: -999;
-    background: center center/cover no-repeat local #f4f4f4
+    background: center center / cover no-repeat local rgb(244, 244, 244);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     position: relative;
-    margin: 1rem 0 .7rem;
+    margin: 1rem 0px 0.7rem;
     color: var(--text-highlight-color);
-    font-weight: 700
+    font-weight: 700;
 }
 
-h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
-    font-size: inherit !important
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+    font-size: inherit !important;
 }
 
 * {
-    box-sizing: border-box
+    box-sizing: border-box;
 }
 
 hr {
     position: relative;
     margin: 2rem auto;
-    border: 2px dashed var(--hr-border)
+    border: 2px dashed var(--hr-border);
 }
 
 .table-wrap {
     overflow-x: scroll;
-    margin: 0 0 1rem
+    margin: 0px 0px 1rem;
 }
 
 table {
     display: table;
     width: 100%;
-    border-spacing: 0;
+    border-spacing: 0px;
     border-collapse: collapse;
-    empty-cells: show
+    empty-cells: show;
 }
 
 table thead {
-    background: rgba(153, 169, 191, .1)
+    background: rgba(153, 169, 191, 0.1);
 }
 
-table td, table th {
-    padding: .3rem .6rem;
+table td,
+table th {
+    padding: 0.3rem 0.6rem;
     border: 1px solid var(--light-grey);
-    vertical-align: middle
+    vertical-align: middle;
 }
 
-/* 选中内容的颜色 */
 ::selection {
-    color: #b5b8ef
+    background: rgb(0, 121, 255);
+    color: rgb(247, 247, 247);
 }
 
 button {
-    padding: 0;
-    outline: 0;
+    padding: 0px;
+    outline: 0px;
     border: none;
-    background: 0 0;
-    cursor: pointer
+    background: 0px 0px;
+    cursor: pointer;
 }
 
 a {
-    color: #99a9bf;
+    color: rgb(153, 169, 191);
     text-decoration: none;
-    transition: all .2s ease 0s;
-    overflow-wrap: break-word
+    transition: all 0.2s ease 0s;
+    overflow-wrap: break-word;
 }
 
 a:hover {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
-#aside-content .author-info__description, #aside-content .author-info__name, #site-name, #site-subtitle, #site-title {
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+#aside-content .author-info__description,
+#aside-content .author-info__name,
+#site-name,
+#site-subtitle,
+#site-title {
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 }
 
 .is-center {
-    text-align: center
+    text-align: center;
 }
 
 .copy-true {
-    user-select: all
+    user-select: all;
 }
 
 .pull-left {
-    float: left
+    float: left;
 }
 
 .pull-right {
-    float: right
+    float: right;
 }
 
 .button--animated {
     position: relative;
     z-index: 1;
-    transition: color 1s ease 0s
+    transition: color 1s ease 0s;
 }
 
 .button--animated::before {
     position: absolute;
-    inset: 0;
+    inset: 0px;
     z-index: -1;
     background: var(--btn-hover-color);
     content: "";
-    transition: transform .5s ease-out 0s;
+    transition: transform 0.5s ease-out 0s;
     transform: scaleX(0);
-    transform-origin: 0 50%
+    transform-origin: 0px 50%;
 }
 
 .button--animated:hover::before {
-    transition-timing-function: cubic-bezier(.45, 1.64, .47, .66);
-    transform: scaleX(1)
+    transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
+    transform: scaleX(1);
 }
 
 img {
     max-width: 100%;
-    transition: all .2s ease 0s
+    transition: all 0.2s ease 0s;
 }
 
-img:not([src]), img[src=""] {
-    opacity: 0
+img:not([src]),
+img[src=""] {
+    opacity: 0;
 }
 
 .img-alt {
-    margin: -.5rem 0 .5rem;
-    color: #858585
+    margin: -0.5rem 0px 0.5rem;
+    color: rgb(133, 133, 133);
 }
 
 .img-alt:hover {
-    text-decoration: none !important
+    text-decoration: none !important;
 }
 
 :root {
-    --hl-color: rgba(1, 14, 14, 0.899);
+    --hl-color: #eff;
     --hl-bg: #212121;
     --hltools-bg: #1c1c1c;
     --hltools-color: rgba(238, 255, 255, 0.8);
     --hlnumber-bg: #212121;
     --hlnumber-color: rgba(238, 255, 255, 0.5);
     --hlscrollbar-bg: #121212;
-    --hlexpand-bg: linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9))
+    --hlexpand-bg: linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9));
 }
 
-figure.highlight table::-webkit-scrollbar-thumb {
-    background: var(--hlscrollbar-bg)
-}
-
-figure.highlight pre .deletion {
-    color: #bf42bf
-}
-
-figure.highlight pre .addition {
-    color: #105ede
-}
-
-figure.highlight pre .meta {
-    color: #c792ea
-}
-
-figure.highlight pre .comment {
-    color: #969896
-}
-
-figure.highlight pre .attribute, figure.highlight pre .css .class, figure.highlight pre .css .id, figure.highlight pre .css .pseudo, figure.highlight pre .html .doctype, figure.highlight pre .regexp, figure.highlight pre .ruby .constant, figure.highlight pre .tag .name, figure.highlight pre .variable, figure.highlight pre .xml .doctype, figure.highlight pre .xml .pi, figure.highlight pre .xml .tag .title {
-    color: var(--heo-red)
-}
-
-figure.highlight pre .tag {
-    color: #89ddff
-}
-
-figure.highlight pre .command, figure.highlight pre .constant, figure.highlight pre .literal, figure.highlight pre .number, figure.highlight pre .params, figure.highlight pre .preprocessor {
-    color: var(--heo-orange)
-}
-
-figure.highlight pre .built_in {
-    color: var(--heo-yellow)
-}
-
-figure.highlight pre .css .rules .attribute, figure.highlight pre .formula, figure.highlight pre .header, figure.highlight pre .inheritance, figure.highlight pre .number, figure.highlight pre .ruby .class .title, figure.highlight pre .ruby .symbol, figure.highlight pre .special, figure.highlight pre .string, figure.highlight pre .value, figure.highlight pre .xml .cdata {
-    color: var(--heo-green)
-}
-
-figure.highlight pre .css .hexcolor, figure.highlight pre .keyword, figure.highlight pre .title {
-    color: #89ddff
-}
-
-figure.highlight pre .coffeescript .title, figure.highlight pre .function, figure.highlight pre .javascript .title, figure.highlight pre .perl .sub, figure.highlight pre .python .decorator, figure.highlight pre .python .title, figure.highlight pre .ruby .function .title, figure.highlight pre .ruby .title .keyword {
-    color: var(--heo-blue)
-}
-
-figure.highlight pre .javascript .function, figure.highlight pre .tag .attr {
-    color: #c792ea
-}
-
-#article-container figure.highlight .line.marked {
-    background-color: rgba(97, 97, 97, .314)
-}
-
-#article-container figure.highlight table {
-    display: block;
-    overflow: auto;
-    border: none
-}
-
-#article-container figure.highlight table td {
-    padding: 0;
-    border: none
-}
-
-#article-container figure.highlight .gutter pre {
-    padding-right: .5rem;
-    padding-left: .5rem;
-    background-color: var(--hlnumber-bg);
-    color: var(--hlnumber-color);
-    text-align: right
-}
-
-/*#article-container figure.highlight .code pre {*/
-/*    padding-right: .5rem;*/
-/*    padding-left: .5rem;*/
-/*    width: 100%*/
-/*}*/
-
-/*#article-container figure.highlight, #article-container pre {*/
-/*    overflow: auto;*/
-/*    margin: 0 0 1rem;*/
-/*    padding: 0;*/
-/*    background: var(--hl-bg);*/
-/*    color: var(--hl-color);*/
-/*    line-height: 1.6*/
-/*}*/
-
 blockquote {
-    margin: 0 0 1rem;
-    padding: .1rem .8rem;
-    border-left: .2rem solid #49b1f5;
+    margin: 0px 0px 1rem;
+    padding: 0.1rem 0.8rem;
+    border-left: 0.2rem solid rgb(73, 177, 245);
     background-color: var(--blockquote-bg);
-    color: var(--blockquote-color)
+    color: var(--blockquote-color);
 }
 
 blockquote a {
-    word-break: break-all
+    word-break: break-all;
 }
 
 blockquote p {
-    padding: .5rem 0;
-    margin: 0 !important
+    padding: 0.5rem 0px;
+    margin: 0px !important;
 }
 
 blockquote footer {
-    padding: 0 0 .5rem
+    padding: 0px 0px 0.5rem;
 }
 
 blockquote footer cite::before {
-    padding: 0 .3em;
-    content: "—"
+    padding: 0px 0.3em;
+    content: "—";
+}
+
+#article-container .gutter {
+    user-select: none;
+}
+
+#article-container .gist table {
+    width: auto;
+}
+
+#article-container .gist table td {
+    border: none;
 }
 
 /* 代码块增加边框 */
@@ -953,213 +957,76 @@ blockquote footer cite::before {
     border: var(--style-border-always);
 }
 
-/*#article-container code {*/
-/*    padding: .1rem .2rem;*/
-/*    background: rgba(27, 31, 35, .05);*/
-/*    color: #f47466*/
-/*}*/
-
-/*#article-container pre {*/
-/*    padding: 10px 20px*/
-/*!*}*!*/
-
-/*!*#article-container pre code {*!*/
-/*!*    padding: 0;*!*/
-/*!*    background: 0 0;*!*/
-/*!*    color: var(--hl-color);*!*/
-/*!*    text-shadow: none*!*/
-/*!*}*!*/
-
-/*#article-container figure.highlight {*/
-/*    position: relative*/
-/*}*/
-
-/*#article-container figure.highlight pre {*/
-/*    margin: 0;*/
-/*    padding: 8px 0;*/
-/*    border: none*/
-/*}*/
-
-/*#article-container figure.highlight .caption, #article-container figure.highlight figcaption {*/
-/*    padding: .3rem 0 .1rem .7rem;*/
-/*    font-size: var(--global-font-size);*/
-/*    line-height: 1em*/
-/*}*/
-
-/*#article-container figure.highlight .caption a, #article-container figure.highlight figcaption a {*/
-/*    float: right;*/
-/*    padding-right: 10px;*/
-/*    color: var(--hl-color)*/
-/*}*/
-
-/*#article-container figure.highlight .caption a:hover, #article-container figure.highlight figcaption a:hover {*/
-/*    border-bottom-color: var(--hl-color)*/
-/*}*/
-
-/*#article-container .highlight-tools {*/
-/*    position: relative;*/
-/*    display: flex;*/
-/*    -webkit-box-align: center;*/
-/*    align-items: center;*/
-/*    overflow: hidden;*/
-/*    min-height: 1.2rem;*/
-/*    height: 2.15em;*/
-/*    background: var(--hltools-bg);*/
-/*    color: var(--hltools-color);*/
-/*    font-size: var(--global-font-size)*/
-/*}*/
-
-/*#article-container .highlight-tools.closed + table {*/
-/*    display: none*/
-/*}*/
-
-/*#article-container .highlight-tools .expand {*/
-/*    position: absolute;*/
-/*    padding: .4rem .7rem;*/
-/*    cursor: pointer;*/
-/*    transition: transform .3s ease 0s*/
-/*}*/
-
-/*#article-container .highlight-tools .expand + .code-lang {*/
-/*    left: 1.7rem*/
-/*}*/
-
-/*#article-container .highlight-tools .expand.closed {*/
-/*    transition: all .3s ease 0s;*/
-/*    transform: rotate(-90deg) !important*/
-/*}*/
-
-/*#article-container .highlight-tools .code-lang {*/
-/*    position: absolute;*/
-/*    left: .7rem;*/
-/*    text-transform: uppercase;*/
-/*    font-weight: 700;*/
-/*    font-size: 1.15em;*/
-/*    user-select: none*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-notice {*/
-/*    position: absolute;*/
-/*    right: 1.7rem;*/
-/*    opacity: 0;*/
-/*    transition: opacity .4s ease 0s*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-button {*/
-/*    position: absolute;*/
-/*    right: .7rem;*/
-/*    cursor: pointer;*/
-/*    transition: color .2s ease 0s*/
-/*}*/
-
-/*#article-container .highlight-tools .copy-button:hover {*/
-/*    color: #307af6*/
-/*}*/
-
-#article-container .gutter {
-    user-select: none
-}
-
-#article-container .gist table {
-    width: auto
-}
-
-#article-container .gist table td {
-    border: none
-}
-
-#article-container .code-expand-btn {
-    position: absolute;
-    bottom: 0;
-    z-index: 10;
-    width: 100%;
-    background: var(--hlexpand-bg);
-    text-align: center;
-    font-size: var(--global-font-size);
-    cursor: pointer
-}
-
-#article-container .code-expand-btn i {
-    padding: .3rem 0;
-    color: var(--hlnumber-color);
-    animation: 1.2s ease 0s infinite normal none running code-expand-key
-}
-
-#article-container .code-expand-btn.expand-done {
-    display: none !important
-}
-
-#article-container .code-expand-btn:not(.expand-done) ~ pre, #article-container .code-expand-btn:not(.expand-done) ~ table {
-    overflow: hidden;
-    height: 400px
-}
-
 @-webkit-keyframes code-expand-key {
     0% {
-        opacity: .6
+        opacity: 0.6;
     }
+
     50% {
-        opacity: .1
+        opacity: 0.1;
     }
+
     100% {
-        opacity: .6
+        opacity: 0.6;
     }
 }
 
 @keyframes code-expand-key {
     0% {
-        opacity: .6
+        opacity: 0.6;
     }
+
     50% {
-        opacity: .1
+        opacity: 0.1;
     }
+
     100% {
-        opacity: .6
+        opacity: 0.6;
     }
 }
 
 .article-sort {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     padding-left: 1rem;
-    border-left: 2px solid #92b9fa
+    border-left: 2px solid rgb(146, 185, 250);
 }
 
 .article-sort-title {
     position: relative;
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     padding-bottom: 1rem;
     padding-left: 1rem;
-    font-size: 1.72em
+    font-size: 1.72em;
 }
 
 .article-sort-title:hover::before {
-    border-color: #ff7242
+    border-color: rgb(255, 114, 66);
 }
 
 .article-sort-title::before {
     position: absolute;
     top: calc((100% - 1.8rem) / 2);
-    left: -.45rem;
+    left: -0.45rem;
     z-index: 1;
-    width: .5rem;
-    height: .5rem;
-    border: .25rem solid #307af6;
-    border-radius: .5rem;
+    width: 0.5rem;
+    height: 0.5rem;
+    border: 0.25rem solid rgb(48, 122, 246);
+    border-radius: 0.5rem;
     background: var(--card-bg);
     content: "";
-    line-height: .5rem;
-    transition: all .2s ease-in-out 0s
+    line-height: 0.5rem;
+    transition: all 0.2s ease-in-out 0s;
 }
 
 .article-sort-title::after {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: 0px;
+    left: 0px;
     z-index: 0;
-    width: .1rem;
+    width: 0.1rem;
     height: 1.5em;
-    background: #92b9fa;
-    content: ""
+    background: rgb(146, 185, 250);
+    content: "";
 }
 
 .article-sort-item {
@@ -1167,190 +1034,190 @@ blockquote footer cite::before {
     display: flex;
     -webkit-box-align: center;
     align-items: center;
-    margin: 0 0 1rem .5rem;
-    transition: all .2s ease-in-out 0s
+    margin: 0px 0px 1rem 0.5rem;
+    transition: all 0.2s ease-in-out 0s;
 }
 
 .article-sort-item:hover::before {
-    border-color: #ff7242
+    border-color: rgb(255, 114, 66);
 }
 
 .article-sort-item::before {
     position: absolute;
     left: calc(-1rem - 17px);
-    width: .3rem;
-    height: .3rem;
-    border: .15rem solid #307af6;
-    border-radius: .3rem;
+    width: 0.3rem;
+    height: 0.3rem;
+    border: 0.15rem solid rgb(48, 122, 246);
+    border-radius: 0.3rem;
     background: var(--card-bg);
     content: "";
-    transition: all .2s ease-in-out 0s
+    transition: all 0.2s ease-in-out 0s;
 }
 
 .article-sort-item.no-article-cover {
-    height: 80px
+    height: 80px;
 }
 
 .article-sort-item.no-article-cover .article-sort-item-info {
-    padding: 0
+    padding: 0px;
 }
 
 .article-sort-item.year {
-    font-size: 1.43em
+    font-size: 1.43em;
 }
 
 .article-sort-item.year:hover::before {
-    border-color: #307af6
+    border-color: rgb(48, 122, 246);
 }
 
 .article-sort-item.year::before {
-    border-color: #ff7242
+    border-color: rgb(255, 114, 66);
 }
 
 .article-sort-item-time {
-    color: #858585;
-    font-size: 95%
+    color: rgb(133, 133, 133);
+    font-size: 95%;
 }
 
 .article-sort-item-time time {
-    padding-left: .3rem;
-    cursor: default
+    padding-left: 0.3rem;
+    cursor: default;
 }
 
 .article-sort-item-title {
     color: var(--font-color);
     font-size: 1.1em;
-    transition: all .3s ease 0s;
-    -webkit-line-clamp: 2
+    transition: all 0.3s ease 0s;
+    -webkit-line-clamp: 2;
 }
 
 .article-sort-item-title:hover {
-    color: #307af6;
-    transform: translateX(10px)
+    color: rgb(48, 122, 246);
+    transform: translateX(10px);
 }
 
 .article-sort-item-img {
     overflow: hidden;
     width: 80px;
-    height: 80px
+    height: 80px;
 }
 
 .article-sort-item-img img {
     width: 100%;
     height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
+    transition: all 0.6s ease 0s;
+    object-fit: cover;
 }
 
 .article-sort-item-img img:hover {
-    transform: scale(1.1)
+    transform: scale(1.1);
 }
 
 .article-sort-item-info {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
-    padding: 0 .8rem
+    padding: 0px 0.8rem;
 }
 
 #page .category-lists {
-    padding: 1rem 0 1.5rem
+    padding: 1rem 0px 1.5rem;
 }
 
 @media screen and (max-width: 768px) {
     #page .category-lists {
-        padding: 0
+        padding: 0px;
     }
 }
 
 #page .category-lists .category-title {
-    font-size: 2.57em
+    font-size: 2.57em;
 }
 
 @media screen and (max-width: 768px) {
     #page .category-lists .category-title {
-        font-size: 2em
+        font-size: 2em;
     }
 }
 
 #page .category-lists .category-list a {
-    color: var(--font-color)
+    color: var(--font-color);
 }
 
 #page .category-lists .category-list a:hover {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 #page .category-lists .category-list .category-list-count {
-    margin-left: .4rem;
-    color: #858585
+    margin-left: 0.4rem;
+    color: rgb(133, 133, 133);
 }
 
 #page .category-lists .category-list .category-list-count::before {
-    content: "("
+    content: "(";
 }
 
 #page .category-lists .category-list .category-list-count::after {
-    content: ")"
+    content: ")";
 }
 
 #page .category-lists ul {
-    margin-top: .4rem;
-    padding: 0 0 0 1rem;
+    margin-top: 0.4rem;
+    padding: 0px 0px 0px 1rem;
     list-style: none;
-    counter-reset: li 0
+    counter-reset: li 0;
 }
 
 #page .category-lists ul ul {
-    padding-left: .2rem
+    padding-left: 0.2rem;
 }
 
 #page .category-lists ul li {
     position: relative;
-    margin: .3rem 0;
-    padding: .12em .4em .12em 1.4em
+    margin: 0.3rem 0px;
+    padding: 0.12em 0.4em 0.12em 1.4em;
 }
 
 #page .category-lists ul li::before {
     position: absolute;
-    left: 0;
+    left: 0px;
     cursor: pointer;
-    transition: all .3s ease-out 0s;
-    top: .7em;
-    width: .43em;
-    height: .43em;
-    border: .215em solid #307af6;
-    border-radius: .43em;
-    background: 0 0;
-    content: ""
+    transition: all 0.3s ease-out 0s;
+    top: 0.7em;
+    width: 0.43em;
+    height: 0.43em;
+    border: 0.215em solid rgb(48, 122, 246);
+    border-radius: 0.43em;
+    background: 0px 0px;
+    content: "";
 }
 
 #page .category-lists ul li:hover::before {
-    border-color: #ff7242
+    border-color: rgb(255, 114, 66);
 }
 
 .layout {
     display: flex;
-    margin: 0 auto;
+    margin: 0px auto;
     padding: 2rem 15px;
-    max-width: 1200px
+    max-width: 1200px;
 }
 
 @media screen and (max-width: 900px) {
     .layout {
         -webkit-box-orient: vertical;
-        flex-direction: column
+        flex-direction: column;
     }
 }
 
 @media screen and (max-width: 768px) {
     .layout {
-        padding: 1rem 5px
+        padding: 1rem 5px;
     }
 }
 
 @media screen and (min-width: 2000px) {
     .layout {
-        max-width: 1500px
+        max-width: 1500px;
     }
 }
 
@@ -1359,243 +1226,46 @@ blockquote footer cite::before {
     padding: 50px 40px;
     border-radius: 8px;
     background: var(--card-bg);
-    box-shadow: var(--card-box-shadow)
+    box-shadow: var(--card-box-shadow);
 }
 
 .layout > div:first-child:not(.recent-posts):hover {
-    box-shadow: var(--card-hover-box-shadow)
+    box-shadow: var(--card-hover-box-shadow);
 }
 
 @media screen and (max-width: 768px) {
     .layout > div:first-child:not(.recent-posts) {
-        padding: 1.8rem .7rem !important
+        padding: 1.8rem 0.7rem !important;
     }
 }
 
 .layout > div:first-child {
     width: 75%;
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (max-width: 900px) {
     .layout > div:first-child {
-        width: 100% !important
+        width: 100% !important;
     }
 }
 
 .layout.hide-aside {
-    max-width: 1000px
+    max-width: 1000px;
 }
 
 @media screen and (min-width: 2000px) {
     .layout.hide-aside {
-        max-width: 1300px
+        max-width: 1300px;
     }
 }
 
 .layout.hide-aside > div {
-    width: 100% !important
+    width: 100% !important;
 }
 
-.flink#article-container .flink-desc {
-    margin: .2rem 0 .5rem
-}
-
-.flink#article-container .flink-list {
-    overflow: auto;
-    padding: 10px 10px 0;
-    text-align: center
-}
-
-.flink#article-container .flink-list > .flink-list-item {
-    position: relative;
-    float: left;
-    overflow: hidden;
-    margin: 15px 7px;
-    width: calc(25% - 12px);
-    height: 90px;
-    border-radius: 5px;
-    line-height: 17px;
-    transform: translateZ(0);
-    transition: all .3s ease 0s
-}
-
-@media screen and (max-width: 1200px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(25% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(33.3333% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(50% - 12px) !important
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .flink#article-container .flink-list > .flink-list-item {
-        width: calc(100% - 12px) !important
-    }
-}
-
-.flink#article-container .flink-list > .flink-list-item:hover {
-    background: #006cf2;
-    transform: scale(1.05)
-}
-
-.flink#article-container .flink-list > .flink-list-item a {
-    color: var(--font-color);
-    text-decoration: none
-}
-
-.flink#article-container .flink-list > .flink-list-item a img {
-    float: left;
-    margin: 15px 10px;
-    width: 60px;
-    height: 60px;
-    border-radius: 35px;
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .flink-list > .flink-list-item a .img-alt {
-    display: none
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-name {
-    display: block;
-    padding: 16px 10px 0 0;
-    height: 40px;
-    font-weight: 700;
-    font-size: 1.43em
-}
-
-.flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
-    display: block;
-    padding: 16px 10px 16px 0;
-    height: 50px;
-    font-size: .93em
-}
-
-.flink#article-container .site-card-group {
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-box-pack: start;
-    justify-content: flex-start;
-    margin: -8px;
-    -webkit-box-align: stretch;
-    align-items: stretch
-}
-
-.flink#article-container .site-card {
-    margin: 8px;
-    width: calc(20% - 16px);
-    display: block;
-    line-height: 1.4;
-    height: 100%
-}
-
-@media screen and (max-width: 1200px) {
-    .flink#article-container .site-card {
-        width: calc(20% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .flink#article-container .site-card {
-        width: calc(25% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .flink#article-container .site-card {
-        width: calc(33.3333% - 16px) !important
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .flink#article-container .site-card {
-        width: calc(50% - 16px) !important
-    }
-}
-
-.flink#article-container .site-card .img {
-    width: 100%;
-    height: 120px;
-    overflow: hidden;
-    border-radius: 12px 12px 0 0;
-    background: #f6f6f6
-}
-
-@media screen and (max-width: 500px) {
-    .flink#article-container .site-card .img {
-        height: 100px
-    }
-}
-
-.flink#article-container .site-card .img img {
-    width: 100%;
-    height: 100%;
-    transition: transform 2s ease 0s;
-    object-fit: cover
-}
-
-.flink#article-container .site-card .info {
-    margin-top: 8px
-}
-
-.flink#article-container .site-card .info img {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    float: left;
-    margin-right: 8px;
-    margin-top: 2px
-}
-
-.flink#article-container .site-card .info span {
-    display: block
-}
-
-.flink#article-container .site-card .info .title {
-    font-weight: 600;
-    color: #444;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    -webkit-line-clamp: 1;
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .site-card .info .desc {
-    overflow-wrap: break-word;
-    line-height: 1.2;
-    color: #888;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    -webkit-line-clamp: 2
-}
-
-.flink#article-container .site-card .img {
-    transition: all .3s ease 0s
-}
-
-.flink#article-container .site-card .img-alt {
-    display: none
-}
-
-.flink#article-container .site-card:hover .info .title {
-    color: #ff5722
-}
-
-#recent-posts > .recent-post-item {
-    margin-top: 1rem
+#recent-posts > .recent-post-item:not(:first-child) {
+    margin-top: 1rem;
 }
 
 #recent-posts > .recent-post-item {
@@ -1608,202 +1278,202 @@ blockquote footer cite::before {
     border-radius: 12px 8px 8px 12px;
     background: var(--card-bg);
     box-shadow: var(--card-box-shadow);
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts > .recent-post-item {
-        border-radius: 12px 12px 8px 8px
+        border-radius: 12px 12px 8px 8px;
     }
 }
 
 #recent-posts > .recent-post-item:hover {
-    box-shadow: var(--card-hover-box-shadow)
+    box-shadow: var(--card-hover-box-shadow);
 }
 
 #recent-posts > .recent-post-item:hover img.post_bg {
-    transform: scale(1.1)
+    transform: scale(1.1);
 }
 
 #recent-posts > .recent-post-item .left_radius {
-    border-radius: 5px 0 0 8px
+    border-radius: 5px 0px 0px 8px;
 }
 
 #recent-posts > .recent-post-item .right_radius {
-    border-radius: 5px 0 0 8px
+    border-radius: 5px 0px 0px 8px;
 }
 
 #recent-posts > .recent-post-item.ads-wrap {
     display: block !important;
-    height: auto !important
+    height: auto !important;
 }
 
 #recent-posts > .recent-post-item .post_cover {
     overflow: hidden;
     width: 45%;
     height: 100%;
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+    -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
 }
 
 #recent-posts > .recent-post-item .post_cover img.post_bg {
     width: 100%;
     height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
+    transition: all 0.6s ease 0s;
+    object-fit: cover;
 }
 
 #recent-posts > .recent-post-item .post_cover img.post_bg:hover {
-    transform: scale(1.1)
+    transform: scale(1.1);
 }
 
 #recent-posts > .recent-post-item > .recent-post-info {
     display: inline-block;
     overflow: hidden;
-    padding: 0 40px;
-    width: 55%
+    padding: 0px 40px;
+    width: 55%;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info.no-cover {
-    width: 100%
+    width: 100%;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-title {
-    margin-bottom: .3rem;
+    margin-bottom: 0.3rem;
     color: var(--text-highlight-color);
     font-size: 1.4em;
     line-height: 1.4;
-    transition: all .2s ease-in-out 0s;
-    -webkit-line-clamp: 2
+    transition: all 0.2s ease-in-out 0s;
+    -webkit-line-clamp: 2;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-    color: #858585;
-    font-size: 90%
+    color: rgb(133, 133, 133);
+    font-size: 90%;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
-    cursor: default
+    cursor: default;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .sticky {
-    color: #ff7242
+    color: rgb(255, 114, 66);
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap i {
-    margin: 0 .2rem 0 0
+    margin: 0px 0.2rem 0px 0px;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta-label {
-    padding-right: .2rem
+    padding-right: 0.2rem;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__separator {
-    margin: 0 .3rem
+    margin: 0px 0.3rem;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__link {
-    margin: 0 .2rem
+    margin: 0px 0.2rem;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .fa-angle-right {
-    margin: 0 .2rem
+    margin: 0px 0.2rem;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
-    display: none
+    display: none;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a {
-    color: #858585
+    color: rgb(133, 133, 133);
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
-    color: #307af6;
+    color: rgb(48, 122, 246);
     cursor: pointer;
     border-radius: 4px;
-    background-color: rgba(59, 130, 255, .25)
+    background-color: rgba(59, 130, 255, 0.25);
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .content {
-    margin-top: .3rem;
-    -webkit-line-clamp: 3
+    margin-top: 0.3rem;
+    -webkit-line-clamp: 3;
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts .recent-post-item {
         -webkit-box-orient: vertical;
         flex-direction: column;
-        height: auto !important
+        height: auto !important;
     }
 
     #recent-posts .recent-post-item .post_cover {
         width: 100%;
         height: 230px;
-        border-radius: 5px 8px 0 0;
+        border-radius: 5px 8px 0px 0px;
         -webkit-box-ordinal-group: 1 !important;
-        order: 1 !important
+        order: 1 !important;
     }
 
     #recent-posts .recent-post-item .recent-post-info {
         padding: 1rem 1rem 1.5rem;
         width: 100%;
         -webkit-box-ordinal-group: 2 !important;
-        order: 2 !important
+        order: 2 !important;
     }
 
     #recent-posts .recent-post-item .recent-post-info.no-cover {
-        padding: 1.5rem 1rem
+        padding: 1.5rem 1rem;
     }
 
     #recent-posts .recent-post-item .recent-post-info .article-title {
-        font-size: 1.43em
+        font-size: 1.43em;
     }
 
     #recent-posts .recent-post-item .recent-post-info .content {
-        height: auto
+        height: auto;
     }
 }
 
 .tag-cloud-list a {
     display: inline-block;
-    padding: 0 .4rem;
-    transition: all .3s ease 0s
+    padding: 0px 0.4rem;
+    transition: all 0.3s ease 0s;
 }
 
 .tag-cloud-list a:hover {
     transform: scale(1.1);
-    color: #307af6 !important
+    color: rgb(48, 122, 246) !important;
 }
 
 @media screen and (max-width: 768px) {
     .tag-cloud-list a {
-        zoom: .85
+        zoom: 0.85;
     }
 }
 
 .tag-cloud-title {
-    font-size: 2.57em
+    font-size: 2.57em;
 }
 
 @media screen and (max-width: 768px) {
     .tag-cloud-title {
-        font-size: 2em
+        font-size: 2em;
     }
 }
 
 #error-wrap {
     position: absolute;
     top: 50%;
-    right: 0;
-    left: 0;
-    margin: 0 auto;
-    padding: 0 1rem;
+    right: 0px;
+    left: 0px;
+    margin: 0px auto;
+    padding: 0px 1rem;
     max-width: 1000px;
-    transform: translate(0, -50%)
+    transform: translate(0px, -50%);
 }
 
 #error-wrap .error-content {
@@ -1814,24 +1484,24 @@ blockquote footer cite::before {
     justify-content: center;
     -webkit-box-align: center;
     align-items: center;
-    margin: 0 1rem;
+    margin: 0px 1rem;
     height: 18rem;
     border-radius: 5px;
     background: var(--card-bg);
     box-shadow: var(--card-box-shadow);
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
 #error-wrap .error-content:hover {
-    box-shadow: var(--card-hover-box-shadow)
+    box-shadow: var(--card-hover-box-shadow);
 }
 
 @media screen and (max-width: 768px) {
     #error-wrap .error-content {
         -webkit-box-orient: vertical;
         flex-direction: column;
-        margin: 0;
-        height: 25rem
+        margin: 0px;
+        height: 25rem;
     }
 }
 
@@ -1841,9 +1511,9 @@ blockquote footer cite::before {
     height: 100%;
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
-    background-color: #307af6;
+    background-color: rgb(48, 122, 246);
     background-position: center center;
-    background-size: cover
+    background-size: cover;
 }
 
 @media screen and (max-width: 768px) {
@@ -1852,35 +1522,35 @@ blockquote footer cite::before {
         flex: 1 1 0%;
         width: 100%;
         border-top-right-radius: 8px;
-        border-bottom-left-radius: 0
+        border-bottom-left-radius: 0px;
     }
 }
 
 #error-wrap .error-content .error-info {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
-    padding: .5rem;
+    padding: 0.5rem;
     text-align: center;
     font-size: 14px;
-    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 }
 
 @media screen and (max-width: 768px) {
     #error-wrap .error-content .error-info {
         -webkit-box-flex: 1.1;
         flex: 1.1 1 0%;
-        width: 100%
+        width: 100%;
     }
 }
 
 #error-wrap .error-content .error-info .error_title {
     margin-top: -4rem;
-    font-size: 9em
+    font-size: 9em;
 }
 
 @media screen and (max-width: 768px) {
     #error-wrap .error-content .error-info .error_title {
-        margin-top: -3rem
+        margin-top: -3rem;
     }
 }
 
@@ -1888,65 +1558,42 @@ blockquote footer cite::before {
     margin-top: -3.5rem;
     word-break: break-word;
     font-size: 1.6em;
-    -webkit-line-clamp: 2
+    -webkit-line-clamp: 2;
 }
 
 #error-wrap .error-content .error-info a {
     display: inline-block;
-    margin-top: .5rem;
-    padding: .3rem 1.5rem;
+    margin-top: 0.5rem;
+    padding: 0.3rem 1.5rem;
     background: var(--btn-bg);
-    color: var(--btn-color)
+    color: var(--btn-color);
 }
 
 #error-wrap .error-content .error-info a i {
-    padding-right: .3rem
-}
-
-#aside-content {
-    width: 25%
+    padding-right: 0.3rem;
 }
 
 @media screen and (min-width: 900px) {
     #aside-content {
-        padding-left: 15px
+        padding-left: 15px;
     }
 }
 
 @media screen and (max-width: 900px) {
     #aside-content {
-        width: 100%
+        width: 100%;
     }
 }
 
-#aside-content > .card-widget:first-child {
-    margin-top: 0
-}
-
 @media screen and (max-width: 900px) {
     #aside-content > .card-widget:first-child {
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 }
 
-#aside-content .card-widget {
-    position: relative;
-    overflow: hidden;
-    margin-top: 1rem;
-    padding: 1rem 1.2rem;
-    border-radius: 8px;
-    background: var(--card-bg);
-    box-shadow: var(--card-box-shadow);
-    transition: box-shadow .3s ease 0s
-}
-
-#aside-content .card-widget:hover {
-    box-shadow: var(--card-hover-box-shadow)
-}
-
 @media screen and (max-width: 768px) {
     #aside-content .card-widget:not(#card-toc) {
-        display: none
+        display: none;
     }
 }
 
@@ -1954,262 +1601,271 @@ blockquote footer cite::before {
     width: 110px;
     height: 110px;
     border-radius: 70px;
-    transition: all .5s ease 0s
+    transition: all 0.5s ease 0s;
 }
 
 #aside-content .card-info .author-info__name {
     font-weight: 500;
-    font-size: 1.57em
+    font-size: 1.57em;
 }
 
 #aside-content .card-info .author-info__description {
-    margin-top: -.3rem
+    margin-top: -0.3rem;
 }
 
 #aside-content .card-info .card-info-data {
     display: table;
-    margin: .7rem 0 .2rem;
+    margin: 0.7rem 0px 0.2rem;
     width: 100%;
-    table-layout: fixed
+    table-layout: fixed;
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item {
-    display: table-cell
+    display: table-cell;
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item:hover {
-    background: #000;
-    border-radius: 5px
+    background: rgb(0, 0, 0);
+    border-radius: 5px;
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item a .headline {
     color: var(--font-color);
-    font-size: 1em
+    font-size: 1em;
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item a .length-num {
-    margin-top: -.3rem;
+    margin-top: -0.3rem;
     color: var(--text-highlight-color);
-    font-size: 1.4em
+    font-size: 1.4em;
 }
 
 #aside-content .card-info .card-info-social-icons {
-    margin: .3rem 0 -.3rem
+    margin: 0.3rem 0px -0.3rem;
 }
 
 #aside-content .card-info .card-info-social-icons .social-icon {
-    margin: 0 .5rem;
+    margin: 0px 0.5rem;
     color: var(--font-color);
     font-size: 1.4em;
-    cursor: pointer
+    cursor: pointer;
 }
 
 #aside-content .card-info .card-info-social-icons i {
-    transition: all .3s ease 0s;
+    transition: all 0.3s ease 0s;
     padding: 8px;
-    border-radius: 32px
+    border-radius: 32px;
 }
 
 #aside-content .card-info .card-info-social-icons i:hover {
     transform: rotate(540deg);
-    background-color: #000;
-    cursor: pointer
+    background-color: rgb(0, 0, 0);
+    cursor: pointer;
 }
 
 #aside-content .card-info #card-info-btn {
     display: block;
-    margin-top: .7rem;
+    margin-top: 0.7rem;
     background-color: var(--btn-bg);
     color: var(--btn-color);
     text-align: center;
-    line-height: 2.4
+    line-height: 2.4;
 }
 
 #aside-content .card-info #card-info-btn span {
-    padding-left: .5rem
+    padding-left: 0.5rem;
 }
 
 #aside-content .item-headline {
-    padding-bottom: .3rem;
-    font-size: 1.2em
+    padding-bottom: 0.3rem;
+    font-size: 1.2em;
 }
 
 #aside-content .item-headline span {
-    margin-left: .5rem
+    margin-left: 0.5rem;
 }
 
 @media screen and (min-width: 900px) {
     #aside-content .sticky_layout {
         position: sticky;
         top: 20px;
-        transition: top .3s ease 0s
+        transition: top 0.3s ease 0s;
     }
 }
 
 #aside-content .card-tag-cloud a {
     display: inline-block;
-    padding: 0 .3rem
+    padding: 0px 0.3rem;
 }
 
 #aside-content .card-tag-cloud a:hover {
-    background-color: #fff;
+    background-color: rgb(255, 255, 255);
     cursor: pointer;
     border-radius: 5px;
     transform: scale(1.1);
-    color: #307af6 !important
+    color: rgb(48, 122, 246) !important;
 }
 
 #aside-content .aside-list > span {
     display: block;
-    margin-bottom: .5rem;
-    text-align: center
+    margin-bottom: 0.5rem;
+    text-align: center;
 }
 
 #aside-content .aside-list > .aside-list-item {
     display: flex;
     -webkit-box-align: center;
     align-items: center;
-    padding: .3rem 0
+    padding: 0.3rem 0px;
 }
 
 #aside-content .aside-list > .aside-list-item:first-child {
-    padding-top: 0
+    padding-top: 0px;
 }
 
 #aside-content .aside-list > .aside-list-item:not(:last-child) {
-    border-bottom: 1px dashed #f5f5f5
+    border-bottom: 1px dashed rgb(245, 245, 245);
 }
 
 #aside-content .aside-list > .aside-list-item:last-child {
-    padding-bottom: 0
+    padding-bottom: 0px;
 }
 
 #aside-content .aside-list > .aside-list-item .thumbnail {
     overflow: hidden;
     width: 4.2em;
-    height: 4.2em
+    height: 4.2em;
 }
 
 #aside-content .aside-list > .aside-list-item .thumbnail > img {
     width: 100%;
     height: 100%;
-    transition: all .6s ease 0s;
-    object-fit: cover
+    transition: all 0.6s ease 0s;
+    object-fit: cover;
 }
 
 #aside-content .aside-list > .aside-list-item .thumbnail > img:hover {
-    transform: scale(1.1)
+    transform: scale(1.1);
 }
 
 #aside-content .aside-list > .aside-list-item .content {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
     padding-left: 10px;
-    word-break: break-all
+    word-break: break-all;
 }
 
 #aside-content .aside-list > .aside-list-item .content > .name {
-    -webkit-line-clamp: 1
+    -webkit-line-clamp: 1;
 }
 
-#aside-content .aside-list > .aside-list-item .content > .name, #aside-content .aside-list > .aside-list-item .content > time {
+#aside-content .aside-list > .aside-list-item .content > .name,
+#aside-content .aside-list > .aside-list-item .content > time {
     display: block;
-    color: #858585;
-    font-size: 85%
+    color: rgb(133, 133, 133);
+    font-size: 85%;
 }
 
-#aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title {
+#aside-content .aside-list > .aside-list-item .content > .comment,
+#aside-content .aside-list > .aside-list-item .content > .title {
     color: var(--font-color);
     font-size: 95%;
     line-height: 1.5;
-    -webkit-line-clamp: 2
+    -webkit-line-clamp: 2;
 }
 
-#aside-content .aside-list > .aside-list-item .content > .comment:hover, #aside-content .aside-list > .aside-list-item .content > .title:hover {
-    color: #307af6
+#aside-content .aside-list > .aside-list-item .content > .comment:hover,
+#aside-content .aside-list > .aside-list-item .content > .title:hover {
+    color: rgb(48, 122, 246);
 }
 
 #aside-content .aside-list > .aside-list-item.no-cover {
-    min-height: 4.4em
+    min-height: 4.4em;
 }
 
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
-    margin: 0;
-    padding: 0;
-    list-style: none
+#aside-content .card-archives ul.card-archive-list,
+#aside-content .card-categories ul.card-category-list {
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
     display: inline-block;
-    padding: .15rem .5rem;
+    padding: 0.15rem 0.5rem;
     width: 100%;
     color: var(--font-color);
-    transition: all .4s ease 0s;
-    border-radius: 5px
+    transition: all 0.4s ease 0s;
+    border-radius: 5px;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-    padding: .15rem .85rem;
-    background-color: #fff;
-    color: #427bee;
-    border-radius: 5px
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+    padding: 0.15rem 0.85rem;
+    background-color: rgb(255, 255, 255);
+    color: rgb(66, 123, 238);
+    border-radius: 5px;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span {
     display: inline-block;
-    vertical-align: bottom
+    vertical-align: bottom;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-    width: 80%
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+    width: 80%;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
     width: 20%;
-    text-align: right
+    text-align: right;
 }
 
 #aside-content .card-categories .card-category-list.child {
-    padding: 0 0 0 .8rem
+    padding: 0px 0px 0px 0.8rem;
 }
 
 #aside-content .card-categories .card-category-list > .parent > a .card-category-list-name {
-    width: 70% !important
+    width: 70% !important;
 }
 
 #aside-content .card-categories .card-category-list > .parent > a .card-category-list-count {
     width: calc(30% - 20px);
-    text-align: right
+    text-align: right;
 }
 
 #aside-content .card-categories .card-category-list > .parent i {
     float: right;
-    margin-right: -.35rem;
-    padding: .35rem;
-    transition: transform .3s ease 0s;
-    transform: rotate(0)
+    margin-right: -0.35rem;
+    padding: 0.35rem;
+    transition: transform 0.3s ease 0s;
+    transform: rotate(0deg);
 }
 
 #aside-content .card-categories .card-category-list > .parent i.expand {
-    transform: rotate(-90deg)
+    transform: rotate(-90deg);
 }
 
 #aside-content .card-webinfo .webinfo .webinfo-item {
     display: flex;
     -webkit-box-align: center;
     align-items: center;
-    padding: .1rem .5rem 0
+    padding: 0.1rem 0.5rem 0px;
 }
 
 #aside-content .card-webinfo .webinfo .webinfo-item div:first-child {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
-    padding-right: 1rem
+    padding-right: 1rem;
 }
 
 @media screen and (min-width: 901px) {
     #aside-content #card-toc {
-        right: 0 !important
+        right: 0px !important;
     }
 }
 
@@ -2222,200 +1878,211 @@ blockquote footer cite::before {
         max-height: calc(100% - 60px);
         width: 300px;
         opacity: 0;
-        transform-origin: right bottom
+        transform-origin: right bottom;
     }
 }
 
 #aside-content #card-toc .toc-content {
     overflow-y: auto;
-    max-height: calc(100vh - 120px)
+    max-height: calc(100vh - 120px);
 }
 
 @media screen and (max-width: 900px) {
     #aside-content #card-toc .toc-content {
-        max-height: calc(100vh - 140px)
+        max-height: calc(100vh - 140px);
     }
 }
 
 #aside-content #card-toc .toc-content .toc-child {
-    display: none
+    display: none;
 }
 
 @media screen and (max-width: 900px) {
     #aside-content #card-toc .toc-content .toc-child {
-        display: block !important
+        display: block !important;
     }
 }
 
-#aside-content #card-toc .toc-content .toc-list-item.active .toc-child {
-    display: block
+#aside-content #card-toc .toc-content .toc-item.active .toc-child {
+    display: block;
 }
 
-#aside-content #card-toc .toc-content li, #aside-content #card-toc .toc-content ol {
-    list-style: none
+#aside-content #card-toc .toc-content li,
+#aside-content #card-toc .toc-content ol {
+    list-style: none;
 }
 
 #aside-content #card-toc .toc-content > ol {
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 #aside-content #card-toc .toc-content ol {
-    margin: 0;
-    padding-left: .4rem
+    margin: 0px;
+    padding-left: 0.4rem;
 }
 
 #aside-content #card-toc .toc-content .toc-link {
     display: block;
-    padding-left: .3rem;
+    padding-left: 0.3rem;
     border-left: 3px solid transparent;
     color: var(--toc-link-color);
-    transition: all .2s ease-in-out 0s
+    transition: all 0.2s ease-in-out 0s;
 }
 
 #aside-content #card-toc .toc-content .toc-link.active {
-    border-left-color: #0061cc;
-    background: #0079ff;
-    color: #fff
+    border-left-color: rgb(0, 97, 204);
+    background: rgb(0, 121, 255);
+    color: rgb(255, 255, 255);
 }
 
 #aside-content #card-toc .toc-content::before {
     position: absolute;
-    top: .6rem;
+    top: 0.6rem;
     right: 1.2rem;
-    color: #a9a9a9;
+    color: rgb(169, 169, 169);
     content: attr(progress-percentage);
     font-style: italic;
-    font-size: 1.2rem
+    font-size: 1.2rem;
 }
 
 #aside-content :only-child > .card-widget {
-    margin-top: 0
+    margin-top: 0px;
 }
 
 #aside-content .card-more-btn {
     float: right;
-    color: inherit
+    color: inherit;
 }
 
 #aside-content .card-more-btn:hover {
-    animation: 1s ease 0s infinite normal none running more-btn-move
+    animation: 1s ease 0s infinite normal none running more-btn-move;
 }
 
 @media screen and (min-width: 900px) {
     html.hide-aside .layout {
         -webkit-box-pack: center;
-        justify-content: center
+        justify-content: center;
     }
 
     html.hide-aside .layout > .aside-content {
-        display: none
+        display: none;
     }
 
     html.hide-aside .layout > div:first-child {
-        width: 80%
+        width: 80%;
     }
 }
 
 .page .sticky_layout {
     display: flex;
     -webkit-box-orient: vertical;
-    flex-direction: column
+    flex-direction: column;
 }
 
 @-webkit-keyframes more-btn-move {
-    0%, 100% {
-        transform: translateX(0)
+
+    0%,
+    100% {
+        transform: translateX(0px);
     }
+
     50% {
-        transform: translateX(3px)
+        transform: translateX(3px);
     }
 }
 
 @keyframes more-btn-move {
-    0%, 100% {
-        transform: translateX(0)
+
+    0%,
+    100% {
+        transform: translateX(0px);
     }
+
     50% {
-        transform: translateX(3px)
+        transform: translateX(3px);
     }
 }
 
 @-webkit-keyframes toc-open {
     0% {
-        transform: scale(.7)
+        transform: scale(0.7);
     }
+
     100% {
-        transform: scale(1)
+        transform: scale(1);
     }
 }
 
 @keyframes toc-open {
     0% {
-        transform: scale(.7)
+        transform: scale(0.7);
     }
+
     100% {
-        transform: scale(1)
+        transform: scale(1);
     }
 }
 
 @-webkit-keyframes toc-close {
     0% {
-        transform: scale(1)
+        transform: scale(1);
     }
+
     100% {
-        transform: scale(.7)
+        transform: scale(0.7);
     }
 }
 
 @keyframes toc-close {
     0% {
-        transform: scale(1)
+        transform: scale(1);
     }
+
     100% {
-        transform: scale(.7)
+        transform: scale(0.7);
     }
 }
 
 #post-comment .comment-head {
-    margin-bottom: 1rem
+    margin-bottom: 1rem;
 }
 
 #post-comment .comment-head .comment-headline {
     display: inline-block;
     vertical-align: middle;
     font-weight: 700;
-    font-size: 1.43em
+    font-size: 1.43em;
 }
 
 #post-comment .comment-head #comment-switch {
     display: inline-block;
     float: right;
-    margin: .1rem auto 0;
-    padding: .2rem .8rem;
+    margin: 0.1rem auto 0px;
+    padding: 0.2rem 0.8rem;
     width: max-content;
     border-radius: 5px;
-    background: #f6f8fa
+    background: rgb(246, 248, 250);
 }
 
 #post-comment .comment-head #comment-switch .first-comment {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 #post-comment .comment-head #comment-switch .second-comment {
-    color: #ff7242
+    color: rgb(255, 114, 66);
 }
 
 #post-comment .comment-head #comment-switch .switch-btn {
     position: relative;
     display: inline-block;
-    margin: -4px .4rem 0;
+    margin: -4px 0.4rem 0px;
     width: 42px;
     height: 22px;
     border-radius: 34px;
-    background-color: #307af6;
+    background-color: rgb(48, 122, 246);
     vertical-align: middle;
     cursor: pointer;
-    transition: all .4s ease 0s
+    transition: all 0.4s ease 0s;
 }
 
 #post-comment .comment-head #comment-switch .switch-btn::before {
@@ -2425,57 +2092,57 @@ blockquote footer cite::before {
     width: 14px;
     height: 14px;
     border-radius: 50%;
-    background-color: #fff;
+    background-color: rgb(255, 255, 255);
     content: "";
-    transition: all .4s ease 0s
+    transition: all 0.4s ease 0s;
 }
 
 #post-comment .comment-head #comment-switch .switch-btn.move {
-    background-color: #ff7242
+    background-color: rgb(255, 114, 66);
 }
 
 #post-comment .comment-head #comment-switch .switch-btn.move::before {
-    transform: translateX(20px)
+    transform: translateX(20px);
 }
 
 #post-comment .comment-wrap > div:nth-child(2) {
-    display: none
+    display: none;
 }
 
 #footer {
     position: relative;
-    background: center bottom/cover local #307af6
+    background: center bottom / cover local rgb(48, 122, 246);
 }
 
 #footer-wrap {
     position: relative;
     padding: 2rem 1rem;
     color: var(--light-grey);
-    text-align: center
+    text-align: center;
 }
 
 #footer-wrap a {
     color: var(--light-grey);
     padding: 4px 12px;
-    border-radius: 5px
+    border-radius: 5px;
 }
 
 #footer-wrap a:hover {
-    background-color: #fff;
-    color: #3b82ff;
+    background-color: rgb(255, 255, 255);
+    color: rgb(59, 130, 255);
     cursor: pointer;
-    border-radius: 5px
+    border-radius: 5px;
 }
 
 #footer-wrap .footer-separator {
-    margin: 0 .2rem
+    margin: 0px 0.2rem;
 }
 
 #footer-wrap .icp-icon {
-    padding: 0 4px;
+    padding: 0px 4px;
     vertical-align: text-bottom;
     max-height: 1.4em;
-    width: auto
+    width: auto;
 }
 
 #page-header {
@@ -2484,631 +2151,551 @@ blockquote footer cite::before {
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
-    transition: all .5s ease 0s
+    transition: all 0.5s ease 0s;
 }
 
 #page-header.full_page {
     height: 20rem;
-    background-attachment: fixed
+    background-attachment: fixed;
 }
 
 #page-header.full_page #site-info {
     position: absolute;
     top: 7.8rem;
-    padding: 0 .5rem;
-    width: 100%
+    padding: 0px 0.5rem;
+    width: 100%;
 }
 
-#page-header #scroll-down .scroll-down-effects, #page-header #site-subtitle, #page-header #site-title {
+#page-header #scroll-down .scroll-down-effects,
+#page-header #site-subtitle,
+#page-header #site-title {
     text-align: center;
-    line-height: 1.5
+    line-height: 1.5;
 }
 
 #page-header #site-title {
-    margin: 0;
+    margin: 0px;
     color: var(--white);
-    font-size: 1.85em
+    font-size: 1.85em;
 }
 
 @media screen and (min-width: 768px) {
     #page-header #site-title {
-        font-size: 2.85em
+        font-size: 2.85em;
     }
 }
 
 #page-header #site-subtitle {
     color: var(--light-grey);
-    font-size: 1.15em
+    font-size: 1.15em;
 }
 
 @media screen and (min-width: 768px) {
     #page-header #site-subtitle {
-        font-size: 1.72em
+        font-size: 1.72em;
     }
 }
 
 #page-header #site_social_icons {
     display: none;
-    margin: 0 auto;
+    margin: 0px auto;
     width: 15rem;
-    text-align: center
+    text-align: center;
 }
 
 @media screen and (max-width: 768px) {
     #page-header #site_social_icons {
-        display: block
+        display: block;
     }
 }
 
 #page-header #site_social_icons .social-icon {
-    margin: 0 .5rem;
+    margin: 0px 0.5rem;
     color: var(--light-grey);
-    text-shadow: rgba(0, 0, 0, .15) .1rem .1rem .2rem;
+    text-shadow: rgba(0, 0, 0, 0.15) 0.1rem 0.1rem 0.2rem;
     font-size: 1.43em;
-    cursor: pointer
+    cursor: pointer;
 }
 
 #page-header #scroll-down {
     position: absolute;
-    bottom: 0;
+    bottom: 0px;
     width: 100%;
     cursor: pointer;
-    display: none
+    display: none;
 }
 
 #page-header #scroll-down .scroll-down-effects {
     position: relative;
     width: 100%;
     color: var(--light-grey);
-    font-size: 30px
+    font-size: 30px;
 }
 
 #page-header.not-home-page {
-    height: 20rem
+    height: 20rem;
 }
 
 @media screen and (max-width: 768px) {
     #page-header.not-home-page {
-        height: 14rem
+        height: 14rem;
     }
 }
 
 #page-header #page-site-info {
     position: absolute;
     top: 10rem;
-    padding: 0 .5rem;
-    width: 100%
+    padding: 0px 0.5rem;
+    width: 100%;
 }
 
 @media screen and (max-width: 768px) {
     #page-header #page-site-info {
-        top: 7rem
+        top: 7rem;
     }
 }
 
 #page-header.post-bg {
-    height: 20rem
+    height: 20rem;
 }
 
 @media screen and (max-width: 768px) {
     #page-header.post-bg {
-        height: 18rem
+        height: 18rem;
     }
 }
 
 #page-header.post-bg::before {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     display: block;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, .5);
-    content: ""
+    background-color: rgba(0, 0, 0, 0.5);
+    content: "";
 }
 
 #page-header #post-info {
     position: absolute;
-    padding: 0 8%;
+    padding: 0px 8%;
     width: 100%;
-    text-align: center
+    text-align: center;
 }
 
 @media screen and (max-width: 900px) {
     #page-header #post-info {
         bottom: 1.5rem;
-        text-align: left
+        text-align: left;
     }
 }
 
 @media screen and (max-width: 768px) {
     #page-header #post-info {
         bottom: 1.1rem;
-        padding: 0 1.1rem
+        padding: 0px 1.1rem;
     }
 }
 
 #page-header.not-top-img {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     height: 60px;
-    background: 0 center
+    background: 0px center;
 }
 
 #page-header.not-top-img #nav {
-    background: rgba(255, 255, 255, .8)
+    background: rgba(255, 255, 255, 0.8);
 }
 
 #page-header.not-top-img #nav a {
     color: var(--font-color);
-    text-shadow: none
+    text-shadow: none;
 }
 
 #page-header.nav-fixed #nav {
     position: fixed;
     top: -60px;
     z-index: 91;
-    background: rgba(255, 255, 255, .8);
-    transition: transform .2s ease-in-out 0s, opacity .2s ease-in-out 0s
+    background: rgba(255, 255, 255, 0.8);
+    transition: transform 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
 }
 
-#page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a {
+#page-header.nav-fixed #nav #site-name,
+#page-header.nav-fixed #nav #toggle-menu,
+#page-header.nav-fixed #nav a {
     color: var(--font-color);
-    text-shadow: none
+    text-shadow: none;
 }
 
-#page-header.nav-fixed #nav #site-name:hover, #page-header.nav-fixed #nav #toggle-menu:hover, #page-header.nav-fixed #nav a:hover {
-    color: #307af6;
+#page-header.nav-fixed #nav #site-name:hover,
+#page-header.nav-fixed #nav #toggle-menu:hover,
+#page-header.nav-fixed #nav a:hover {
+    color: rgb(48, 122, 246);
 }
 
 #page-header.nav-visible #nav {
-    transition: all .5s ease 0s;
-    transform: translate3d(0, 100%, 0)
+    transition: all 0.5s ease 0s;
+    transform: translate3d(0px, 100%, 0px);
 }
 
 #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
     top: 70px;
-    transition: top .5s ease 0s
+    transition: top 0.5s ease 0s;
 }
 
 #page h1.page-title {
-    margin: .4rem 0 1rem
+    margin: 0.4rem 0px 1rem;
 }
 
 #post > #post-info {
-    margin-bottom: 1.5rem
+    margin-bottom: 1.5rem;
 }
 
 #post > #post-info .post-title {
-    padding-bottom: .2rem;
+    padding-bottom: 0.2rem;
     border-bottom: 1px solid var(--light-grey);
-    color: var(--text-highlight-color)
+    color: var(--text-highlight-color);
 }
 
 #post > #post-info .post-title .post-edit-link {
-    float: right
+    float: right;
 }
 
-#post > #post-info #post-meta, #post > #post-info #post-meta a {
-    color: #78818a
+#post > #post-info #post-meta,
+#post > #post-info #post-meta a {
+    color: rgb(120, 129, 138);
 }
 
 #post-info .post-title {
-    margin-bottom: .4rem;
+    margin-bottom: 0.4rem;
     color: var(--white);
     font-weight: 400;
     font-size: 2.5em;
     line-height: 1.5;
-    -webkit-line-clamp: 3
+    -webkit-line-clamp: 3;
 }
 
 @media screen and (max-width: 768px) {
     #post-info .post-title {
-        font-size: 1.72em
+        font-size: 1.72em;
     }
 }
 
 #post-info .post-title .post-edit-link {
-    padding-left: .5rem
+    padding-left: 0.5rem;
 }
 
 #post-info #post-meta {
     color: var(--light-grey);
-    font-size: 95%
+    font-size: 95%;
 }
 
 @media screen and (min-width: 768px) {
     #post-info #post-meta > .meta-secondline > span:first-child {
-        display: none
+        display: none;
     }
 }
 
 @media screen and (max-width: 768px) {
     #post-info #post-meta {
-        font-size: 90%
+        font-size: 90%;
     }
 
-    #post-info #post-meta > .meta-firstline, #post-info #post-meta > .meta-secondline {
-        display: inline
+    #post-info #post-meta > .meta-firstline,
+    #post-info #post-meta > .meta-secondline {
+        display: inline;
     }
 }
 
 #post-info #post-meta .post-meta-separator {
-    margin: 0 .25rem
+    margin: 0px 0.25rem;
 }
 
 #post-info #post-meta .post-meta-icon {
-    margin-right: .2rem
+    margin-right: 0.2rem;
 }
 
 #post-info #post-meta .post-meta-label {
-    margin-right: .2rem
+    margin-right: 0.2rem;
 }
 
 #post-info #post-meta a {
     color: var(--light-grey);
-    transition: all .3s ease-out 0s
+    transition: all 0.3s ease-out 0s;
 }
 
 #post-info #post-meta a:hover {
-    color: #307af6;
-    text-decoration: underline
+    color: rgb(48, 122, 246);
+    text-decoration: underline;
 }
 
 #nav {
     position: absolute;
-    top: 0;
+    top: 0px;
     z-index: 90;
     display: flex;
     flex-wrap: wrap;
     -webkit-box-align: center;
     align-items: center;
-    padding: 0 36px;
+    padding: 0px 36px;
     width: 100%;
     height: 60px;
     font-size: 1.3em;
     opacity: 0;
-    transition: all .5s ease 0s
+    transition: all 0.5s ease 0s;
 }
 
 @media screen and (max-width: 768px) {
     #nav {
-        padding: 0 16px
+        padding: 0px 16px;
     }
 }
 
 #nav.show {
     opacity: 1;
-    filter: none
+    filter: none;
 }
 
 #nav #toggle-menu {
     display: none;
-    padding: .1rem 0 0 .3rem;
-    vertical-align: top
+    padding: 0.1rem 0px 0px 0.3rem;
+    vertical-align: top;
 }
 
 #nav #toggle-menu:hover {
-    color: var(--white)
+    color: var(--white);
 }
 
 #nav a {
     color: var(--light-grey);
-    padding: .3rem .4rem 0;
-    border-radius: 5px
+    padding: 0.3rem 0.4rem 0px;
+    border-radius: 5px;
 }
 
 #nav a:hover {
     color: var(--white);
-    background: rgba(0, 0, 0, .25)
+    background: rgba(0, 0, 0, 0.25);
 }
 
 #nav #site-name {
-    text-shadow: rgba(0, 0, 0, .15) .1rem .1rem .2rem;
+    text-shadow: rgba(0, 0, 0, 0.15) 0.1rem 0.1rem 0.2rem;
     font-weight: 700;
-    cursor: pointer
+    cursor: pointer;
 }
 
 #nav .menus_items {
-    display: inline
+    display: inline;
 }
 
 #nav .menus_items .menus_item {
     position: relative;
     display: inline-block;
-    padding: 0 .4rem 0 0
+    padding: 0px 0.4rem 0px 0px;
 }
 
 #nav .menus_items .menus_item:hover .menus_item_child {
-    display: block
+    display: block;
 }
 
 #nav .menus_items .menus_item:hover i.expand {
-    transform: rotate(180deg) !important
+    transform: rotate(180deg) !important;
 }
 
 #nav .menus_items .menus_item i.expand {
     padding: 4px;
-    transition: transform .3s ease 0s
+    transition: transform 0.3s ease 0s;
 }
 
 #nav .menus_items .menus_item .menus_item_child {
     position: absolute;
     display: none;
     margin-top: 8px;
-    padding: 0;
+    padding: 0px;
     background-color: var(--sidebar-bg);
-    box-shadow: rgba(0, 0, 0, .5) 0 5px 20px -4px;
-    animation: .3s ease .1s 1 normal both running sub_menus;
+    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 20px -4px;
+    animation: 0.3s ease 0.1s 1 normal both running sub_menus;
     border-radius: 5px;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 #nav .menus_items .menus_item .menus_item_child::before {
     position: absolute;
     top: -8px;
-    left: 0;
+    left: 0px;
     width: 100%;
     height: 20px;
-    content: ""
-}
-
-#nav .menus_items .menus_item .menus_item_child li {
-    list-style: none;
-    border-radius: 5px
-}
-
-#nav .menus_items .menus_item .menus_item_child li a {
-    display: inline-block;
-    padding: .3rem .7rem;
-    width: 100%;
-    color: var(--font-color) !important;
-    text-shadow: none !important
+    content: "";
 }
 
 #nav.hide-menu #toggle-menu {
-    display: inline-block !important
+    display: inline-block !important;
 }
 
 #nav.hide-menu #toggle-menu .site-page {
-    font-size: inherit
+    font-size: inherit;
 }
 
 #nav.hide-menu .menus_items {
     position: absolute;
-    left: 0;
+    left: 0px;
     visibility: hidden;
-    opacity: 0
+    opacity: 0;
 }
 
 #nav.hide-menu #search-button span {
-    display: none !important
+    display: none !important;
 }
 
 #nav #search-button {
     display: inline;
-    padding: 0 .4rem
+    padding: 0px 0.4rem;
 }
 
 #nav .site-page {
     position: relative;
-    padding-bottom: .3rem;
-    text-shadow: rgba(0, 0, 0, .3) .05rem .05rem .1rem;
-    font-size: .78em;
-    cursor: pointer
-}
-
-#loading-box .carplay {
-    position: fixed;
-    z-index: 1002;
-    display: flex;
-    width: 100vw;
-    height: 100vh
-}
-
-#loading-box .spinner-box {
-    position: fixed;
-    z-index: 1001;
-    display: flex;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh
-}
-
-#loading-box .spinner-box .configure-border-1 {
-    position: absolute;
-    padding: 3px;
-    width: 115px;
-    height: 115px;
-    background: #ffab91;
-    animation: 3s ease-in-out 0s infinite alternate none running configure-clockwise
-}
-
-#loading-box .spinner-box .configure-border-2 {
-    left: -115px;
-    padding: 3px;
-    width: 115px;
-    height: 115px;
-    background: #3ff9dc;
-    transform: rotate(45deg);
-    animation: 3s ease-in-out 0s infinite alternate none running configure-xclockwise
-}
-
-#loading-box .spinner-box .loading-word {
-    position: absolute;
-    color: var(--preloader-color);
-    font-size: .8rem
-}
-
-#loading-box .spinner-box .configure-core {
-    width: 100%;
-    height: 100%;
-    background-color: var(--preloader-bg)
-}
-
-#loading-box .spinner-box .pic {
-    vertical-align: middle
-}
-
-#loading-box .spinner-box .txt {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #aeaeae
-}
-
-#loading-box.loaded .loading-left-bg {
-    transition: all .5s ease 0s;
-    transform: translate(-100%, 0)
-}
-
-#loading-box.loaded .loading-right-bg {
-    transition: all .5s ease 0s;
-    transform: translate(100%, 0)
-}
-
-#loading-box.loaded .spinner-box {
-    display: none
-}
-
-#loading-box.loaded .carplay {
-    display: none
-}
-
-#loadingtxt {
-    width: 100%;
-    height: 25px;
-    line-height: 25px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-    color: #e0e0e0;
-    top: 30px
+    padding-bottom: 0.3rem;
+    text-shadow: rgba(0, 0, 0, 0.3) 0.05rem 0.05rem 0.1rem;
+    font-size: 0.78em;
+    cursor: pointer;
 }
 
 .li-style {
     width: 100%;
     height: 25px;
-    text-align: center
+    text-align: center;
 }
 
-li, ul {
+li,
+ul {
     list-style: none;
     display: block;
-    margin: 0;
-    padding: 0
+    margin: 0px;
+    padding: 0px;
 }
 
 @-webkit-keyframes configure-clockwise {
     0% {
-        transform: rotate(0)
+        transform: rotate(0deg);
     }
+
     25% {
-        transform: rotate(90deg)
+        transform: rotate(90deg);
     }
+
     50% {
-        transform: rotate(180deg)
+        transform: rotate(180deg);
     }
+
     75% {
-        transform: rotate(270deg)
+        transform: rotate(270deg);
     }
+
     100% {
-        transform: rotate(360deg)
+        transform: rotate(360deg);
     }
 }
 
 @keyframes configure-clockwise {
     0% {
-        transform: rotate(0)
+        transform: rotate(0deg);
     }
+
     25% {
-        transform: rotate(90deg)
+        transform: rotate(90deg);
     }
+
     50% {
-        transform: rotate(180deg)
+        transform: rotate(180deg);
     }
+
     75% {
-        transform: rotate(270deg)
+        transform: rotate(270deg);
     }
+
     100% {
-        transform: rotate(360deg)
+        transform: rotate(360deg);
     }
 }
 
 @-webkit-keyframes configure-xclockwise {
     0% {
-        transform: rotate(45deg)
+        transform: rotate(45deg);
     }
+
     25% {
-        transform: rotate(-45deg)
+        transform: rotate(-45deg);
     }
+
     50% {
-        transform: rotate(-135deg)
+        transform: rotate(-135deg);
     }
+
     75% {
-        transform: rotate(-225deg)
+        transform: rotate(-225deg);
     }
+
     100% {
-        transform: rotate(-315deg)
+        transform: rotate(-315deg);
     }
 }
 
 @keyframes configure-xclockwise {
     0% {
-        transform: rotate(45deg)
+        transform: rotate(45deg);
     }
+
     25% {
-        transform: rotate(-45deg)
+        transform: rotate(-45deg);
     }
+
     50% {
-        transform: rotate(-135deg)
+        transform: rotate(-135deg);
     }
+
     75% {
-        transform: rotate(-225deg)
+        transform: rotate(-225deg);
     }
+
     100% {
-        transform: rotate(-315deg)
+        transform: rotate(-315deg);
     }
 }
 
 #pagination {
     overflow: hidden;
     margin-top: 1rem;
-    width: 100%
+    width: 100%;
 }
 
 #pagination .pagination {
-    text-align: center
+    text-align: center;
 }
 
 #pagination .page-number {
     display: inline-block;
-    margin: 0 .2rem;
+    margin: 0px 0.2rem;
     min-width: 1.2rem;
     height: 1.2rem;
     text-align: center;
     line-height: 1.2rem;
-    cursor: pointer
+    cursor: pointer;
 }
 
 #pagination .page-number.current {
-    background: #0079ff;
+    background: rgb(0, 121, 255);
     color: var(--white);
     cursor: default;
-    border-radius: 5px
+    border-radius: 5px;
 }
 
-#pagination img.next-cover, #pagination img.prev-cover {
+#pagination img.next-cover,
+#pagination img.prev-cover {
     position: absolute;
     width: 100%;
     height: 100%;
-    opacity: .4;
-    transition: all .6s ease 0s;
-    object-fit: cover
+    opacity: 0.4;
+    transition: all 0.6s ease 0s;
+    object-fit: cover;
 }
 
 #pagination .pagination-info {
@@ -3116,414 +2703,452 @@ li, ul {
     top: 50%;
     padding: 1rem 2rem;
     width: 100%;
-    transform: translate(0, -50%)
+    transform: translate(0px, -50%);
 }
 
-#pagination .next_info, #pagination .prev_info {
+#pagination .next_info,
+#pagination .prev_info {
     color: var(--white);
-    font-weight: 500
+    font-weight: 500;
 }
 
 #pagination .next-post .pagination-info {
-    text-align: right
+    text-align: right;
 }
 
 #pagination .pull-full {
-    width: 100% !important
+    width: 100% !important;
 }
 
-#pagination .next-post .label, #pagination .prev-post .label {
+#pagination .next-post .label,
+#pagination .prev-post .label {
     color: var(--light-grey);
     text-transform: uppercase;
-    font-size: 90%
+    font-size: 90%;
 }
 
-#pagination .next-post, #pagination .prev-post {
-    width: 50%
+#pagination .next-post,
+#pagination .prev-post {
+    width: 50%;
 }
 
 @media screen and (max-width: 768px) {
-    #pagination .next-post, #pagination .prev-post {
-        width: 100%
+
+    #pagination .next-post,
+    #pagination .prev-post {
+        width: 100%;
     }
 }
 
-#pagination .next-post a, #pagination .prev-post a {
+#pagination .next-post a,
+#pagination .prev-post a {
     position: relative;
     display: block;
     overflow: hidden;
-    height: 150px
+    height: 150px;
 }
 
-#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
-    opacity: .8;
-    transform: scale(1.1)
+#pagination .next-post:hover img.next-cover,
+#pagination .next-post:hover img.prev-cover,
+#pagination .prev-post:hover img.next-cover,
+#pagination .prev-post:hover img.prev-cover {
+    opacity: 0.8;
+    transform: scale(1.1);
 }
 
 #pagination.pagination-post {
     margin-top: 2rem;
-    background: #000
+    background: rgb(0, 0, 0);
 }
 
 #article-container {
-    overflow-wrap: break-word
+    overflow-wrap: break-word;
 }
 
 #article-container a {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 #article-container a:hover {
-    text-decoration: underline
+    text-decoration: underline;
 }
 
 #article-container img {
     display: block;
-    margin: 0 auto .8rem
+    margin: 0px auto 0.8rem;
 }
 
 #article-container p {
-    margin: 0 0 .8rem
+    margin: 0px 0px 0.8rem;
 }
 
 #article-container iframe {
-    margin: 0 0 1rem
+    margin: 0px 0px 1rem;
 }
 
 #article-container kbd {
-    margin: 0 3px;
+    margin: 0px 3px;
     padding: 3px 5px;
-    border: 1px solid #b4b4b4;
+    border: 1px solid rgb(180, 180, 180);
     border-radius: 3px;
-    background-color: #f8f8f8;
-    box-shadow: rgba(0, 0, 0, .25) 0 1px 3px, rgba(255, 255, 255, .6) 0 2px 1px 0 inset;
-    color: #34495e;
+    background-color: rgb(248, 248, 248);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px, rgba(255, 255, 255, 0.6) 0px 2px 1px 0px inset;
+    color: rgb(52, 73, 94);
     white-space: nowrap;
     font-weight: 600;
-    font-size: .9em;
+    font-size: 0.9em;
     font-family: Monaco, "Ubuntu Mono", monospace;
-    line-height: 1em
+    line-height: 1em;
 }
 
-#article-container h1, #article-container h2, #article-container h3, #article-container h4, #article-container h5, #article-container h6 {
-    transition: all .2s ease-out 0s
+#article-container h1,
+#article-container h2,
+#article-container h3,
+#article-container h4,
+#article-container h5,
+#article-container h6 {
+    transition: all 0.2s ease-out 0s;
 }
 
-#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before {
+#article-container h1::before,
+#article-container h2::before,
+#article-container h3::before,
+#article-container h4::before,
+#article-container h5::before,
+#article-container h6::before {
     position: absolute;
-    top: calc(50% - .35rem);
-    color: #f2ba4b;
+    top: calc(50% - 0.35rem);
+    color: rgb(242, 186, 75);
     content: "";
     line-height: 1;
-    transition: all .2s ease-out 0s
+    transition: all 0.2s ease-out 0s;
 }
 
-#article-container h1:hover::before, #article-container h2:hover::before, #article-container h3:hover::before, #article-container h4:hover::before, #article-container h5:hover::before, #article-container h6:hover::before {
-    color: #307af6
+#article-container h1:hover::before,
+#article-container h2:hover::before,
+#article-container h3:hover::before,
+#article-container h4:hover::before,
+#article-container h5:hover::before,
+#article-container h6:hover::before {
+    color: rgb(48, 122, 246);
 }
 
 #article-container h1 {
-    padding-left: 1.4rem
+    padding-left: 1.4rem;
 }
 
 #article-container h1 code {
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #article-container h1::before {
     margin-left: -1.2rem;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #article-container h1:hover {
-    padding-left: 1.6rem
+    padding-left: 1.6rem;
 }
 
 #article-container h2 {
-    padding-left: 1.3rem
+    padding-left: 1.3rem;
 }
 
 #article-container h2 code {
-    font-size: .9rem
+    font-size: 0.9rem;
 }
 
 #article-container h2::before {
     margin-left: -1.1rem;
-    font-size: .9rem
+    font-size: 0.9rem;
 }
 
 #article-container h2:hover {
-    padding-left: 1.5rem
+    padding-left: 1.5rem;
 }
 
 #article-container h3 {
-    padding-left: 1.2rem
+    padding-left: 1.2rem;
 }
 
 #article-container h3 code {
-    font-size: .8rem
+    font-size: 0.8rem;
 }
 
 #article-container h3::before {
     margin-left: -1rem;
-    font-size: .8rem
+    font-size: 0.8rem;
 }
 
 #article-container h3:hover {
-    padding-left: 1.4rem
+    padding-left: 1.4rem;
 }
 
 #article-container h4 {
-    padding-left: 1.1rem
+    padding-left: 1.1rem;
 }
 
 #article-container h4 code {
-    font-size: .7rem
+    font-size: 0.7rem;
 }
 
 #article-container h4::before {
-    margin-left: -.9rem;
-    font-size: .7rem
+    margin-left: -0.9rem;
+    font-size: 0.7rem;
 }
 
 #article-container h4:hover {
-    padding-left: 1.3rem
+    padding-left: 1.3rem;
 }
 
 #article-container h5 {
-    padding-left: 1rem
+    padding-left: 1rem;
 }
 
 #article-container h5 code {
-    font-size: .6rem
+    font-size: 0.6rem;
 }
 
 #article-container h5::before {
-    margin-left: -.8rem;
-    font-size: .6rem
+    margin-left: -0.8rem;
+    font-size: 0.6rem;
 }
 
 #article-container h5:hover {
-    padding-left: 1.2rem
+    padding-left: 1.2rem;
 }
 
 #article-container h6 {
-    padding-left: 1rem
+    padding-left: 1rem;
 }
 
 #article-container h6 code {
-    font-size: .6rem
+    font-size: 0.6rem;
 }
 
 #article-container h6::before {
-    margin-left: -.8rem;
-    font-size: .6rem
+    margin-left: -0.8rem;
+    font-size: 0.6rem;
 }
 
 #article-container h6:hover {
-    padding-left: 1.2rem
+    padding-left: 1.2rem;
 }
 
-#article-container ol, #article-container ul {
-    margin-top: .4rem;
-    padding: 0 0 0 .8rem;
+#article-container ol,
+#article-container ul {
+    margin-top: 0.4rem;
+    padding: 0px 0px 0px 0.8rem;
     list-style: none;
-    counter-reset: li 0
+    counter-reset: li 0;
 }
 
 @media screen and (max-width: 768px) {
-    #article-container ol, #article-container ul {
-        padding: 0 0 0 .4rem
+
+    #article-container ol,
+    #article-container ul {
+        padding: 0px 0px 0px 0.4rem;
     }
 }
 
-#article-container ol p, #article-container ul p {
-    margin: 0 0 .5rem
+#article-container ol p,
+#article-container ul p {
+    margin: 0px 0px 0.5rem;
 }
 
-#article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
-    padding-left: .6rem
+#article-container ol ol,
+#article-container ol ul,
+#article-container ul ol,
+#article-container ul ul {
+    padding-left: 0.6rem;
 }
 
 @media screen and (max-width: 768px) {
-    #article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
-        padding-left: .2rem
+
+    #article-container ol ol,
+    #article-container ol ul,
+    #article-container ul ol,
+    #article-container ul ul {
+        padding-left: 0.2rem;
     }
 }
 
-#article-container ol li:not(.tab), #article-container ul li:not(.tab) {
+#article-container ol li:not(.tab),
+#article-container ul li:not(.tab) {
     position: relative;
-    margin: .2rem 0
+    margin: 0.2rem 0px;
 }
 
-#article-container ol li:hover::before, #article-container ul li:hover::before {
-    transform: rotate(360deg)
+#article-container ol li:hover::before,
+#article-container ul li:hover::before {
+    transform: rotate(360deg);
 }
 
-#article-container ol li::before, #article-container ul li::before {
+#article-container ol li::before,
+#article-container ul li::before {
     position: absolute;
-    top: 0;
-    left: 0;
-    background: #307af6;
-    color: #fff;
+    top: 0px;
+    left: 0px;
+    background: rgb(48, 122, 246);
+    color: rgb(255, 255, 255);
     cursor: pointer;
-    transition: all .3s ease-out 0s
+    transition: all 0.3s ease-out 0s;
 }
 
 #article-container ol > li:not(.tab) {
-    padding: .2em .2em .2em 1.8em
+    padding: 0.2em 0.2em 0.2em 1.8em;
 }
 
 #article-container ol > li::before {
-    margin-top: .65em;
+    margin-top: 0.65em;
     width: 1.45em;
     height: 1.45em;
-    border-radius: .725em;
+    border-radius: 0.725em;
     content: counter(li);
     counter-increment: li 1;
     text-align: center;
-    font-size: .85em;
-    line-height: 1.45em
+    font-size: 0.85em;
+    line-height: 1.45em;
 }
 
 #article-container ul > li:not(.tab) {
-    padding: .2em .2em .2em 1.4em
+    padding: 0.2em 0.2em 0.2em 1.4em;
 }
 
 #article-container ul > li:not(.tab):hover::before {
-    border-color: #ff7242
+    border-color: rgb(255, 114, 66);
 }
 
 #article-container ul > li:not(.tab)::before {
-    top: .78em;
-    width: .42em;
-    height: .42em;
-    border: .21em solid #307af6;
-    border-radius: .42em;
-    background: 0 0;
+    top: 0.78em;
+    width: 0.42em;
+    height: 0.42em;
+    border: 0.21em solid rgb(48, 122, 246);
+    border-radius: 0.42em;
+    background: 0px 0px;
     content: "";
-    line-height: .42em
+    line-height: 0.42em;
 }
 
 #article-container > :last-child {
-    margin-bottom: 0 !important
+    margin-bottom: 0px !important;
 }
 
 #post .tag_share .post-meta__tag-list {
-    display: inline-block
+    display: inline-block;
 }
 
 #post .tag_share .post-meta__tags {
     display: inline-block;
-    margin: .4rem .4rem .4rem 0;
-    padding: 0 .6rem;
+    margin: 0.4rem 0.4rem 0.4rem 0px;
+    padding: 0px 0.6rem;
     width: fit-content;
-    border: 1px solid #307af6;
+    border: 1px solid rgb(48, 122, 246);
     border-radius: 2rem;
-    font-size: .85em;
-    transition: all .2s ease-in-out 0s;
-    background: #307af6;
-    color: var(--white)
+    font-size: 0.85em;
+    transition: all 0.2s ease-in-out 0s;
+    background: rgb(48, 122, 246);
+    color: var(--white);
 }
 
 #post .tag_share .post-meta__tags:hover {
-    color: #307af6;
-    background: 0 0
+    color: rgb(48, 122, 246);
+    background: 0px 0px;
 }
 
 #post .tag_share .post_share {
     display: inline-block;
     float: right;
-    margin: .4rem 0;
-    width: fit-content
+    margin: 0.4rem 0px;
+    width: fit-content;
 }
 
 #post .tag_share .post_share .social-share {
-    font-size: .85em
+    font-size: 0.85em;
 }
 
 #post .tag_share .post_share .social-share .social-share-icon {
-    margin: 0 4px;
+    margin: 0px 4px;
     width: 1.85em;
     height: 1.85em;
     font-size: 1.2em;
-    line-height: 1.85em
+    line-height: 1.85em;
 }
 
 #post .post-copyright {
     position: relative;
-    margin: 2rem 0 .5rem;
-    padding: .5rem .8rem;
-    transition: box-shadow .3s ease-in-out 0s;
-    background: #16181a;
-    border-radius: 12px !important
+    margin: 2rem 0px 0.5rem;
+    padding: 0.5rem 0.8rem;
+    transition: box-shadow 0.3s ease-in-out 0s;
+    background: rgb(22, 24, 26);
+    border-radius: 12px !important;
 }
 
 #post .post-copyright::before {
     position: absolute;
-    top: .1rem;
-    right: .6rem;
-    color: #307af6;
+    top: 0.1rem;
+    right: 0.6rem;
+    color: rgb(48, 122, 246);
     content: "";
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #post .post-copyright .post-copyright-meta {
-    color: #307af6;
-    font-weight: 700
+    color: rgb(48, 122, 246);
+    font-weight: 700;
 }
 
 #post .post-copyright .post-copyright-info {
-    padding-left: .3rem
+    padding-left: 0.3rem;
 }
 
 #post .post-copyright .post-copyright-info a {
     text-decoration: none;
     word-break: break-word;
-    color: #3b82ff;
-    padding: 0 4px;
-    border-radius: 4px
+    color: rgb(59, 130, 255);
+    padding: 0px 4px;
+    border-radius: 4px;
 }
 
 #post .post-copyright .post-copyright-info a:hover {
     text-decoration: none;
-    background-color: #fff;
-    color: #3b82ff;
+    background-color: rgb(255, 255, 255);
+    color: rgb(59, 130, 255);
     cursor: pointer;
-    border-radius: 4px
+    border-radius: 4px;
 }
 
 #post .post-outdate-notice {
     position: relative;
-    margin: 0 0 1rem;
+    margin: 0px 0px 1rem;
     border-radius: 3px;
-    background-color: #ffe6e6;
-    color: #f66;
-    padding: .5em 1em .5em 2.6em;
-    border-left: 5px solid #ff8080
+    background-color: rgb(255, 230, 230);
+    color: rgb(255, 102, 102);
+    padding: 0.5em 1em 0.5em 2.6em;
+    border-left: 5px solid rgb(255, 128, 128);
 }
 
 #post .post-outdate-notice::before {
     position: absolute;
     top: 50%;
-    left: .9em;
-    color: #ff8080;
+    left: 0.9em;
+    color: rgb(255, 128, 128);
     content: "";
-    transform: translateY(-50%)
+    transform: translateY(-50%);
 }
 
 #post .ads-wrap {
-    margin: 2rem 0
+    margin: 2rem 0px;
 }
 
 .relatedPosts {
-    margin-top: 2rem
+    margin-top: 2rem;
 }
 
 .relatedPosts > .headline {
     margin-bottom: 5px;
     font-weight: 700;
-    font-size: 1.43em
+    font-size: 1.43em;
 }
 
 .relatedPosts > .relatedPosts-list > div {
@@ -3533,153 +3158,145 @@ li, ul {
     margin: 3px;
     width: calc(33.333% - 6px);
     height: 200px;
-    background: #000;
-    vertical-align: bottom
+    background: rgb(0, 0, 0);
+    vertical-align: bottom;
 }
 
 .relatedPosts > .relatedPosts-list > div:hover .cover {
-    opacity: .8;
-    transform: scale(1.1)
+    opacity: 0.8;
+    transform: scale(1.1);
 }
 
 @media screen and (max-width: 768px) {
     .relatedPosts > .relatedPosts-list > div {
         margin: 2px;
         width: calc(50% - 4px);
-        height: 150px
+        height: 150px;
     }
 }
 
 @media screen and (max-width: 600px) {
     .relatedPosts > .relatedPosts-list > div {
-        width: calc(100% - 4px)
+        width: calc(100% - 4px);
     }
 }
 
 .relatedPosts > .relatedPosts-list .cover {
     width: 100%;
     height: 100%;
-    opacity: .4;
-    transition: all .6s ease 0s;
-    object-fit: cover
+    opacity: 0.4;
+    transition: all 0.6s ease 0s;
+    object-fit: cover;
 }
 
 .relatedPosts > .relatedPosts-list .content {
     position: absolute;
     top: 50%;
-    padding: 0 1rem;
+    padding: 0px 1rem;
     width: 100%;
-    transform: translate(0, -50%)
+    transform: translate(0px, -50%);
 }
 
 .relatedPosts > .relatedPosts-list .content .date {
     color: var(--light-grey);
-    font-size: 90%
+    font-size: 90%;
 }
 
 .relatedPosts > .relatedPosts-list .content .title {
     color: var(--white);
-    -webkit-line-clamp: 2
+    -webkit-line-clamp: 2;
 }
 
 .post-reward {
     position: relative;
     margin-top: 4rem;
-    text-align: center
+    text-align: center;
 }
 
 .post-reward .reward-button {
     display: inline-block;
-    padding: .2rem 1.2rem;
+    padding: 0.2rem 1.2rem;
     background: var(--btn-bg);
     color: var(--btn-color);
     cursor: pointer;
-    transition: all .4s ease 0s;
-    border-radius: 5px
+    transition: all 0.4s ease 0s;
+    border-radius: 5px;
 }
 
 .post-reward:hover > .reward-main {
-    display: block
+    display: block;
 }
 
 .post-reward .reward-main {
     position: absolute;
     bottom: 40px;
-    left: 0;
+    left: 0px;
     z-index: 100;
     display: none;
-    padding: 0 0 15px;
-    width: 100%
+    padding: 0px 0px 15px;
+    width: 100%;
 }
 
 .post-reward .reward-main .reward-all {
     display: inline-block;
-    margin: 0;
-    padding: 1rem .5rem;
+    margin: 0px;
+    padding: 1rem 0.5rem;
     border-radius: 4px;
-    background: var(--reward-pop)
+    background: var(--reward-pop);
 }
 
 .post-reward .reward-main .reward-all::before {
     position: absolute;
     bottom: -10px;
-    left: 0;
+    left: 0px;
     width: 100%;
     height: 20px;
-    content: ""
+    content: "";
 }
 
 .post-reward .reward-main .reward-all::after {
     position: absolute;
-    right: 0;
+    right: 0px;
     bottom: 2px;
-    left: 0;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
+    left: 0px;
+    margin: 0px auto;
+    width: 0px;
+    height: 0px;
     border-top: 13px solid var(--reward-pop);
     border-right: 13px solid transparent;
     border-left: 13px solid transparent;
-    content: ""
+    content: "";
 }
 
 .post-reward .reward-main .reward-all .reward-item {
     display: inline-block;
-    padding: 0 8px;
+    padding: 0px 8px;
     list-style-type: none;
-    vertical-align: top
+    vertical-align: top;
 }
 
 .post-reward .reward-main .reward-all .reward-item img {
     width: 130px;
-    height: 130px
+    height: 130px;
 }
 
 .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-    padding-top: .4rem;
+    padding-top: 0.4rem;
     width: 130px;
-    color: #858585
-}
-
-#rightside {
-    position: fixed;
-    right: -38px;
-    bottom: 40px;
-    z-index: 100;
-    opacity: 0;
-    transition: all .5s ease 0s
+    color: rgb(133, 133, 133);
 }
 
 #rightside #rightside-config-hide {
-    transition: transform .4s ease 0s;
-    transform: translate(35px, 0)
+    transition: transform 0.4s ease 0s;
+    transform: translate(35px, 0px);
 }
 
 #rightside #rightside-config-hide.show {
-    transform: translate(0, 0) !important
+    transform: translate(0px, 0px) !important;
 }
 
-#rightside > div > a, #rightside > div > button {
+#rightside > div > a,
+#rightside > div > button {
     display: block;
     margin-bottom: 2px;
     width: 30px;
@@ -3687,26 +3304,27 @@ li, ul {
     background-color: var(--btn-bg);
     color: var(--btn-color);
     text-align: center;
-    font-size: 16px
+    font-size: 16px;
 }
 
-#rightside > div > a:hover, #rightside > div > button:hover {
-    background-color: var(--btn-hover-color)
+#rightside > div > a:hover,
+#rightside > div > button:hover {
+    background-color: var(--btn-hover-color);
 }
 
 #rightside #mobile-toc-button {
-    display: none
+    display: none;
 }
 
 @media screen and (max-width: 900px) {
     #rightside #mobile-toc-button {
-        display: block
+        display: block;
     }
 }
 
 @media screen and (max-width: 900px) {
     #rightside #hide-aside-btn {
-        display: none
+        display: none;
     }
 }
 
@@ -3716,718 +3334,654 @@ li, ul {
     display: none;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, .8)
+    background: rgba(0, 0, 0, 0.8);
 }
 
 #sidebar #sidebar-menus {
     position: fixed;
-    top: 0;
+    top: 0px;
     right: -300px;
     z-index: 103;
     overflow: hidden auto;
     width: 300px;
     height: 100%;
     background: var(--sidebar-bg);
-    transition: all .5s ease 0s
+    transition: all 0.5s ease 0s;
 }
 
 #sidebar #sidebar-menus.open {
-    transform: translate3d(-100%, 0, 0)
+    transform: translate3d(-100%, 0px, 0px);
 }
 
 #sidebar #sidebar-menus > .author-avatar {
-    padding: 1.3rem 1.5rem 0;
-    text-align: center
+    padding: 1.3rem 1.5rem 0px;
+    text-align: center;
 }
 
 #sidebar #sidebar-menus > .author-avatar img {
     width: 110px;
     height: 110px;
     border-radius: 70px;
-    transition: all .5s ease 0s
+    transition: all 0.5s ease 0s;
 }
 
 #sidebar #sidebar-menus > .author-avatar img:hover {
-    transform: rotate(360deg)
+    transform: rotate(360deg);
 }
 
 #sidebar #sidebar-menus .site-data {
     display: table;
-    padding: .6rem .5rem 0;
+    padding: 0.6rem 0.5rem 0px;
     width: 100%;
-    table-layout: fixed
+    table-layout: fixed;
 }
 
 #sidebar #sidebar-menus .site-data .data-item {
-    display: table-cell
+    display: table-cell;
 }
 
 #sidebar #sidebar-menus .site-data .data-item .data-item-link .length-num {
     color: var(--text-highlight-color);
-    font-size: 1.28em
+    font-size: 1.28em;
 }
 
 #sidebar #sidebar-menus .site-data .data-item .data-item-link .headline {
-    color: var(--font-color)
+    color: var(--font-color);
 }
 
 #sidebar #sidebar-menus hr {
-    margin: 1rem auto
+    margin: 1rem auto;
 }
 
 #sidebar #sidebar-menus .menus_items {
-    padding: 0 .5rem 2rem
+    padding: 0px 0.5rem 2rem;
 }
 
 #sidebar #sidebar-menus .menus_items .site-page {
     position: relative;
     display: block;
-    padding: .3rem 1.5rem;
+    padding: 0.3rem 1.5rem;
     color: var(--font-color);
     font-size: 1.15em;
-    cursor: pointer
+    cursor: pointer;
 }
 
 #sidebar #sidebar-menus .menus_items .site-page i:first-child {
     width: 25%;
-    text-align: left
+    text-align: left;
 }
 
 #sidebar #sidebar-menus .menus_items .site-page span {
-    width: 75%
+    width: 75%;
 }
 
 #sidebar #sidebar-menus .menus_items .site-page span:hover {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 #sidebar #sidebar-menus .menus_items .expand {
     position: absolute;
-    top: .78em;
-    right: .4rem;
-    transition: transform .3s ease 0s
+    top: 0.78em;
+    right: 0.4rem;
+    transition: transform 0.3s ease 0s;
 }
 
 #sidebar #sidebar-menus .menus_items .expand.hide {
-    transform: rotate(90deg) !important
+    transform: rotate(90deg) !important;
 }
 
 #sidebar #sidebar-menus .menus_items .menus_item_child {
-    margin: 0;
-    list-style: none
+    margin: 0px;
+    list-style: none;
 }
 
-#vcomment, #waline {
-    font-size: 1.1em
+#vcomment,
+#waline {
+    font-size: 1.1em;
 }
 
-#vcomment .vbtn, #waline .vbtn {
+#vcomment .vbtn,
+#waline .vbtn {
     border: none;
     background: var(--btn-bg);
-    color: var(--btn-color)
+    color: var(--btn-color);
 }
 
-#vcomment .vbtn:hover, #waline .vbtn:hover {
-    background: var(--btn-hover-color)
+#vcomment .vbtn:hover,
+#waline .vbtn:hover {
+    background: var(--btn-hover-color);
 }
 
-#vcomment .vimg, #waline .vimg {
-    transition: all .3s ease 0s
+#vcomment .vimg,
+#waline .vimg {
+    transition: all 0.3s ease 0s;
 }
 
-#vcomment .vimg:hover, #waline .vimg:hover {
-    transform: rotate(360deg)
+#vcomment .vimg:hover,
+#waline .vimg:hover {
+    transform: rotate(360deg);
 }
 
-#vcomment .vcards .vcard .vcontent.expand::after, #vcomment .vcards .vcard .vcontent.expand::before, #waline .vcards .vcard .vcontent.expand::after, #waline .vcards .vcard .vcontent.expand::before {
-    z-index: 22
+#vcomment .vcards .vcard .vcontent.expand::after,
+#vcomment .vcards .vcard .vcontent.expand::before,
+#waline .vcards .vcard .vcontent.expand::after,
+#waline .vcards .vcard .vcontent.expand::before {
+    z-index: 22;
 }
 
 .fireworks {
     position: fixed;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     z-index: 9999;
-    pointer-events: none
+    pointer-events: none;
 }
 
 .medium-zoom-image--opened {
     z-index: 99999 !important;
-    margin: 0 !important
+    margin: 0px !important;
 }
 
 .medium-zoom-overlay {
-    z-index: 99999 !important
+    z-index: 99999 !important;
 }
 
 .mermaid {
     overflow: auto;
-    margin: 0 0 1rem;
-    background: #fff;
+    margin: 0px 0px 1rem;
+    background: rgb(255, 255, 255);
     text-align: center;
     opacity: 0;
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
 .mermaid[data-processed] {
     opacity: 1;
-    filter: none
+    filter: none;
 }
 
-.fb-comments iframe, .utterances {
-    width: 100% !important
+.fb-comments iframe,
+.utterances {
+    width: 100% !important;
 }
 
 #gitalk-container .gt-meta {
-    margin: 0 0 .8em;
-    padding: .3rem 0 .8em
+    margin: 0px 0px 0.8em;
+    padding: 0.3rem 0px 0.8em;
 }
 
 .katex-wrap {
-    overflow: auto
+    overflow: auto;
 }
 
 .katex-wrap::-webkit-scrollbar {
-    display: none
+    display: none;
 }
 
 .mathjax-overflow {
-    overflow: auto hidden
+    overflow: auto hidden;
 }
 
-mjx-container[jax=CHTML][display=true] {
+mjx-container[jax="CHTML"][display="true"] {
     overflow: auto hidden;
-    padding-bottom: .3rem
+    padding-bottom: 0.3rem;
+}
+
+#article-container .aplayer {
+    margin: 0px 0px 1rem;
+}
+
+#article-container .aplayer ol,
+#article-container .aplayer ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+#article-container .aplayer ol li,
+#article-container .aplayer ul li {
+    margin: 0px;
+    padding: 0px 15px;
+}
+
+#article-container .aplayer ol li::before,
+#article-container .aplayer ul li::before {
+    content: none;
 }
 
 #article-container .btn-center {
-    margin: 0 0 1rem;
-    text-align: center
+    margin: 0px 0px 1rem;
+    text-align: center;
 }
 
 #article-container .btn-beautify {
     display: inline-block;
-    margin: 0 .2rem .3rem;
-    padding: 0 1rem;
-    background-color: #777;
-    color: #fff;
-    line-height: 2
+    margin: 0px 0.2rem 0.3rem;
+    padding: 0px 1rem;
+    background-color: rgb(119, 119, 119);
+    color: rgb(255, 255, 255);
+    line-height: 2;
 }
 
 #article-container .btn-beautify i + span {
-    margin-left: .3rem
+    margin-left: 0.3rem;
 }
 
 #article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
-    margin: 0 .2rem 1rem
+    margin: 0px 0.2rem 1rem;
 }
 
 #article-container .btn-beautify.block {
     display: block;
-    margin: 0 0 1rem;
-    width: fit-content
+    margin: 0px 0px 1rem;
+    width: fit-content;
 }
 
 #article-container .btn-beautify.block.center {
-    margin: 0 auto 1rem
+    margin: 0px auto 1rem;
 }
 
 #article-container .btn-beautify.block.right {
-    margin: 0 0 1rem auto
+    margin: 0px 0px 1rem auto;
 }
 
 #article-container .btn-beautify.larger {
-    padding: .3rem 1.3rem
+    padding: 0.3rem 1.3rem;
 }
 
 #article-container .btn-beautify:hover {
-    text-decoration: none
+    text-decoration: none;
 }
 
 #article-container .btn-beautify.blue {
-    background-color: #428bca
+    background-color: rgb(66, 139, 202);
 }
 
 #article-container .btn-beautify.pink {
-    background-color: #ff69b4
+    background-color: rgb(255, 105, 180);
 }
 
 #article-container .btn-beautify.red {
-    background-color: red
+    background-color: red;
 }
 
 #article-container .btn-beautify.purple {
-    background-color: #6f42c1
+    background-color: rgb(111, 66, 193);
 }
 
 #article-container .btn-beautify.orange {
-    background-color: #ff8c00
+    background-color: rgb(255, 140, 0);
 }
 
 #article-container .btn-beautify.green {
-    background-color: #5cb85c
+    background-color: rgb(92, 184, 92);
 }
 
 #article-container .btn-beautify.outline {
-    border: 1px solid #777;
+    border: 1px solid rgb(119, 119, 119);
     background-color: transparent;
-    color: #777;
-    transition: all .3s ease 0s
+    color: rgb(119, 119, 119);
+    transition: all 0.3s ease 0s;
 }
 
 #article-container .btn-beautify.outline.button--animated::before {
-    background: #777
+    background: rgb(119, 119, 119);
 }
 
 #article-container .btn-beautify.outline:hover {
-    color: #fff !important
+    color: rgb(255, 255, 255) !important;
 }
 
 #article-container .btn-beautify.outline.blue {
-    border-color: #428bca;
-    color: #428bca
+    border-color: rgb(66, 139, 202);
+    color: rgb(66, 139, 202);
 }
 
 #article-container .btn-beautify.outline.blue.button--animated::before {
-    background: #428bca
+    background: rgb(66, 139, 202);
 }
 
 #article-container .btn-beautify.outline.pink {
-    border-color: #ff69b4;
-    color: #ff69b4
+    border-color: rgb(255, 105, 180);
+    color: rgb(255, 105, 180);
 }
 
 #article-container .btn-beautify.outline.pink.button--animated::before {
-    background: #ff69b4
+    background: rgb(255, 105, 180);
 }
 
 #article-container .btn-beautify.outline.red {
     border-color: red;
-    color: red
+    color: red;
 }
 
 #article-container .btn-beautify.outline.red.button--animated::before {
-    background: red
+    background: red;
 }
 
 #article-container .btn-beautify.outline.purple {
-    border-color: #6f42c1;
-    color: #6f42c1
+    border-color: rgb(111, 66, 193);
+    color: rgb(111, 66, 193);
 }
 
 #article-container .btn-beautify.outline.purple.button--animated::before {
-    background: #6f42c1
+    background: rgb(111, 66, 193);
 }
 
 #article-container .btn-beautify.outline.orange {
-    border-color: #ff8c00;
-    color: #ff8c00
+    border-color: rgb(255, 140, 0);
+    color: rgb(255, 140, 0);
 }
 
 #article-container .btn-beautify.outline.orange.button--animated::before {
-    background: #ff8c00
+    background: rgb(255, 140, 0);
 }
 
 #article-container .btn-beautify.outline.green {
-    border-color: #5cb85c;
-    color: #5cb85c
+    border-color: rgb(92, 184, 92);
+    color: rgb(92, 184, 92);
 }
 
 #article-container .btn-beautify.outline.green.button--animated::before {
-    background: #5cb85c
-}
-
-figure.gallery-group {
-    position: relative;
-    float: left;
-    overflow: hidden;
-    margin: .3rem .2rem;
-    width: calc(50% - .4rem);
-    height: 250px;
-    border-radius: 5px;
-    background: #000;
-    transform: translate3d(0, 0, 0)
-}
-
-@media screen and (max-width: 600px) {
-    figure.gallery-group {
-        width: calc(100% - .4rem)
-    }
-}
-
-figure.gallery-group:hover img {
-    opacity: .4;
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group:hover .gallery-group-name::after {
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group:hover p {
-    opacity: 1;
-    filter: none;
-    transform: translate3d(0, 0, 0)
-}
-
-figure.gallery-group img {
-    position: relative;
-    max-width: none;
-    width: calc(100% + 20px);
-    height: 250px;
-    backface-visibility: hidden;
-    opacity: .8;
-    transition: opacity .35s ease 0s, transform .35s ease 0s;
-    transform: translate3d(-10px, 0, 0);
-    object-fit: cover;
-    margin: 0 !important
-}
-
-figure.gallery-group figcaption {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 1.5rem;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    text-transform: uppercase;
-    backface-visibility: hidden
-}
-
-figure.gallery-group figcaption > a {
-    position: absolute;
-    inset: 0;
-    z-index: 1000;
-    opacity: 0
-}
-
-figure.gallery-group p {
-    margin: 0;
-    padding: .4rem 0 0;
-    letter-spacing: 1px;
-    font-size: 1.1em;
-    line-height: 1.5;
-    opacity: 0;
-    transition: opacity .35s ease 0s, transform .35s ease 0s;
-    transform: translate3d(100%, 0, 0);
-    -webkit-line-clamp: 4
-}
-
-figure.gallery-group .gallery-group-name {
-    position: relative;
-    margin: 0;
-    padding: .4rem 0;
-    font-weight: 700;
-    font-size: 1.65em;
-    line-height: 1.5;
-    -webkit-line-clamp: 2
-}
-
-figure.gallery-group .gallery-group-name::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: #fff;
-    content: "";
-    transition: transform .35s ease 0s;
-    transform: translate3d(-100%, 0, 0)
+    background: rgb(92, 184, 92);
 }
 
 .gallery-group-main {
     overflow: auto;
-    padding: 0 0 .8rem
+    padding: 0px 0px 0.8rem;
 }
 
 .justified-gallery {
-    margin: 0 0 .8rem
+    margin: 0px 0px 0.8rem;
 }
 
 .justified-gallery img {
-    opacity: 0
+    opacity: 0;
 }
 
 .justified-gallery .img-alt {
-    display: none
+    display: none;
 }
 
 .justified-gallery .fancybox {
     width: auto;
-    text-align: inherit
+    text-align: inherit;
 }
 
 blockquote.pullquote {
     position: relative;
     max-width: 45%;
-    font-size: 110%
+    font-size: 110%;
 }
 
 blockquote.pullquote.left {
     float: left;
-    margin: 1em .5em 0 0
+    margin: 1em 0.5em 0px 0px;
 }
 
 blockquote.pullquote.right {
     float: right;
-    margin: 1em 0 0 .5rem
+    margin: 1em 0px 0px 0.5rem;
 }
 
 .video-container {
     position: relative;
     overflow: hidden;
-    margin-bottom: .8rem;
+    margin-bottom: 0.8rem;
     padding-top: 56.25%;
-    height: 0
+    height: 0px;
 }
 
 .video-container iframe {
     position: absolute;
-    top: 0;
-    left: 0;
-    margin-top: 0;
+    top: 0px;
+    left: 0px;
+    margin-top: 0px;
     width: 100%;
-    height: 100%
+    height: 100%;
 }
 
-.hide-block > .hide-button, .hide-inline > .hide-button {
+.hide-block > .hide-button,
+.hide-inline > .hide-button {
     display: inline-block;
-    padding: .3rem 1rem;
-    background: #307af6;
-    color: var(--white)
+    padding: 0.3rem 1rem;
+    background: rgb(48, 122, 246);
+    color: var(--white);
 }
 
-.hide-block > .hide-button.open, .hide-inline > .hide-button.open {
-    display: none
+.hide-block > .hide-button.open,
+.hide-inline > .hide-button.open {
+    display: none;
 }
 
-.hide-block > .hide-button.open + div, .hide-inline > .hide-button.open + div {
-    display: block
+.hide-block > .hide-button.open + div,
+.hide-inline > .hide-button.open + div {
+    display: block;
 }
 
-.hide-block > .hide-button.open + span, .hide-inline > .hide-button.open + span {
-    display: inline
+.hide-block > .hide-button.open + span,
+.hide-inline > .hide-button.open + span {
+    display: inline;
 }
 
-.hide-block > .hide-content, .hide-inline > .hide-content {
-    display: none
+.hide-block > .hide-content,
+.hide-inline > .hide-content {
+    display: none;
 }
 
 .hide-inline > .hide-button {
-    margin: 0 .3rem
+    margin: 0px 0.3rem;
 }
 
 .hide-inline > .hide-content {
-    margin: 0 .3rem
+    margin: 0px 0.3rem;
 }
 
 .hide-block {
-    margin: 0 0 .8rem
+    margin: 0px 0px 0.8rem;
 }
 
 .hide-toggle {
     margin-bottom: 1rem;
-    border: 1px solid #f0f0f0
+    border: 1px solid rgb(240, 240, 240);
 }
 
 .hide-toggle > .hide-button {
-    padding: .3rem .5rem;
-    background: #f0f0f0;
-    color: #1f2d3d;
-    cursor: pointer
+    padding: 0.3rem 0.5rem;
+    background: rgb(240, 240, 240);
+    color: rgb(31, 45, 61);
+    cursor: pointer;
 }
 
 .hide-toggle > .hide-button > i {
     font-size: 1.2em;
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
 .hide-toggle > .hide-button.open i {
-    transform: rotate(90deg)
+    transform: rotate(90deg);
 }
 
 .hide-toggle > .hide-button.open + div {
-    display: block
+    display: block;
 }
 
 .hide-toggle > .hide-content {
     display: none;
-    margin: 1.5rem 1.2rem
+    margin: 1.5rem 1.2rem;
 }
 
 #article-container .inline-img {
     display: inline;
-    margin: 0 3px;
+    margin: 0px 3px;
     height: 1.1em;
-    vertical-align: text-bottom
+    vertical-align: text-bottom;
 }
 
 .hl-label {
     padding: 2px 4px;
     border-radius: 3px;
-    color: #fff
+    color: rgb(255, 255, 255);
 }
 
 .hl-label.default {
-    background-color: #777
+    background-color: rgb(119, 119, 119);
 }
 
 .hl-label.blue {
-    background-color: #428bca
+    background-color: rgb(66, 139, 202);
 }
 
 .hl-label.pink {
-    background-color: #ff69b4
+    background-color: rgb(255, 105, 180);
 }
 
 .hl-label.red {
-    background-color: red
+    background-color: red;
 }
 
 .hl-label.purple {
-    background-color: #6f42c1
+    background-color: rgb(111, 66, 193);
 }
 
 .hl-label.orange {
-    background-color: #ff8c00
+    background-color: rgb(255, 140, 0);
 }
 
 .hl-label.green {
-    background-color: #5cb85c
+    background-color: rgb(92, 184, 92);
 }
 
 .note {
     position: relative;
-    margin: 0 0 1rem;
+    margin: 0px 0px 1rem;
     padding: 15px;
-    border-radius: 3px
+    border-radius: 3px;
 }
 
 .note.icon {
-    padding-left: 2.25rem
+    padding-left: 2.25rem;
 }
 
 .note > .note-icon {
     position: absolute;
-    top: calc(50% - .4rem);
-    left: .7rem;
-    font-size: larger
+    top: calc(50% - 0.4rem);
+    left: 0.7rem;
+    font-size: larger;
 }
 
 .note.blue:not(.disabled) {
-    border-left-color: #428bca !important
+    border-left-color: rgb(66, 139, 202) !important;
 }
 
 .note.blue:not(.disabled).modern {
-    color: #428bca;
-    border-left-color: transparent !important
+    color: rgb(66, 139, 202);
+    border-left-color: transparent !important;
 }
 
 .note.blue:not(.disabled):not(.simple) {
-    background: #e3eef7 !important
+    background: rgb(227, 238, 247) !important;
 }
 
 .note.blue > .note-icon {
-    color: #428bca
+    color: rgb(66, 139, 202);
 }
 
 .note.pink:not(.disabled) {
-    border-left-color: #ff69b4 !important
+    border-left-color: rgb(255, 105, 180) !important;
 }
 
 .note.pink:not(.disabled).modern {
-    color: #ff69b4;
-    border-left-color: transparent !important
+    color: rgb(255, 105, 180);
+    border-left-color: transparent !important;
 }
 
 .note.pink:not(.disabled):not(.simple) {
-    background: #ffe9f4 !important
+    background: rgb(255, 233, 244) !important;
 }
 
 .note.pink > .note-icon {
-    color: #ff69b4
+    color: rgb(255, 105, 180);
 }
 
 .note.red:not(.disabled) {
-    border-left-color: red !important
+    border-left-color: red !important;
 }
 
 .note.red:not(.disabled).modern {
     color: red;
-    border-left-color: transparent !important
+    border-left-color: transparent !important;
 }
 
 .note.red:not(.disabled):not(.simple) {
-    background: #ffd9d9 !important
+    background: rgb(255, 217, 217) !important;
 }
 
 .note.red > .note-icon {
-    color: red
+    color: red;
 }
 
 .note.purple:not(.disabled) {
-    border-left-color: #6f42c1 !important
+    border-left-color: rgb(111, 66, 193) !important;
 }
 
 .note.purple:not(.disabled).modern {
-    color: #6f42c1;
-    border-left-color: transparent !important
+    color: rgb(111, 66, 193);
+    border-left-color: transparent !important;
 }
 
 .note.purple:not(.disabled):not(.simple) {
-    background: #e9e3f6 !important
+    background: rgb(233, 227, 246) !important;
 }
 
 .note.purple > .note-icon {
-    color: #6f42c1
+    color: rgb(111, 66, 193);
 }
 
 .note.orange:not(.disabled) {
-    border-left-color: #ff8c00 !important
+    border-left-color: rgb(255, 140, 0) !important;
 }
 
 .note.orange:not(.disabled).modern {
-    color: #ff8c00;
-    border-left-color: transparent !important
+    color: rgb(255, 140, 0);
+    border-left-color: transparent !important;
 }
 
 .note.orange:not(.disabled):not(.simple) {
-    background: #ffeed9 !important
+    background: rgb(255, 238, 217) !important;
 }
 
 .note.orange > .note-icon {
-    color: #ff8c00
+    color: rgb(255, 140, 0);
 }
 
 .note.green:not(.disabled) {
-    border-left-color: #5cb85c !important
+    border-left-color: rgb(92, 184, 92) !important;
 }
 
 .note.green:not(.disabled).modern {
-    color: #5cb85c;
-    border-left-color: transparent !important
+    color: rgb(92, 184, 92);
+    border-left-color: transparent !important;
 }
 
 .note.green:not(.disabled):not(.simple) {
-    background: #e7f4e7 !important
+    background: rgb(231, 244, 231) !important;
 }
 
 .note.green > .note-icon {
-    color: #5cb85c
+    color: rgb(92, 184, 92);
 }
 
 .note.simple {
     border-width: 1px 1px 1px 5px;
     border-style: solid;
-    border-color: #eee;
-    border-image: initial
+    border-color: rgb(238, 238, 238);
+    border-image: initial;
 }
 
 .note.modern {
-    background-color: #f5f5f5;
-    color: #4c4948;
-    border: 1px solid transparent !important
+    background-color: rgb(245, 245, 245);
+    color: rgb(76, 73, 72);
+    border: 1px solid transparent !important;
 }
 
 .note.flat {
@@ -4435,339 +3989,381 @@ blockquote.pullquote.right {
     border-right: initial;
     border-bottom: initial;
     border-image: initial;
-    border-left: 5px solid #eee;
-    background-color: #f9f9f9;
-    color: #4c4948
+    border-left: 5px solid rgb(238, 238, 238);
+    background-color: rgb(249, 249, 249);
+    color: rgb(76, 73, 72);
 }
 
-.note h2, .note h3, .note h4, .note h5, .note h6 {
+.note h2,
+.note h3,
+.note h4,
+.note h5,
+.note h6 {
     margin-top: 3px;
-    margin-bottom: 0;
+    margin-bottom: 0px;
     border-bottom: initial;
-    padding-top: 0 !important
+    padding-top: 0px !important;
 }
 
-.note blockquote:first-child, .note img:first-child, .note ol:first-child, .note p:first-child, .note pre:first-child, .note table:first-child, .note ul:first-child {
-    margin-top: 0 !important
+.note blockquote:first-child,
+.note img:first-child,
+.note ol:first-child,
+.note p:first-child,
+.note pre:first-child,
+.note table:first-child,
+.note ul:first-child {
+    margin-top: 0px !important;
 }
 
-.note blockquote:last-child, .note img:last-child, .note ol:last-child, .note p:last-child, .note pre:last-child, .note table:last-child, .note ul:last-child {
-    margin-bottom: 0 !important
+.note blockquote:last-child,
+.note img:last-child,
+.note ol:last-child,
+.note p:last-child,
+.note pre:last-child,
+.note table:last-child,
+.note ul:last-child {
+    margin-bottom: 0px !important;
 }
 
 .note:not(.no-icon) {
-    padding-left: 2.25rem
+    padding-left: 2.25rem;
 }
 
 .note:not(.no-icon)::before {
     position: absolute;
-    top: calc(50% - .8rem);
-    left: .7rem;
-    font-size: larger
+    top: calc(50% - 0.8rem);
+    left: 0.7rem;
+    font-size: larger;
 }
 
 .note.default.flat {
-    background: #f7f7f7
+    background: rgb(247, 247, 247);
 }
 
 .note.default.modern {
-    border-color: #e1e1e1;
-    background: #f3f3f3;
-    color: #666
+    border-color: rgb(225, 225, 225);
+    background: rgb(243, 243, 243);
+    color: rgb(102, 102, 102);
 }
 
 .note.default.modern a:not(.btn) {
-    color: #666
+    color: rgb(102, 102, 102);
 }
 
 .note.default.modern a:not(.btn):hover {
-    color: #454545
+    color: rgb(69, 69, 69);
 }
 
 .note.default:not(.modern) {
-    border-left-color: #777
+    border-left-color: rgb(119, 119, 119);
 }
 
-.note.default:not(.modern) h2, .note.default:not(.modern) h3, .note.default:not(.modern) h4, .note.default:not(.modern) h5, .note.default:not(.modern) h6 {
-    color: #777
+.note.default:not(.modern) h2,
+.note.default:not(.modern) h3,
+.note.default:not(.modern) h4,
+.note.default:not(.modern) h5,
+.note.default:not(.modern) h6 {
+    color: rgb(119, 119, 119);
 }
 
 .note.default:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.default:not(.no-icon):not(.modern)::before {
-    color: #777
+    color: rgb(119, 119, 119);
 }
 
 .note.primary.flat {
-    background: #f5f0fa
+    background: rgb(245, 240, 250);
 }
 
 .note.primary.modern {
-    border-color: #e1c2ff;
-    background: #f3daff;
-    color: #6f42c1
+    border-color: rgb(225, 194, 255);
+    background: rgb(243, 218, 255);
+    color: rgb(111, 66, 193);
 }
 
 .note.primary.modern a:not(.btn) {
-    color: #6f42c1
+    color: rgb(111, 66, 193);
 }
 
 .note.primary.modern a:not(.btn):hover {
-    color: #453298
+    color: rgb(69, 50, 152);
 }
 
 .note.primary:not(.modern) {
-    border-left-color: #6f42c1
+    border-left-color: rgb(111, 66, 193);
 }
 
-.note.primary:not(.modern) h2, .note.primary:not(.modern) h3, .note.primary:not(.modern) h4, .note.primary:not(.modern) h5, .note.primary:not(.modern) h6 {
-    color: #6f42c1
+.note.primary:not(.modern) h2,
+.note.primary:not(.modern) h3,
+.note.primary:not(.modern) h4,
+.note.primary:not(.modern) h5,
+.note.primary:not(.modern) h6 {
+    color: rgb(111, 66, 193);
 }
 
 .note.primary:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.primary:not(.no-icon):not(.modern)::before {
-    color: #6f42c1
+    color: rgb(111, 66, 193);
 }
 
 .note.info.flat {
-    background: #eef7fa
+    background: rgb(238, 247, 250);
 }
 
 .note.info.modern {
-    border-color: #b3e5ef;
-    background: #d9edf7;
-    color: #31708f
+    border-color: rgb(179, 229, 239);
+    background: rgb(217, 237, 247);
+    color: rgb(49, 112, 143);
 }
 
 .note.info.modern a:not(.btn) {
-    color: #31708f
+    color: rgb(49, 112, 143);
 }
 
 .note.info.modern a:not(.btn):hover {
-    color: #215761
+    color: rgb(33, 87, 97);
 }
 
 .note.info:not(.modern) {
-    border-left-color: #428bca
+    border-left-color: rgb(66, 139, 202);
 }
 
-.note.info:not(.modern) h2, .note.info:not(.modern) h3, .note.info:not(.modern) h4, .note.info:not(.modern) h5, .note.info:not(.modern) h6 {
-    color: #428bca
+.note.info:not(.modern) h2,
+.note.info:not(.modern) h3,
+.note.info:not(.modern) h4,
+.note.info:not(.modern) h5,
+.note.info:not(.modern) h6 {
+    color: rgb(66, 139, 202);
 }
 
 .note.info:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.info:not(.no-icon):not(.modern)::before {
-    color: #428bca
+    color: rgb(66, 139, 202);
 }
 
 .note.success.flat {
-    background: #eff8f0
+    background: rgb(239, 248, 240);
 }
 
 .note.success.modern {
-    border-color: #d0e6be;
-    background: #dff0d8;
-    color: #3c763d
+    border-color: rgb(208, 230, 190);
+    background: rgb(223, 240, 216);
+    color: rgb(60, 118, 61);
 }
 
 .note.success.modern a:not(.btn) {
-    color: #3c763d
+    color: rgb(60, 118, 61);
 }
 
 .note.success.modern a:not(.btn):hover {
-    color: #32562c
+    color: rgb(50, 86, 44);
 }
 
 .note.success:not(.modern) {
-    border-left-color: #5cb85c
+    border-left-color: rgb(92, 184, 92);
 }
 
-.note.success:not(.modern) h2, .note.success:not(.modern) h3, .note.success:not(.modern) h4, .note.success:not(.modern) h5, .note.success:not(.modern) h6 {
-    color: #5cb85c
+.note.success:not(.modern) h2,
+.note.success:not(.modern) h3,
+.note.success:not(.modern) h4,
+.note.success:not(.modern) h5,
+.note.success:not(.modern) h6 {
+    color: rgb(92, 184, 92);
 }
 
 .note.success:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.success:not(.no-icon):not(.modern)::before {
-    color: #5cb85c
+    color: rgb(92, 184, 92);
 }
 
 .note.warning.flat {
-    background: #fdf8ea
+    background: rgb(253, 248, 234);
 }
 
 .note.warning.modern {
-    border-color: #fae4cd;
-    background: #fcf4e3;
-    color: #8a6d3b
+    border-color: rgb(250, 228, 205);
+    background: rgb(252, 244, 227);
+    color: rgb(138, 109, 59);
 }
 
 .note.warning.modern a:not(.btn) {
-    color: #8a6d3b
+    color: rgb(138, 109, 59);
 }
 
 .note.warning.modern a:not(.btn):hover {
-    color: #714f30
+    color: rgb(113, 79, 48);
 }
 
 .note.warning:not(.modern) {
-    border-left-color: #f0ad4e
+    border-left-color: rgb(240, 173, 78);
 }
 
-.note.warning:not(.modern) h2, .note.warning:not(.modern) h3, .note.warning:not(.modern) h4, .note.warning:not(.modern) h5, .note.warning:not(.modern) h6 {
-    color: #f0ad4e
+.note.warning:not(.modern) h2,
+.note.warning:not(.modern) h3,
+.note.warning:not(.modern) h4,
+.note.warning:not(.modern) h5,
+.note.warning:not(.modern) h6 {
+    color: rgb(240, 173, 78);
 }
 
 .note.warning:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.warning:not(.no-icon):not(.modern)::before {
-    color: #f0ad4e
+    color: rgb(240, 173, 78);
 }
 
 .note.danger.flat {
-    background: #fcf1f2
+    background: rgb(252, 241, 242);
 }
 
 .note.danger.modern {
-    border-color: #ebcdd2;
-    background: #f2dfdf;
-    color: #a94442
+    border-color: rgb(235, 205, 210);
+    background: rgb(242, 223, 223);
+    color: rgb(169, 68, 66);
 }
 
 .note.danger.modern a:not(.btn) {
-    color: #a94442
+    color: rgb(169, 68, 66);
 }
 
 .note.danger.modern a:not(.btn):hover {
-    color: #84333f
+    color: rgb(132, 51, 63);
 }
 
 .note.danger:not(.modern) {
-    border-left-color: #d9534f
+    border-left-color: rgb(217, 83, 79);
 }
 
-.note.danger:not(.modern) h2, .note.danger:not(.modern) h3, .note.danger:not(.modern) h4, .note.danger:not(.modern) h5, .note.danger:not(.modern) h6 {
-    color: #d9534f
+.note.danger:not(.modern) h2,
+.note.danger:not(.modern) h3,
+.note.danger:not(.modern) h4,
+.note.danger:not(.modern) h5,
+.note.danger:not(.modern) h6 {
+    color: rgb(217, 83, 79);
 }
 
 .note.danger:not(.no-icon)::before {
-    content: ""
+    content: "";
 }
 
 .note.danger:not(.no-icon):not(.modern)::before {
-    color: #d9534f
+    color: rgb(217, 83, 79);
 }
 
 #article-container .tabs {
     position: relative;
-    margin: 0 0 1rem;
+    margin: 0px 0px 1rem;
     border-right: 1px solid var(--tab-border-color);
     border-bottom: 1px solid var(--tab-border-color);
-    border-left: 1px solid var(--tab-border-color)
+    border-left: 1px solid var(--tab-border-color);
 }
 
 #article-container .tabs > .nav-tabs {
     display: flex;
     flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    background: var(--tab-botton-bg)
+    margin: 0px;
+    padding: 0px;
+    background: var(--tab-botton-bg);
 }
 
 #article-container .tabs > .nav-tabs > .tab {
-    margin: 0;
-    padding: 0;
-    list-style: none
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
 }
 
 @media screen and (max-width: 768px) {
     #article-container .tabs > .nav-tabs > .tab {
         -webkit-box-flex: 1;
-        flex-grow: 1
+        flex-grow: 1;
     }
 }
 
 #article-container .tabs > .nav-tabs > .tab button {
     display: block;
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
     width: 100%;
     border-top: 2px solid var(--tab-border-color);
     background: var(--tab-botton-bg);
     color: var(--tab-botton-color);
     line-height: 2;
-    transition: all .4s ease 0s
+    transition: all 0.4s ease 0s;
 }
 
 #article-container .tabs > .nav-tabs > .tab button i {
-    width: 1.5em
+    width: 1.5em;
 }
 
 #article-container .tabs > .nav-tabs > .tab.active button {
-    border-top: 2px solid #307af6;
+    border-top: 2px solid rgb(48, 122, 246);
     background: var(--tab-button-active-bg);
-    cursor: default
+    cursor: default;
 }
 
 #article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
     border-top: 2px solid var(--tab-button-hover-bg);
-    background: var(--tab-button-hover-bg)
+    background: var(--tab-button-hover-bg);
 }
 
 #article-container .tabs > .tab-contents .tab-item-content {
     position: relative;
     display: none;
-    padding: 1.8rem 1.2rem
+    padding: 1.8rem 1.2rem;
 }
 
 @media screen and (max-width: 768px) {
     #article-container .tabs > .tab-contents .tab-item-content {
-        padding: 1.2rem .7rem
+        padding: 1.2rem 0.7rem;
     }
 }
 
 #article-container .tabs > .tab-contents .tab-item-content.active {
     display: block;
-    animation: .5s ease 0s 1 normal none running tabshow
+    animation: 0.5s ease 0s 1 normal none running tabshow;
 }
 
 #article-container .tabs .tab-to-top {
     position: relative;
     display: block;
-    margin: 0 0 0 auto;
-    color: #99a9bf
+    margin: 0px 0px 0px auto;
+    color: rgb(153, 169, 191);
 }
 
 @-webkit-keyframes tabshow {
     0% {
-        transform: translateY(15px)
+        transform: translateY(15px);
     }
+
     100% {
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
 @keyframes tabshow {
     0% {
-        transform: translateY(15px)
+        transform: translateY(15px);
     }
+
     100% {
-        transform: translateY(0)
+        transform: translateY(0px);
     }
 }
 
-[data-theme=dark] {
+[data-theme="dark"] {
     --global-bg: #191919;
     --font-color: rgba(255, 255, 255, 0.9);
     --hr-border: rgba(255, 255, 255, 0.3);
@@ -4802,98 +4398,87 @@ blockquote.pullquote.right {
     --hlnumber-bg: #171717;
     --hlnumber-color: rgba(255, 255, 255, 0.4);
     --hlscrollbar-bg: #1f1f1f;
-    --hlexpand-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.6), rgba(23, 23, 23, 0.9))
+    --hlexpand-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.6), rgba(23, 23, 23, 0.9));
 }
 
-[data-theme=dark] #footer::before, [data-theme=dark] #page-header::before, [data-theme=dark] #web_bg::before {
+[data-theme="dark"] #footer::before,
+[data-theme="dark"] #page-header::before,
+[data-theme="dark"] #web_bg::before {
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, .4);
-    content: ""
+    background-color: rgba(0, 0, 0, 0.4);
+    content: "";
 }
 
-/*[data-theme=dark] #article-container code {*/
-/*    background: #2c2c2c*/
-/*}*/
-
-/*[data-theme=dark] #article-container pre > code {*/
-/*    background: #171717*/
-/*}*/
-
-/*[data-theme=dark] #article-container figure.highlight {*/
-/*    box-shadow: none*/
-/*}*/
-
-[data-theme=dark] #article-container .note code {
-    background: rgba(27, 31, 35, .05)
+[data-theme="dark"] #article-container kbd {
+    border-color: rgb(105, 105, 105);
+    background-color: rgb(82, 82, 82);
+    color: rgb(226, 241, 255);
 }
 
-[data-theme=dark] #article-container kbd {
-    border-color: #696969;
-    background-color: #525252;
-    color: #e2f1ff
+[data-theme="dark"] #page-header.nav-fixed > #nav,
+[data-theme="dark"] #page-header.not-top-img > #nav {
+    background: rgba(18, 18, 18, 0.8);
+    box-shadow: rgba(133, 133, 133, 0) 0px 5px 6px -5px;
 }
 
-[data-theme=dark] #page-header.nav-fixed > #nav, [data-theme=dark] #page-header.not-top-img > #nav {
-    background: rgba(18, 18, 18, .8);
-    box-shadow: rgba(133, 133, 133, 0) 0 5px 6px -5px
+[data-theme="dark"] #post-comment #comment-switch {
+    background: rgb(44, 44, 44) !important;
 }
 
-[data-theme=dark] #post-comment #comment-switch {
-    background: #2c2c2c !important
+[data-theme="dark"] #post-comment #comment-switch .switch-btn {
+    filter: brightness(0.8);
 }
 
-[data-theme=dark] #post-comment #comment-switch .switch-btn {
-    filter: brightness(.8)
+[data-theme="dark"] .note {
+    filter: brightness(0.8);
 }
 
-[data-theme=dark] .note {
-    filter: brightness(.8)
+[data-theme="dark"] img {
+    filter: brightness(0.8);
 }
 
-[data-theme=dark] img {
-    filter: brightness(.8)
+[data-theme="dark"] #aside-content .aside-list > .aside-list-item:not(:last-child) {
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
 }
 
-[data-theme=dark] #aside-content .aside-list > .aside-list-item:not(:last-child) {
-    border-bottom: 1px dashed rgba(255, 255, 255, .1)
+[data-theme="dark"] #gitalk-container {
+    filter: brightness(0.8);
 }
 
-[data-theme=dark] #gitalk-container {
-    filter: brightness(.8)
+[data-theme="dark"] #gitalk-container svg {
+    fill: rgba(255, 255, 255, 0.9) !important;
 }
 
-[data-theme=dark] #gitalk-container svg {
-    fill: rgba(255, 255, 255, .9) !important
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-no-comment,
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-tab-active {
+    color: rgba(255, 255, 255, 0.7);
 }
 
-[data-theme=dark] #disqus_thread #dsqjs .dsqjs-no-comment, [data-theme=dark] #disqus_thread #dsqjs .dsqjs-tab-active {
-    color: rgba(255, 255, 255, .7)
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-order-label {
+    background-color: rgb(43, 43, 43);
 }
 
-[data-theme=dark] #disqus_thread #dsqjs .dsqjs-order-label {
-    background-color: #2b2b2b
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-post-body {
+    color: rgba(255, 255, 255, 0.7);
 }
 
-[data-theme=dark] #disqus_thread #dsqjs .dsqjs-post-body {
-    color: rgba(255, 255, 255, .7)
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-post-body code,
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-post-body pre {
+    background: rgb(44, 44, 44);
 }
 
-[data-theme=dark] #disqus_thread #dsqjs .dsqjs-post-body code, [data-theme=dark] #disqus_thread #dsqjs .dsqjs-post-body pre {
-    background: #2c2c2c
+[data-theme="dark"] #disqus_thread #dsqjs .dsqjs-post-body blockquote {
+    color: rgba(255, 255, 255, 0.7);
 }
 
-[data-theme=dark] #disqus_thread #dsqjs .dsqjs-post-body blockquote {
-    color: rgba(255, 255, 255, .7)
+[data-theme="dark"] #artitalk_main #lazy {
+    background: rgb(18, 18, 18);
 }
 
-[data-theme=dark] #artitalk_main #lazy {
-    background: #121212
-}
-
-[data-theme=dark] #operare_artitalk .c2 {
-    background: #121212
+[data-theme="dark"] #operare_artitalk .c2 {
+    background: rgb(18, 18, 18);
 }
 
 .search-dialog {
@@ -4906,276 +4491,378 @@ blockquote.pullquote.right {
     padding: 1rem;
     width: 30rem;
     background: var(--search-bg);
-    border-radius: 5px
+    border-radius: 5px;
 }
 
 @media screen and (max-width: 768px) {
     .search-dialog {
-        top: 0;
-        left: 0;
-        margin: 0;
+        top: 0px;
+        left: 0px;
+        margin: 0px;
         width: 100%;
-        height: 100%
+        height: 100%;
     }
 }
 
 .search-dialog hr {
-    margin: 1rem auto
+    margin: 1rem auto;
 }
 
 .search-dialog span.search-close-button {
     position: absolute;
-    top: .8rem;
+    top: 0.8rem;
     right: 1rem;
-    color: #858585;
+    color: rgb(133, 133, 133);
     font-size: 1.4em;
     line-height: 1;
     cursor: pointer;
-    transition: color .2s ease-in-out 0s
+    transition: color 0.2s ease-in-out 0s;
 }
 
 .search-dialog span.search-close-button:hover {
-    color: #307af6
+    color: rgb(48, 122, 246);
 }
 
 .search-dialog__title {
-    padding: 0 0 .7rem;
-    color: #307af6;
+    padding: 0px 0px 0.7rem;
+    color: rgb(48, 122, 246);
     font-size: 1.4em;
-    line-height: 1
+    line-height: 1;
 }
 
 #search-mask {
     position: fixed;
-    inset: 0;
+    inset: 0px;
     z-index: 1000;
     display: none;
-    background: rgba(0, 0, 0, .6)
+    background: rgba(0, 0, 0, 0.6);
+}
+
+#algolia-search .search-dialog {
+    animation: 0.5s ease 0s 1 normal none running titlescale;
+}
+
+#algolia-search .search-dialog .ais-search-box {
+    margin: 0px auto;
+    max-width: 100%;
+    width: 100%;
+}
+
+#algolia-search .search-dialog .ais-search-box input {
+    padding: 0.25rem 0.7rem;
+    outline: 0px;
+    border: 2px solid rgb(48, 122, 246);
+    border-radius: 2rem;
+    background: var(--search-bg);
+    color: var(--search-input-color);
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
+    position: relative;
+    padding-left: 1.2rem;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:hover::before {
+    border-color: rgb(255, 114, 66);
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before {
+    position: absolute;
+    top: 0.53em;
+    left: 0px;
+    width: 0.5em;
+    height: 0.5em;
+    border: 0.15rem solid rgb(48, 122, 246);
+    border-radius: 0.5em;
+    background: 0px 0px;
+    content: "";
+    line-height: 0.5em;
+    transition: all 0.2s ease-in-out 0s;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
+    display: block;
+    color: var(--search-result-title);
+    cursor: pointer;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
+    color: rgb(48, 122, 246);
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
+    color: rgb(244, 116, 102);
+    font-weight: 700;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination {
+    margin: 0.8rem 0px 0px;
+    padding: 0px;
+    text-align: center;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item {
+    margin: 0px 0.2rem;
+    padding: 0px;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item a {
+    display: inline-block;
+    min-width: 1.2rem;
+    height: 1.2rem;
+    text-align: center;
+    line-height: 1.2rem;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
+    background: rgb(0, 121, 255);
+    color: rgb(238, 238, 238);
+    cursor: default;
+}
+
+#algolia-search .search-dialog .algolia-logo {
+    padding-top: 2px;
+    width: 4rem;
+    height: 1.5rem;
 }
 
 :root {
-    --heo-main: var(--heo-theme) !important
+    --heo-main: var(--heo-theme) !important;
 }
 
 :root {
-    --heo-main-op: var(--heo-theme-op) !important
+    --heo-main-op: var(--heo-theme-op) !important;
 }
 
 :root {
-    --heo-main-none: var(--heo-theme-none) !important
+    --heo-main-none: var(--heo-theme-none) !important;
 }
 
 :root {
-    --heo-snackbar-time: 3000ms !important
+    --heo-snackbar-time: 3000ms !important;
 }
 
 #page {
-    min-height: calc(100vh - 464px)
+    min-height: calc(100vh - 464px);
 }
 
 ::-webkit-scrollbar {
     width: 6px;
-    height: 6px
+    height: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
     background: var(--heo-scrollbar);
     border-radius: 8px;
-    cursor: pointer
+    cursor: pointer;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: var(--heo-main);
     opacity: 1;
-    display: block !important
+    display: block !important;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: var(--heo-none)
+    background-color: var(--heo-none);
 }
 
 html {
-    overflow-y: overlay
+    overflow-y: overlay;
 }
 
 .layout.hide-aside {
-    max-width: 1400px
+    max-width: 1400px;
 }
 
-[data-theme=dark] img {
-    filter: brightness(1)
+[data-theme="dark"] img {
+    filter: brightness(1);
 }
 
 #nav {
     flex-wrap: nowrap;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 #nav .menus_items .menus_item .menus_item_child {
-    padding: 6px 4px 8px 4px;
+    padding: 6px 4px 8px;
     border-radius: 100px;
     background-color: var(--heo-card-bg);
     box-shadow: var(--heo-shadow-black);
     border: var(--style-border);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    top: 35px
+    top: 35px;
 }
 
 #nav .menus_items .menus_item .menus_item_child:hover {
     border: var(--style-border-hover);
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
-#page-header.nav-fixed > #nav, #page-header.not-top-img > #nav {
-    box-shadow: none
+#page-header.nav-fixed > #nav,
+#page-header.not-top-img > #nav {
+    box-shadow: none;
 }
 
 #sidebar #sidebar-menus .menus_items .menus_item_child {
-    margin-left: 1rem
+    margin-left: 1rem;
 }
 
 #sidebar #sidebar-menus .menus_items .site-page span:hover {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 .site-page i.fa-chevron-down {
-    display: none
+    display: none;
 }
 
-.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
-    line-height: 1
+.fa,
+.fa-brands,
+.fa-light,
+.fa-regular,
+.fa-solid,
+.fa-thin,
+.fab,
+.fad,
+.fal,
+.far,
+.fas,
+.fat {
+    line-height: 1;
 }
 
-#nav .menus_items .menus_item .menus_item_child:before {
-    top: -10px
+#nav .menus_items .menus_item .menus_item_child::before {
+    top: -10px;
 }
 
 #nav .menus_items .menus_item .menus_item_child li a:hover {
+    box-shadow: var(--heo-shadow-main);
+    margin: 0px auto;
+    padding: 0.3rem 0.7rem;
     background: var(--heo-main) !important;
     color: var(--heo-white) !important;
-    box-shadow: var(--heo-shadow-main);
-    margin: 0 auto;
-    transform: scale(1) !important
+    transform: scale(1) !important;
 }
 
 #nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) {
     font-size: 1rem;
-    margin-right: 8px
+    margin-right: 8px;
 }
 
 #nav .menus_items .menus_item {
-    padding: 0 .4rem;
+    padding: 0px 0.4rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: auto
+    margin: auto;
 }
 
 #nav .menus_items .menus_item .menus_item_child li {
     display: inline-flex;
-    margin: 0 .2rem
+    list-style: none;
+    border-radius: 5px;
+    margin: 0px 4px;
 }
 
 #nav a {
     border-radius: 8px;
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .nav-fixed #nav a {
     color: var(--heo-fontcolor);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #assist-open a {
-    padding: 0;
-    pointer-events: none
+    padding: 0px;
+    pointer-events: none;
 }
 
 #assist-open {
-    transition: .3s;
-    border-radius: 40px
+    transition: all 0.3s ease 0s;
+    border-radius: 40px;
 }
 
 #assist-open:hover {
+    background: var(--heo-white-op);
     color: var(--heo-white) !important;
-    background: var(--heo-white-op)
 }
 
 #page-header.nav-fixed #assist-open:hover {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
-#page-header.nav-fixed #assist-open:hover i, .page #nav #assist-open.nav-button:hover i {
-    color: var(--heo-white)
+#page-header.nav-fixed #assist-open:hover i,
+.page #nav #assist-open.nav-button:hover i {
+    color: var(--heo-white);
 }
 
 .page #nav #assist-open:hover {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 .topbar-html {
-    background: #aeaeae !important
+    background: rgb(174, 174, 174) !important;
 }
 
 @media screen and (max-width: 768px) {
     #assist-open {
-        display: none
+        display: none;
     }
 }
 
 #mozi-assist {
     position: fixed;
-    z-index: 999
+    z-index: 999;
 }
 
 .topbar-html-content {
-    height: 160px !important;
     align-items: flex-end;
-    padding-bottom: 12px
+    padding-bottom: 12px;
+    height: 160px !important;
 }
 
 .topbar-html {
-    box-shadow: none !important
+    box-shadow: none !important;
 }
 
 .bigtext-html-btn {
     display: flex;
     align-items: center;
-    justify-content: center
+    justify-content: center;
 }
 
 .topbar-html-content-item img {
-    border-radius: 12px !important
+    border-radius: 12px !important;
 }
 
 #page-header.nav-fixed #nav {
-    top: 0;
+    top: 0px;
     box-shadow: none;
     border-bottom: var(--style-border);
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    background: var(--heo-background)
+    background: var(--heo-background);
 }
 
 #nav {
-    padding: 0
+    padding: 0px;
 }
 
 @media screen and (max-width: 768px) {
     #nav {
-        padding: 0
+        padding: 0px;
     }
 }
 
 #page-header #nav {
     box-shadow: none;
-    transition: 0s;
+    transition: all 0s ease 0s;
     display: flex;
     justify-content: center;
+    background: linear-gradient(to top, var(--heo-main-none) 0, var(--heo-main) 100%);
     z-index: 1000 !important;
-    background: linear-gradient(to top, var(--heo-main-none) 0, var(--heo-main) 100%)
 }
 
 #page-header #nav #nav-group {
@@ -5183,20 +4870,20 @@ html {
     width: 100%;
     display: flex;
     position: relative;
-    padding: 0 1.5rem;
-    align-items: center
+    padding: 0px 1.5rem;
+    align-items: center;
 }
 
 #page-header #nav #nav-right {
     position: absolute;
-    right: 0;
+    right: 0px;
     z-index: 102;
     display: flex;
     flex-direction: row;
     height: 100%;
     align-items: center;
     margin-right: 1.5rem;
-    overflow: hidden
+    overflow: hidden;
 }
 
 #page-header #nav #nav-left {
@@ -5206,40 +4893,43 @@ html {
     height: 100%;
     align-items: center;
     margin-right: 1.5rem;
-    overflow: hidden
+    overflow: hidden;
 }
 
 @media screen and (max-width: 1300px) {
     #page-header #nav #nav-left {
-        display: none
+        display: none;
     }
 }
 
 .nav-button {
-    cursor: pointer
+    cursor: pointer;
 }
 
-#page-header #nav #nav-left .nav-button a, #page-header #nav #nav-right .nav-button a {
+#page-header #nav #nav-left .nav-button a,
+#page-header #nav #nav-right .nav-button a {
     height: 35px;
     width: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 40px
+    border-radius: 40px;
 }
 
-#page-header #nav #nav-left .nav-button a i, #page-header #nav #nav-right .nav-button a i {
-    line-height: 1
+#page-header #nav #nav-left .nav-button a i,
+#page-header #nav #nav-right .nav-button a i {
+    line-height: 1;
 }
 
-#page-header #nav #nav-left div, #page-header #nav #nav-right div {
-    margin-left: .5rem;
-    padding: 0
+#page-header #nav #nav-left div,
+#page-header #nav #nav-right div {
+    margin-left: 0.5rem;
+    padding: 0px;
 }
 
 @media screen and (max-width: 768px) {
     #nav #menus {
-        display: none !important
+        display: none !important;
     }
 
     #nav.hide-menu #toggle-menu .site-page {
@@ -5247,128 +4937,126 @@ html {
         height: 35px;
         display: flex;
         align-items: center;
-        justify-content: center
+        justify-content: center;
     }
 
     #page-header #nav #nav-group {
         width: 100%;
         display: flex;
         position: relative;
-        padding: 0 12px
+        padding: 0px 12px;
     }
 
     #page-header #nav #nav-right {
-        margin-right: 12px
+        margin-right: 12px;
     }
 }
 
 #nav.show {
-    transform: translate3d(0, 0, 0) !important;
-    top: 0;
-    transition: .2s;
+    top: 0px;
+    transition: all 0.2s ease 0s;
     position: fixed;
-    z-index: 91
+    z-index: 91;
+    transform: translate3d(0px, 0px, 0px) !important;
 }
 
 #page-header.not-top-img #nav {
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     background: var(--heo-maskbgdeep);
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 @media screen and (max-width: 768px) {
     #page-header.not-top-img #nav {
-        background: var(--heo-background) !important
+        background: var(--heo-background) !important;
     }
 
     #page-header.not-top-img:not(.nav-fixed) #nav {
-        background: var(--heo-background) !important
+        background: var(--heo-background) !important;
     }
 }
 
 #sidebar #menu-mask {
-    z-index: 1001
+    z-index: 1001;
 }
 
 #page-header.not-top-img:not(.nav-fixed) #nav {
-    background: var(--heo-none)
+    background: var(--heo-none);
 }
 
 #page-header.nav-fixed #nav #menus > div.menus_items {
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     height: 40px;
-    margin: auto 0
+    margin: auto 0px;
 }
 
 #page-header.not-top-img {
-    margin-bottom: 0
+    margin-bottom: 0px;
 }
 
 #nav #toggle-menu {
-    padding: 0 .4rem
+    padding: 0px 0.4rem;
 }
 
 #page-header.no-top-img {
-    margin-bottom: 0
+    margin-bottom: 0px;
 }
 
 .layout {
-    padding: 1rem 1.5rem
+    padding: 1rem 1.5rem;
 }
 
 @media screen and (min-width: 1300px) {
     .layout {
         display: flex;
         justify-content: space-between;
-        padding: 1rem 1.5rem
+        padding: 1rem 1.5rem;
     }
 }
 
 #site-name .iconfont {
     font-size: 20px;
     font-weight: 400;
-    line-height: 48px
+    line-height: 48px;
 }
 
 #site-logo {
-    width: 121px
+    width: 121px;
 }
 
 #site-logo:hover {
-    transform: scale(1.03)
+    transform: scale(1.03);
 }
 
 #nav-totop {
     position: relative;
     width: 35px;
     height: 35px;
-    transition: .3s;
     display: flex;
     border-radius: 40px;
-    transition: all .3s ease-in-out;
-    align-items: center
+    transition: all 0.3s ease-in-out 0s;
+    align-items: center;
 }
 
 #nav-totop.long {
-    width: 70px
+    width: 70px;
 }
 
 #nav-totop .totopbtn {
-    padding-top: 0
+    padding-top: 0px;
 }
 
 #nav-totop .totopbtn i {
     position: absolute;
     display: flex;
-    font-size: .8rem;
-    opacity: 0
+    font-size: 0.8rem;
+    opacity: 0;
 }
 
 #nav-totop:hover .totopbtn i {
     opacity: 1;
     color: var(--heo-white);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #nav-totop #percent {
@@ -5377,36 +5065,36 @@ html {
     display: flex;
     justify-content: center;
     align-items: center;
-    transition: .3s;
-    white-space: nowrap
+    transition: all 0.3s ease 0s;
+    white-space: nowrap;
 }
 
-.nav-fixed #nav-totop #percent, .page #nav-totop #percent {
+.nav-fixed #nav-totop #percent,
+.page #nav-totop #percent {
     font-size: 12px;
     border-radius: 35px;
     display: flex;
     justify-content: center;
     align-items: center;
-    transition: .3s;
-    white-space: nowrap
+    transition: all 0.3s ease 0s;
+    white-space: nowrap;
 }
 
 #page-header:not(.nav-fixed) #percent {
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #page-header:not(.nav-fixed) #nav-totop {
-    width: 0;
+    width: 0px;
     transform: scale(0);
-    transition: .3s;
-    margin-left: 0 !important;
     overflow: hidden;
-    transition: .3s ease-in
+    transition: all 0.3s ease-in 0s;
+    margin-left: 0px !important;
 }
 
 #nav-totop:hover #percent {
     opacity: 0;
-    font-weight: 700
+    font-weight: 700;
 }
 
 #page-header #nav #nav-right .nav-button a.totopbtn {
@@ -5418,108 +5106,106 @@ html {
     position: absolute;
     top: 5px;
     right: 5px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #page-header #nav #nav-right .nav-button.long a.totopbtn {
-    width: 70px
+    width: 70px;
 }
 
 #page-header #nav #nav-right .nav-button:hover a.totopbtn {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 #page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn {
     width: 35px;
     height: 35px;
-    top: 0;
-    right: 0
+    top: 0px;
+    right: 0px;
 }
 
 #nav #site-name i {
     font-size: 50px;
     line-height: 35px;
-    padding: 0 12px
+    padding: 0px 12px;
 }
 
 .back-home-button {
     display: flex;
     width: 35px;
     height: 35px;
-    padding: 0 !important;
     align-items: center;
     justify-content: center;
     margin-right: 4px;
-    transition: .3s;
-    border-radius: 8px;
+    transition: all 0.3s ease 0s;
     color: var(--heo-white);
-    border-radius: 40px
+    border-radius: 40px;
+    padding: 0px !important;
 }
 
 .nav-fixed #nav .back-home-button {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 #page-header.not-top-img #nav .back-home-button {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 .back-home-button:hover {
     background: var(--heo-main);
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 .back-home-button .back-menu-list {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     width: 340px;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .back-home-button .back-menu-list::before {
     position: absolute;
     top: -15px;
-    left: 0;
+    left: 0px;
     width: 100%;
     height: 20px;
-    content: ''
+    content: "";
 }
 
 .back-home-button .back-menu-list .back-menu-item {
     display: flex;
     align-items: center;
     margin: 4px 8px;
+    transition: all 0.3s ease 0s;
+    border-radius: 8px;
     padding: 4px 8px !important;
-    transition: .3s;
-    border-radius: 8px
 }
 
 .back-home-button .back-menu-list .back-menu-item:hover {
     background: var(--heo-main) !important;
-    transform: scale(1) !important
+    transform: scale(1) !important;
 }
 
 .back-home-button .back-menu-list .back-menu-item .back-menu-item-icon {
     width: 24px;
     height: 24px;
     border-radius: 8px;
-    background: var(--heo-none)
+    background: var(--heo-none);
 }
 
 .back-home-button .back-menu-list .back-menu-item .back-menu-item-text {
     font-size: var(--global-font-size);
-    margin-left: .5rem;
-    color: var(--heo-fontcolor)
+    margin-left: 0.5rem;
+    color: var(--heo-fontcolor);
 }
 
 .back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .back-home-button .back-menu-list-group {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .back-home-button .back-menu-list-groups {
@@ -5533,46 +5219,46 @@ html {
     font-size: 12px;
     color: var(--heo-secondtext);
     box-shadow: var(--heo-shadow-border);
-    transition: 0s;
+    transition: all 0s ease 0s;
     opacity: 0;
-    pointer-events: none
+    pointer-events: none;
 }
 
 .back-home-button .back-menu-list-groups:hover {
-    border: var(--style-border-hover)
+    border: var(--style-border-hover);
 }
 
 .back-home-button .back-menu-list-group .back-menu-list-title {
-    margin: 8px 0 0 16px;
-    transition: .3s
+    margin: 8px 0px 0px 16px;
+    transition: all 0.3s ease 0s;
 }
 
 .back-home-button .back-menu-list-group:hover .back-menu-list-title {
-    color: var(--heo-main)
+    color: var(--heo-main);
 }
 
 .back-home-button:hover .back-menu-list-groups {
     display: flex;
     opacity: 1;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     top: 55px;
     pointer-events: auto;
-    left: 1.5rem
+    left: 1.5rem;
 }
 
 .back-home-button .back-menu-list .back-menu-item {
-    width: 150px
+    width: 150px;
 }
 
 @media screen and (max-width: 768px) {
     .back-home-button .back-menu-list-groups {
-        left: 0
+        left: 0px;
     }
 
     .back-home-button:hover .back-menu-list-groups {
         padding-bottom: 8px;
         box-shadow: var(--heo-shadow-border);
-        left: 0
+        left: 0px;
     }
 }
 
@@ -5582,38 +5268,38 @@ html {
     display: flex;
     align-items: center;
     z-index: 102;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (min-width: 900px) {
     #nav #site-name {
         opacity: 1;
-        transition: .3s;
-        overflow: hidden
+        transition: all 0.3s ease 0s;
+        overflow: hidden;
     }
 
     #nav #site-name i {
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     #nav #site-name:hover i {
         opacity: 0;
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     #page-header.nav-fixed #nav #site-name {
         opacity: 1;
-        transition: .1s;
-        border-radius: 40px
+        transition: all 0.1s ease 0s;
+        border-radius: 40px;
     }
 
     #page-header.nav-visible #nav #site-name {
         opacity: 1;
-        transition: .1s
+        transition: all 0.1s ease 0s;
     }
 
-    #nav #site-name:after {
-        background: url(../zhheo/../images/home.webp) no-repeat 50% 50%;
+    #nav #site-name::after {
+        background: url("https://img.zhheo.com/i/2022/08/31/630efbc7e1ca6.webp") 50% 50% no-repeat;
         opacity: 0;
         position: absolute;
         display: flex;
@@ -5621,27 +5307,26 @@ html {
         width: 74px;
         height: 58px;
         content: "";
-        transition: 0s;
-        transition-timing-function: ease-in;
-        transform: scale(.4)
+        transition: all 0s ease-in 0s;
+        transform: scale(0.4);
     }
 
     .post #nav #site-name:hover {
-        background: var(--heo-white-op)
+        background: var(--heo-white-op);
     }
 
     .nav-fixed #nav #site-name:hover {
-        background: var(--heo-main)
+        background: var(--heo-main);
     }
 
-    #nav #site-name:hover:after {
+    #nav #site-name:hover::after {
         opacity: 1;
-        transform: translateY(0) scale(.3);
-        transition-timing-function: ease-in
+        transform: translateY(0px) scale(0.3);
+        transition-timing-function: ease-in;
     }
 
     #nav .back-home-button:hover {
-        box-shadow: var(--heo-shadow-main)
+        box-shadow: var(--heo-shadow-main);
     }
 
     #nav #page-name-text {
@@ -5649,53 +5334,52 @@ html {
         font-weight: 700;
         padding: 4px 8px;
         opacity: 0;
-        transition: .1s;
+        transition: all 0.1s ease 0s;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         position: relative;
         text-align: center;
         cursor: pointer;
-        top: 0;
-        font-size: .9rem;
+        top: 0px;
+        font-size: 0.9rem;
         animation-timing-function: ease-in;
-        -webkit-animation-timing-function: ease-in
     }
 
     #nav #page-name-text:hover {
-        color: var(--heo-main) !important;
         background: var(--heo-none);
-        box-shadow: none
+        box-shadow: none;
+        color: var(--heo-main) !important;
     }
 
     #page-header.nav-fixed #nav #page-name-text {
         display: inline;
         opacity: 1;
-        transition: .3s;
-        line-height: 1
+        transition: all 0.3s ease 0s;
+        line-height: 1;
     }
 
-    #page-header.nav-fixed #nav #page-name-text:hover:after {
+    #page-header.nav-fixed #nav #page-name-text:hover::after {
         opacity: 1;
-        line-height: 36px
+        line-height: 36px;
     }
 
     #page-header.nav-fixed #nav div.menus_items {
-        transition: .15s;
+        transition: all 0.15s ease 0s;
         position: relative;
-        top: -60px
+        top: -60px;
     }
 
     #page-header.nav-fixed.nav-visible #nav #page-name-text {
         display: inline;
-        transition: .15s
+        transition: all 0.15s ease 0s;
     }
 
     #page-header.nav-fixed.nav-visible #nav div.menus_items {
         opacity: 1;
-        transition: .15s;
+        transition: all 0.15s ease 0s;
         position: relative;
-        top: 0
+        top: 0px;
     }
 
     #page-name {
@@ -5705,32 +5389,31 @@ html {
         height: 40px;
         position: absolute;
         top: 62px;
-        left: 0;
-        right: 0;
+        left: 0px;
+        right: 0px;
         margin: auto;
         justify-content: center;
         animation-timing-function: ease-out;
-        -webkit-animation-timing-function: ease-out
     }
 
     #page-header.nav-fixed #nav #menus {
-        z-index: 100
+        z-index: 100;
     }
 
     #page-header.nav-fixed.nav-visible #nav #menus {
-        z-index: 101
+        z-index: 101;
     }
 
     #page-header.nav-fixed #page-name {
         z-index: 101;
-        transition: .3s;
-        top: 10px
+        transition: all 0.3s ease 0s;
+        top: 10px;
     }
 
     #page-header.nav-fixed.nav-visible #page-name {
         z-index: 100;
         top: 62px;
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     #page-name-mask {
@@ -5738,243 +5421,587 @@ html {
         height: 100%;
         position: absolute;
         overflow: hidden;
-        left: 0
+        left: 0px;
     }
 }
 
 @media screen and (max-width: 899px) {
     #nav #page-name-mask {
-        display: none !important
+        display: none !important;
     }
 }
 
+@media screen and (max-width: 1300px) {
+    #nav-music {
+        display: none !important;
+    }
+}
+
+#nav-music {
+    display: flex;
+    align-items: center;
+    z-index: 1001;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    transform-origin: left bottom;
+    box-shadow: var(--heo-shadow-border);
+    border-radius: 40px;
+}
+
+#nav-music:active {
+    transform: scale(0.97);
+}
+
+#nav-music.playing {
+    box-shadow: 0 0 12px -3px var(--heo-none);
+    animation: 5s linear 0s infinite normal none running playingShadow;
+}
+
+@-webkit-keyframes playingShadow {
+    0% {
+        box-shadow: 0 0 12px -3px var(--heo-none);
+    }
+
+    50% {
+        box-shadow: 0 0 12px 0 var(--heo-main);
+    }
+
+    100% {
+        box-shadow: 0 0 12px -3px var(--heo-none);
+    }
+}
+
+#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
+    height: 25px;
+    width: 25px;
+    border-radius: 40px;
+    z-index: 1;
+    transition: all 0.3s ease 0s;
+    transform: rotate(0deg) scale(1);
+    border: var(--style-border-always);
+    animation: 24s linear 0s infinite normal none paused changeright;
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
+    box-shadow: rgba(255, 255, 255, 0.65) 0px 0px 14px;
+    transform: rotate(0deg) scale(1.1);
+    border-color: var(--heo-white);
+    animation-play-state: running;
+}
+
 @-webkit-keyframes changeright {
     0% {
-        -webkit-transform: rotate(0) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
+        transform: rotate(0deg) scale(1.1);
+        box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px;
     }
+
     25% {
-        -webkit-transform: rotate(90deg) scale(1.1);
-        box-shadow: 0 0 14px #fff
+        transform: rotate(90deg) scale(1.1);
+        box-shadow: rgb(255, 255, 255) 0px 0px 14px;
     }
+
     50% {
-        -webkit-transform: rotate(180deg) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
+        transform: rotate(180deg) scale(1.1);
+        box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px;
     }
+
     75% {
-        -webkit-transform: rotate(270deg) scale(1.1);
-        box-shadow: 0 0 14px #fff
+        transform: rotate(270deg) scale(1.1);
+        box-shadow: rgb(255, 255, 255) 0px 0px 14px;
     }
+
     100% {
-        -webkit-transform: rotate(360deg) scale(1.1);
-        box-shadow: 0 0 2px #ffffff00
+        transform: rotate(360deg) scale(1.1);
+        box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px;
     }
 }
 
+#nav-music .aplayer.aplayer-withlrc .aplayer-info {
+    height: 100%;
+    color: var(--font-color);
+    margin-left: 8px;
+    padding: 0px;
+    display: flex;
+    align-items: center;
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
+    color: var(--heo-white);
+}
+
+#nav-music #nav-music-hoverTips {
+    color: var(--heo-white);
+    background: var(--heo-main);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    border-radius: 40px;
+    opacity: 0;
+    font-size: 12px;
+    z-index: 2;
+    pointer-events: none;
+    transition: all 0.3s ease 0s;
+}
+
+#nav-music:hover:not(.playing) #nav-music-hoverTips {
+    opacity: 1;
+}
+
+#nav-music.playing #nav-music-hoverTips {
+    opacity: 0;
+}
+
+#nav-music .aplayer {
+    background: var(--card-bg);
+    border-radius: 60px;
+    height: 41px;
+    display: flex;
+    margin: 0px;
+    pointer-events: none;
+    transition: all 0.3s ease 0s;
+    border: var(--style-border);
+    box-shadow: none;
+}
+
+#nav-music.playing .aplayer {
+    background: var(--heo-main-op-deep);
+    border: var(--style-border-hover);
+    backdrop-filter: saturate(180%) blur(20px);
+}
+
+#nav-music .aplayer .aplayer-notice {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-miniswitcher {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-body {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0px 12px 0px 8px;
+}
+
+#nav-music .aplayer .aplayer-pic .aplayer-play {
+    opacity: 0;
+}
+
+#nav-music .aplayer-list {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music {
+    margin: 0px;
+    display: flex;
+    align-items: center;
+    padding: 0px;
+    z-index: 1;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
+    display: none;
+}
+
+#nav-music .aplayer.aplayer-withlist .aplayer-info {
+    border: none;
+}
+
+#nav-music .aplayer .aplayer-pic div {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
+    cursor: pointer;
+    line-height: 1;
+    display: inline-block;
+    white-space: nowrap;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all 0.3s ease 0s;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+    margin: 0px;
+    padding: 0px;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
+    height: 100%;
+    background: 0px 0px;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+    height: 100%;
+    opacity: 0.1;
+    animation: 5s ease 0s infinite normal none running lightBar;
+    background-color: var(--heo-white) !important;
+}
+
+@-webkit-keyframes lightBar {
+    0% {
+        opacity: 0.1;
+    }
+
+    60% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 0.1;
+    }
+}
+
+#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
+    width: 0px;
+    opacity: 0;
+    transition: all 0.3s ease 0s;
+    margin-left: 8px;
+    margin-top: -2px;
+}
+
+#nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc {
+    width: 200px;
+    margin-bottom: 0px;
+    opacity: 1;
+}
+
+#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
+    color: var(--heo-white);
+    border: none;
+}
+
+#nav-music .aplayer .aplayer-lrc::after,
+#nav-music .aplayer .aplayer-lrc::before {
+    display: none;
+}
+
+#nav-music .aplayer .aplayer-lrc p {
+    color: rgba(255, 255, 255, 0.7);
+}
+
 i.fab {
     font-size: 20px;
     vertical-align: middle;
-    margin-bottom: 4px
+    margin-bottom: 4px;
 }
 
-#body-wrap .full_page:before {
+#body-wrap .full_page::before {
     background-color: var(--heo-none) !important;
-    transition: 0s !important
+    transition: all 0s ease 0s !important;
 }
 
-.full_page #page-header:before {
-    display: none !important
+.full_page #page-header::before {
+    display: none !important;
 }
 
 .snackbar-container {
-    background: var(--heo-main) !important;
-    color: var(--heo-white) !important;
-    border-radius: 0 !important;
     display: flex;
     justify-content: center;
+    background: var(--heo-main) !important;
+    color: var(--heo-white) !important;
+    border-radius: 0px !important;
     max-width: none !important;
     min-width: 100% !important;
-    margin: 0 !important;
-    left: 0 !important;
+    margin: 0px !important;
+    left: 0px !important;
     height: 60px !important;
-    transform: none !important
+    transform: none !important;
 }
 
 .snackbar-container p {
     font-weight: 700 !important;
     text-align: center !important;
-    font-size: .8rem !important;
+    font-size: 0.8rem !important;
     display: flex !important;
     justify-content: center !important;
-    margin: auto !important
+    margin: auto !important;
 }
 
 .snackbar-container .action {
+    font-weight: 700;
+    transition: all 0.3s ease 0s;
     color: var(--heo-white) !important;
     padding: 4px 6px !important;
-    font-weight: 700;
     border-radius: 8px !important;
-    transition: .3s;
-    border: var(--style-border) !important
+    border: var(--style-border) !important;
 }
 
 .snackbar-container .action:hover {
     color: var(--heo-main) !important;
-    background: var(--heo-white) !important
+    background: var(--heo-white) !important;
 }
 
 .snackbar-container::after {
     position: absolute;
-    width: 0;
+    width: 0px;
     height: 100%;
-    left: 0;
-    top: 0;
+    left: 0px;
+    top: 0px;
     background: var(--heo-white);
-    opacity: .1;
+    opacity: 0.1;
     content: "";
     animation: snackbar-progress var(--heo-snackbar-time) linear forwards;
-    pointer-events: none
+    pointer-events: none;
 }
 
 @keyframes snackbar-progress {
-    from {
-        width: 0
+    0% {
+        width: 0px;
     }
-    to {
-        width: 100%
+
+    100% {
+        width: 100%;
     }
 }
 
 #nav a {
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #nav a:hover {
-    color: var(--heo-white) !important;
     background: var(--heo-white-op);
-    transition: .3s
+    transition: all 0.3s ease 0s;
+    color: var(--heo-white) !important;
 }
 
 .page #nav a:hover {
-    color: var(--heo-white) !important;
     background: var(--heo-main);
-    transition: .3s;
-    box-shadow: var(--heo-shadow-main)
+    transition: all 0.3s ease 0s;
+    box-shadow: var(--heo-shadow-main);
+    color: var(--heo-white) !important;
 }
 
 .nav-fixed #nav a:hover {
     background: var(--heo-main);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (min-width: 768px) {
     .menus_item:hover > a.site-page {
-        color: var(--heo-white) !important;
         background: var(--heo-white-op);
-        transition: .3s;
-        box-shadow: var(--heo-shadow-main)
+        transition: all 0.3s ease 0s;
+        box-shadow: var(--heo-shadow-main);
+        color: var(--heo-white) !important;
     }
 
     .page .menus_item:hover > a.site-page {
-        color: var(--heo-white) !important;
         background: var(--heo-main);
-        transition: .3s;
-        box-shadow: var(--heo-shadow-main)
+        transition: all 0.3s ease 0s;
+        box-shadow: var(--heo-shadow-main);
+        color: var(--heo-white) !important;
     }
 
     .nav-fixed .menus_item:hover > a.site-page {
-        background-color: var(--heo-main)
+        background-color: var(--heo-main);
     }
 }
 
 @media screen and (max-width: 768px) {
     #sidebar #sidebar-menus .menus_items li .site-page:hover {
         background: var(--heo-main);
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     #sidebar #sidebar-menus .menus_items li .site-page span:hover {
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     #sidebar #sidebar-menus {
-        z-index: 1001
+        z-index: 1001;
     }
 }
 
 .nav-fixed #nav #site-name i {
     color: var(--heo-fontcolor);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #nav #site-name:hover i {
-    color: var(--heo-white)
+    color: var(--heo-white);
+}
+
+#search-mask {
+    backdrop-filter: blur(12px);
+    background: var(--heo-maskbg);
+}
+
+#algolia-search .search-dialog .ais-search-box input {
+    border: var(--style-border);
+    border-radius: 8px !important;
+}
+
+#algolia-search .search-dialog .ais-search-box input:focus {
+    border: var(--style-border-hover);
+}
+
+#algolia-search .search-dialog .ais-search-box input::placeholder {
+    opacity: 0.6;
+}
+
+#algolia-input-panel {
+    margin-bottom: 8px;
+}
+
+.search-dialog {
+    box-shadow: var(--heo-shadow-lightblack);
+    background: var(--heo-card-bg);
+    border: var(--style-border);
+    transition: all 0.3s ease 0s;
+    border-radius: 12px !important;
+}
+
+.search-dialog:hover {
+    border: var(--style-border-hover);
+    box-shadow: var(--heo-shadow-theme);
+}
+
+.search-dialog__title {
+    font-weight: 700;
+    color: var(--heo-main);
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover {
+    color: var(--heo-hovertext);
+}
+
+#algolia-search .search-dialog .algolia-logo {
+    display: none;
+}
+
+#algolia-tips {
+    padding-top: 12px;
+    color: var(--heo-secondtext);
+    right: 0px;
+    margin: auto;
+}
+
+.algolia-tips-text {
+    margin-left: 0.4rem;
+}
+
+#algolia-search-results {
+    padding-top: 8px;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before {
+    display: none;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item {
+    padding-left: 0px;
+    font-weight: 700;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination {
+    margin: 0.2rem 0px 0px;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em {
+    color: var(--heo-theme);
+    font-style: normal;
+}
+
+#algolia-search .search-dialog .ais-search-box {
+    padding-top: 8px;
+}
+
+#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a {
+    border-radius: 4px;
+    background: var(--heo-main);
+    color: var(--heo-white);
 }
 
 a {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 a:hover {
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 hr {
-    display: none
+    display: none;
 }
 
 #footer-wrap {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 #footer-wrap a {
     color: var(--heo-fontcolor);
     height: 44px;
-    line-height: 36px
+    line-height: 36px;
 }
 
 #footer-wrap a:hover {
     color: var(--heo-hovertext);
-    background-color: var(--heo-none)
+    background-color: var(--heo-none);
 }
 
 div#footer_deal {
     justify-content: center;
     display: flex;
     padding-top: 2rem;
-    align-items: center
+    align-items: center;
 }
 
 #card-poem {
     display: flex;
     flex-direction: column;
-    padding: .5rem !important;
-    min-height: 130px
+    min-height: 130px;
+    padding: 0.5rem !important;
 }
 
 div#poem_sentence {
     text-align: center;
     font-family: serif, cursive;
     line-height: 1.4;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     padding: 1rem;
     border-radius: 12px;
     background: var(--heo-secondbg);
-    min-height: 62px
+    min-height: 62px;
 }
 
 div#poem_info {
     display: flex;
     color: var(--heo-secondtext);
-    font-size: .5rem;
+    font-size: 0.5rem;
     justify-content: center;
-    flex-wrap: wrap
+    flex-wrap: wrap;
 }
 
 div#poem_author {
     order: 1;
     padding: 2px;
-    margin-left: 8px
+    margin-left: 8px;
 }
 
 div#poem_dynasty {
@@ -5982,17 +6009,16 @@ div#poem_dynasty {
     padding: 2px 4px 2px 6px;
     background: var(--heo-card-btn-bg);
     color: var(--heo-fontcolor);
-    border-radius: 8px
+    border-radius: 8px;
 }
 
 @media screen and (max-width: 768px) {
     img.footer_mini_logo {
-        display: none
+        display: none;
     }
 
     div#footer_deal {
-        flex-wrap: wrap;
-        flex-direction: row
+        flex-flow: row wrap;
     }
 }
 
@@ -6006,51 +6032,51 @@ a.deal_link {
     background: var(--font-color);
     justify-content: center;
     align-items: center;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 a.deal_link:hover {
     color: var(--heo-white);
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 img.footer_mini_logo {
     width: 50px;
     height: 50px;
-    margin: 0 1rem;
+    margin: 0px 1rem;
     cursor: pointer;
-    transition: cubic-bezier(0, 0, 0, 1.29) .5s
+    transition: all 0.5s cubic-bezier(0, 0, 0, 1.29) 0s;
 }
 
 img.footer_mini_logo:hover {
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
 @media screen and (min-width: 1300px) {
     img.footer_mini_logo:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     img.footer_mini_logo:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 #weblogo {
-    align-self: center
+    align-self: center;
 }
 
 #footer-wrap a#heoblog_footerlogo:hover {
-    background: var(--heo-none)
+    background: var(--heo-none);
 }
 
 .heoblog_footerlogo_img {
-    filter: drop-shadow(0 12px 12px #ee7d7936)
+    filter: drop-shadow(rgba(238, 125, 121, 0.21) 0px 12px 12px);
 }
 
 .heoblog_footerlogo_img:hover {
-    transform: scale(1.03)
+    transform: scale(1.03);
 }
 
 #nav #menus {
@@ -6059,117 +6085,120 @@ img.footer_mini_logo:hover {
     width: 100%;
     position: absolute;
     height: 60px;
-    left: 0;
-    margin: 0
+    left: 0px;
+    margin: 0px;
 }
 
 #nav .menus_items {
     position: relative;
     width: fit-content;
     text-align: center;
-    left: 0;
-    right: 0;
-    top: 0;
+    left: 0px;
+    right: 0px;
+    top: 0px;
     display: flex;
     flex-direction: row;
-    justify-content: center
+    justify-content: center;
 }
 
 #menus > div.menus_items > div > a {
-    letter-spacing: .3rem;
-    padding-left: .7rem;
+    letter-spacing: 0.3rem;
+    padding-left: 0.7rem;
     font-weight: 700;
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-top: 0px;
+    padding-bottom: 0px;
     height: 35px;
     line-height: 35px;
-    border-radius: 40px
+    border-radius: 40px;
 }
 
 #nav .menus_items .menus_item .menus_item_child li a {
-    letter-spacing: 0;
+    letter-spacing: 0px;
     display: flex;
     align-items: center;
-    border-radius: 100px
+    border-radius: 100px;
+    padding: 0.3rem 1rem;
+    width: 100%;
+    color: var(--font-color) !important;
+    text-shadow: none !important;
 }
 
 #page-header.nav-fixed #nav #menus[style*="padding-right: 300px;"] .menus_items {
-    transform: translateX(-150px)
+    transform: translateX(-150px);
 }
 
 #travellings_button {
     display: inline;
-    padding: 0 .4rem;
-    transition: .3s
+    padding: 0px 0.4rem;
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (max-width: 768px) {
     #page-header.nav-fixed #travellings_button {
-        opacity: 0
+        opacity: 0;
     }
 }
 
 #rightMenu {
     display: none;
     position: fixed;
-    padding: 0 .25rem;
+    padding: 0px 0.25rem;
     width: 9rem;
     height: fit-content;
     top: 10%;
     left: 10%;
     background-color: var(--heo-maskbgdeep);
-    -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
     color: var(--heo-fontcolor);
     border-radius: 12px;
     z-index: 99994;
     border: var(--style-border);
     user-select: none;
-    box-shadow: var(--heo-shadow-black)
+    box-shadow: var(--heo-shadow-black);
 }
 
 #rightMenu:hover {
     border: var(--style-border-hover);
-    box-shadow: var(--heo-shadow-theme)
+    box-shadow: var(--heo-shadow-theme);
 }
 
 #rightMenu .rightMenu-group {
-    padding: .35rem .3rem;
-    transition: .3s
+    padding: 0.35rem 0.3rem;
+    transition: all 0.3s ease 0s;
 }
 
 #rightMenu .rightMenu-line {
-    border-top: 1px dashed var(--heo-theme-op)
+    border-top: 1px dashed var(--heo-theme-op);
 }
 
 #rightMenu .rightMenu-group.rightMenu-small {
     display: flex;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 #rightMenu .rightMenu-group .rightMenu-item {
     border-radius: 8px;
-    transition: .3s;
-    cursor: pointer
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
 }
 
 #rightMenu .rightMenu-line .rightMenu-item {
-    margin: .25rem 0;
-    padding: .25rem 0
+    margin: 0.25rem 0px;
+    padding: 0.25rem 0px;
 }
 
 #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
-    display: flex
+    display: flex;
 }
 
 #rightMenu .rightMenu-group .rightMenu-item:hover {
     background-color: var(--heo-main);
     color: var(--heo-white);
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 #rightMenu .rightMenu-group .rightMenu-item:active {
-    transform: scale(.97)
+    transform: scale(0.97);
 }
 
 #rightMenu .rightMenu-group .rightMenu-item i {
@@ -6177,125 +6206,129 @@ img.footer_mini_logo:hover {
     text-align: center;
     line-height: 1.5rem;
     width: 1.5rem;
-    padding: 0 .25rem
+    padding: 0px 0.25rem;
 }
 
 #rightMenu .rightMenu-line .rightMenu-item i {
-    margin: 0 .25rem
+    margin: 0px 0.25rem;
 }
 
 #rightMenu .rightMenu-group .rightMenu-item span {
-    line-height: 1.5rem
+    line-height: 1.5rem;
 }
 
 .rightMenu-small .rightMenu-item {
     width: 30px;
     height: 30px;
-    line-height: 30px
+    line-height: 30px;
 }
 
 #rightmenu-mask {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    background: 0 0;
-    top: 0;
-    left: 0;
+    background: 0px 0px;
+    top: 0px;
+    left: 0px;
     display: none;
-    z-index: 101;
-    margin: 0 !important;
-    z-index: 99993
+    z-index: 99993;
+    margin: 0px !important;
 }
 
 #darkmode_navswitch {
     display: inline;
-    position: relative
+    position: relative;
 }
 
 #darkmode_navswitch a i {
-    font-size: .9rem
+    font-size: 0.9rem;
 }
 
-[data-theme=dark] #page-header.not-top-img #nav .darkmode_switchbutton {
-    color: var(--heo-yellow)
+[data-theme="dark"] #page-header.not-top-img #nav .darkmode_switchbutton {
+    color: var(--heo-yellow);
 }
 
 a.darkmode_switchbutton {
-    padding: 4px 8px !important;
     cursor: pointer;
-    margin: 0 !important;
-    font-size: .9rem;
-    color: var(--heo-fontcolor)
+    font-size: 0.9rem;
+    color: var(--heo-fontcolor);
+    padding: 4px 8px !important;
+    margin: 0px !important;
 }
 
-[data-theme=dark] a.darkmode_switchbutton {
+[data-theme="dark"] a.darkmode_switchbutton {
     background: var(--heo-orange) !important;
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 a.console_switchbutton {
+    cursor: pointer;
     padding: 4px 8px !important;
-    cursor: pointer
 }
 
 #nav .site-page {
-    text-shadow: .05rem .05rem .1rem transparent;
-    border-radius: 8px
+    text-shadow: transparent 0.05rem 0.05rem 0.1rem;
+    border-radius: 8px;
 }
 
 #nav .site-page {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .nav-fixed #nav .site-page {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 .post-bg #nav #site-name {
     color: var(--heo-white);
-    transition: 0s
+    transition: all 0s ease 0s;
 }
 
 #nav #site-name {
     color: var(--heo-fontcolor);
-    padding: 0px 5px;
-    transition: .3s;
+    padding: 0px;
+    transition: all 0.3s ease 0s;
     display: flex;
     height: 35px;
     /*width: 75px;*/
     justify-content: center;
     align-items: center;
     text-shadow: none;
-    border-radius: 40px
+    border-radius: 40px;
 }
 
 #search-button > a > span {
-    display: none
+    display: none;
 }
 
 #nav .menus_items .menus_item i.expand {
-    display: none
+    display: none;
 }
 
 #rightside {
-    display: none
+    display: none;
+    padding-right: 8px;
+    position: fixed;
+    right: -38px;
+    bottom: 40px;
+    z-index: 100;
+    opacity: 0;
+    transition: all 0.5s ease 0s;
 }
 
-#rightside > div > a, #rightside > div > button {
+#rightside > div > a,
+#rightside > div > button {
     margin-bottom: 8px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
-#rightside > div > a:hover, #rightside > div > button {
-    transition: .3s
-}
-
-#rightside {
-    padding-right: 8px
+#rightside > div > a:hover,
+#rightside > div > button {
+    transition: all 0.3s ease 0s;
 }
 
 #rightside #rightside-config-hide {
-    transform: translate(42px, 0)
+    transform: translate(42px, 0px);
 }
 
 #footer {
@@ -6303,624 +6336,644 @@ a.console_switchbutton {
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
-    z-index: 1002
+    z-index: 1002;
 }
 
 @media screen and (max-width: 768px) {
     #footer {
         background: linear-gradient(180deg, var(--heo-background) 0, var(--heo-card-bg) 25%);
-        margin-top: 0;
-        z-index: 999
+        margin-top: 0px;
+        z-index: 999;
     }
 }
 
+#algolia-search .ais-hits--item.algolia-hit-item a {
+    color: var(--heo-fontcolor);
+}
+
+.aplayer .aplayer-list ol {
+    backdrop-filter: blur(1px);
+}
+
+.aplayer .aplayer-lrc::after {
+    display: none !important;
+}
+
+.aplayer.aplayer-withlrc.aplayer-withlist {
+    border-radius: 12px;
+}
+
+#article-container .aplayer {
+    border-radius: 12px;
+    min-height: 90px;
+    background: var(--heo-card-bg);
+    border: var(--style-border);
+    box-shadow: var(--heo-shadow-border);
+}
 
 #article-container.flink {
-    margin-top: 1rem
+    margin-top: 1rem;
 }
 
 #article-container.flink h2 {
-    margin-top: .5rem;
-    margin-bottom: 0
+    margin-top: 0.5rem;
+    margin-bottom: 0px;
+}
+
+#algolia-hits .tag-list {
+    padding: 4px 8px;
+    border-radius: 8px;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
+    border: var(--style-border);
+    cursor: pointer;
+}
+
+#algolia-hits .tag-list:hover {
+    background: var(--heo-main);
+    color: var(--heo-white);
 }
 
 #mobile-sidebar #mobile-sidebar-menus.open {
-    background: var(--heo-maskbg)
+    background: var(--heo-maskbg);
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item {
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #sidebar #sidebar-menus .site-data {
-    margin: 1rem 0;
-    padding: .6rem .5rem
+    margin: 1rem 0px;
+    padding: 0.6rem 0.5rem;
 }
 
 #sidebar-menus > hr {
-    display: none
+    display: none;
 }
 
 #card-info-btn {
     border-radius: 25px;
-    overflow: hidden
+    overflow: hidden;
 }
 
-#card-info-btn:before {
-    border-radius: 25px
+#card-info-btn::before {
+    border-radius: 25px;
+}
+
+#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a {
+    color: var(--heo-fontcolor);
+    width: auto;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .not-index-bg {
     height: 2rem !important;
     background-image: none !important;
-    background-color: var(--heo-none) !important
+    background-color: var(--heo-none) !important;
 }
 
 .not-index-bg img {
-    display: none
+    display: none;
 }
 
 .not-index-bg #page-site-info {
-    display: none
+    display: none;
 }
 
 .pace {
-    -webkit-pointer-events: none;
     pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
     z-index: 2000;
     position: fixed;
     margin: auto;
     top: 4px;
-    left: 0;
-    right: 0;
+    left: 0px;
+    right: 0px;
     height: 8px;
     border-radius: 8px;
     width: 4rem;
     background: var(--heo-secondbg);
     border: var(--style-border);
-    overflow: hidden
+    overflow: hidden;
 }
 
 .pace-inactive .pace-progress {
     opacity: 0;
-    transition: .3s ease-in
+    transition: all 0.3s ease-in 0s;
 }
 
 .pace .pace-progress {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
+    transform: translate3d(0px, 0px, 0px);
     max-width: 200px;
-    position: fixed;
     z-index: 2000;
     display: block;
     position: absolute;
-    top: 0;
+    top: 0px;
     right: 100%;
     height: 100%;
     width: 100%;
-    background: var(--heo-logo-color);
-    animation: gradient 2s ease infinite;
-    background-size: 200%
+    animation: 2s ease 0s infinite normal none running gradient;
+    background-size: 200%;
 }
 
 .pace.pace-inactive {
     opacity: 0;
-    transition: .3s;
-    top: -8px
+    transition: all 0.3s ease 0s;
+    top: -8px;
 }
 
 @media screen and (max-width: 1300px) {
     #aside-content .sticky_layout {
-        top: 60px
+        top: 60px;
     }
 }
 
 @media screen and (min-width: 768px) {
     #aside-content .sticky_layout {
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content .sticky_layout {
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 }
 
 #aside-content .sticky_layout {
     top: 80px;
-    transition: top 0s
+    transition: top 0s ease 0s;
 }
 
 #aside-content .sticky_layout .card-widget:first-child {
-    margin-top: 0
+    margin-top: 0px;
 }
 
 #aside-content .card-widget:hover {
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 #aside-content #card-funds {
     margin-bottom: 1rem;
-    min-height: 260px
+    min-height: 260px;
 }
 
 #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-    top: 80px
+    top: 80px;
 }
 
 #aside-content {
-    width: 300px
+    width: 300px;
 }
 
 @media screen and (max-width: 1300px) {
     #aside-content {
-        width: 300px
+        width: 300px;
     }
 }
 
 @media screen and (max-width: 900px) {
     #aside-content {
-        display: none
+        display: none;
     }
 }
 
 .card-widget.card-recent-post {
-    padding: .4rem .6rem !important
+    padding: 0.4rem 0.6rem !important;
 }
 
 #aside-content .aside-list > .aside-list-item .content > time {
-    display: none
+    display: none;
 }
 
 #aside-content .aside-list > .aside-list-item .content > .title {
     -webkit-line-clamp: 3;
     font-weight: 700;
-    padding: 2px 0
+    padding: 2px 0px;
 }
 
 #aside-content .aside-list > .aside-list-item {
-    padding: 8px;
+    padding-right: 8px;
+    padding-left: 8px;
+    border-radius: 12px;
+    transition: all 0.3s ease 0s;
+    margin: 4px 0px;
+    cursor: pointer;
     padding-top: 6px !important;
     padding-bottom: 6px !important;
-    border-radius: 12px;
-    transition: .3s;
-    margin: 4px 0;
-    cursor: pointer
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content .aside-list > .aside-list-item:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     #aside-content .aside-list > .aside-list-item:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 #aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
-    transform: scale(1)
+    transform: scale(1);
 }
 
 #aside-content .aside-list > .aside-list-item:not(:last-child) {
-    border-bottom: 0 dashed var(--heo-background) !important
+    border-bottom: 0 dashed var(--heo-background) !important;
 }
 
 #aside-content .aside-list > .aside-list-item .thumbnail {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
+    -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
     border-radius: 8px;
-    border: var(--style-border)
+    border: var(--style-border);
 }
 
 #aside-content .aside-list > .aside-list-item:hover {
     background: var(--heo-main);
     color: var(--heo-white);
-    transition: .3s;
-    box-shadow: var(--heo-shadow-main)
+    transition: all 0.3s ease 0s;
+    box-shadow: var(--heo-shadow-main);
 }
 
 #aside-content .aside-list > .aside-list-item:hover a {
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 a.card-archive-list-link-more {
-    color: var(--heo-white) !important;
     background: var(--heo-card-btn-bg);
-    margin-top: 8px
+    margin-top: 8px;
+    color: var(--heo-white) !important;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
     border-radius: 8px;
-    margin: 4px 0;
+    margin: 4px 0px;
     display: flex;
     flex-direction: column;
     align-content: space-between;
-    border: var(--style-border)
+    border: var(--style-border);
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
-    width: auto
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
+    width: auto;
 }
 
-#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
+#aside-content .card-archives ul.card-archive-list,
+#aside-content .card-categories ul.card-category-list {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
-    flex-wrap: wrap
 }
 
 .card-allinfo hr {
     display: flex;
     position: relative;
-    margin: 1rem 0;
-    border: 1px dashed var(--heo-theme-op)
+    margin: 1rem 0px;
+    border: 1px dashed var(--heo-theme-op);
 }
 
 .card-allinfo .item-headline {
-    display: none
+    display: none;
 }
 
 span.card-archive-list-count {
     width: auto;
     text-align: left;
     font-size: 1.1rem;
-    line-height: .9;
-    font-weight: 700
+    line-height: 0.9;
+    font-weight: 700;
 }
 
 .card-archive-list-count-group {
     display: flex;
     flex-direction: row;
-    align-items: baseline
+    align-items: baseline;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, #aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
     width: fit-content;
-    margin-left: 4px
+    margin-left: 4px;
 }
 
 .card-archive-list-count-unit {
     width: auto;
     text-align: left;
     font-size: 14px;
-    font-weight: 700
+    font-weight: 700;
 }
 
 .card-archive-list-date {
     font-size: 14px;
-    opacity: .6
+    opacity: 0.6;
 }
 
 li.card-archive-list-item {
     width: 100%;
-    flex: 0 0 48%
+    flex: 0 0 48%;
 }
 
 .card-category-list {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
+    flex-flow: row wrap;
+    justify-content: space-between;
 }
 
 .card-category-list-item {
-    width: 45%
+    width: 45%;
 }
 
 .card-category-list-count {
-    display: none !important
+    display: none !important;
 }
 
 .card-category-list-name {
+    text-align: center;
     width: 100% !important;
-    text-align: center
 }
 
 .webinfo-item {
     display: flex;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .webinfo-item-title {
-    display: flex
+    display: flex;
 }
 
 .webinfo-item-title i {
     line-height: 2;
     margin-right: 6px;
     width: 16px;
-    text-align: center
+    text-align: center;
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content {
-        padding-left: 1rem
+        padding-left: 1rem;
     }
 
     #aside-content .sticky_layout {
-        top: calc(60px + .5rem)
+        top: calc(60px + 0.5rem);
     }
 
     #page-header.nav-visible + .layout > .aside-content > .sticky_layout {
-        top: calc(60px + .5rem)
+        top: calc(60px + 0.5rem);
     }
 
-    [data-theme=dark] #aside-content > .card-widget.card-info {
-        border: var(--style-border)
+    [data-theme="dark"] #aside-content > .card-widget.card-info {
+        border: var(--style-border);
     }
 
     .coverdiv {
-        height: 130%
+        height: 130%;
     }
 }
 
 .medium-zoom-overlay {
+    backdrop-filter: saturate(180%) blur(20px);
     background: var(--heo-maskbg) !important;
     z-index: 99998 !important;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 .medium-zoom-image--opened {
-    border-radius: 2px
+    border-radius: 2px;
 }
 
 #toggle-sidebar {
-    bottom: 80px
+    bottom: 80px;
 }
 
 .button--animated {
+    transition: all 0.3s ease 0s;
     border-radius: 8px !important;
-    transition: .3s
 }
 
 #error-wrap .error-content .error-info a:hover {
     background-color: var(--heo-blue);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     transform: scale(1.03);
-    box-shadow: var(--heo-shadow-blue)
+    box-shadow: var(--heo-shadow-blue);
 }
 
-.button--animated:before {
-    display: none
+.button--animated::before {
+    display: none;
 }
 
 a.tree-list-post-link {
-    font-size: .8rem;
-    line-height: 1.2 !important
+    font-size: 0.8rem;
+    line-height: 1.2 !important;
 }
 
 li.tree-list-item {
     line-height: 1.9;
-    margin: .3rem 0
+    margin: 0.3rem 0px;
 }
 
 .title-h2-a {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: .5rem
+    margin-top: 0.5rem;
 }
 
 .title-h2-a a {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     color: var(--heo-secondtext);
-    font-weight: 700
+    font-weight: 700;
 }
 
 .title-h2-a a:hover {
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 .title-h2-a-left {
     display: flex;
-    align-items: center
+    align-items: center;
 }
 
 .title-h2-a-left h2 {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
 }
 
 #card-funds .funds-list::-webkit-scrollbar {
-    display: none !important
+    display: none !important;
 }
 
 .funds-tips {
-    font-size: .5rem;
+    font-size: 0.5rem;
     width: 100%;
     text-align: center;
     color: var(--heo-secondtext);
-    margin: .5rem 0 0 0;
+    margin: 0.5rem 0px 0px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     position: absolute;
-    bottom: .5rem;
-    left: 0;
-    padding: 0 1rem
+    bottom: 0.5rem;
+    left: 0px;
+    padding: 0px 1rem;
 }
 
 .funds-list {
     height: 200px;
-    overflow: scroll
+    overflow: scroll;
 }
 
 span.fund_name {
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis
+    text-overflow: ellipsis;
 }
 
 .funds-info {
     margin-left: 4px;
-    color: var(--heo-secondtext)
+    color: var(--heo-secondtext);
 }
 
 .funds-list-item .content {
     display: flex;
-    flex-direction: row;
+    flex-flow: row nowrap;
     justify-content: space-between;
-    flex-wrap: nowrap
 }
 
 .fund_dayGrowth {
     display: inline;
-    float: right
+    float: right;
 }
 
 .fund-up {
-    color: var(--heo-red)
+    color: var(--heo-red);
 }
 
 .fund-down {
-    color: var(--heo-green)
+    color: var(--heo-green);
 }
 
 #aside-content .card-widget#card-music {
     background: var(--heo-pink);
     display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
+    place-content: center;
+    padding: 0px;
     cursor: pointer;
-    border: none
+    border: none;
 }
 
 #aside-content .card-widget#card-music img {
     max-height: 110px;
-    object-fit: cover
+    object-fit: cover;
 }
 
 #aside-content .card-widget#card-music:hover img {
     transform: scale(1.03);
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
+    transition: all 0.5s ease 0s;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
 .music-link {
     display: flex;
-    justify-content: center;
-    align-content: center
+    place-content: center;
 }
 
 #aside-content .card-widget#card-friendlinks {
     background: var(--heo-main);
     display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
+    place-content: center;
+    padding: 0px;
     cursor: pointer;
-    border: none
+    border: none;
 }
 
 #aside-content .card-widget#card-friendlinks img {
     max-height: 110px;
-    object-fit: cover
+    object-fit: cover;
 }
 
 #aside-content .card-widget#card-friendlinks:hover img {
     transform: scale(1.03);
-    transition: .5s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
+    transition: all 0.5s ease 0s;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
 .friend-link {
     display: flex;
-    justify-content: center;
-    align-content: center
+    place-content: center;
 }
 
 #aside-content .card-widget#card-wechat {
-    background: #57bd6a;
+    background: rgb(87, 189, 106);
     display: flex;
-    justify-content: center;
-    align-content: center;
-    padding: 0;
+    place-content: center;
+    padding: 0px;
     cursor: pointer;
     border: none;
-    height: 110px
+    height: 110px;
 }
 
 #aside-content .card-widget#card-wechat img {
     max-height: 110px;
-    object-fit: cover
+    object-fit: cover;
 }
 
 .friend-link {
     display: flex;
-    justify-content: center;
-    align-content: center
+    place-content: center;
 }
 
 #flip-wrapper {
     position: relative;
     width: 235px;
     height: 110px;
-    z-index: 1
+    z-index: 1;
 }
 
 #flip-wrapper {
-    -webkit-perspective: 1000;
-    perspective: 1000
+    perspective: 1000px;
 }
 
 #flip-content {
     width: 100%;
     height: 100%;
-    -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
-    transition: cubic-bezier(0, 0, 0, 1.29) .3s
+    transition: all 0.3s cubic-bezier(0, 0, 0, 1.29) 0s;
 }
 
 #flip-wrapper:hover #flip-content {
-    -webkit-transform: rotateY(180deg);
-    transform: rotateY(180deg)
+    transform: rotateY(180deg);
 }
 
-/* 公众号推广 图片忽略 */
 .face {
     position: absolute;
     width: 100%;
     height: 100%;
-    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    /*background: url() center center no-repeat;*/
-    background-size: 100%
+    background: url("https://img.zhheo.com/i/2022/08/31/630efc6e3e794.png") center center / 100% no-repeat;
 }
 
 .back.face {
     display: block;
-    -webkit-transform: rotateY(180deg);
     transform: rotateY(180deg);
     box-sizing: border-box;
-    /*background: url() center center no-repeat;*/
-    background-size: 100%
+    background: url("https://img.zhheo.com/i/2022/08/31/630efca2abb02.png") center center / 100% no-repeat;
 }
 
 #card-vip-designweekly.card-widget {
+    padding: 0px;
+    cursor: pointer;
     display: flex !important;
-    padding: 0;
-    cursor: pointer
 }
 
 #card-vip-designweekly.card-widget .card-vip-designweekly-img {
     width: 100%;
-    object-fit: cover
+    object-fit: cover;
 }
 
 .card-vip-tips {
@@ -6932,46 +6985,46 @@ span.fund_name {
     padding: 1px 6px;
     background: var(--heo-black-op);
     border-radius: 8px;
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 #widget-tree-button {
+    color: var(--heo-fontcolor);
     background-color: var(--heo-secondbg) !important;
     box-shadow: var(--heo-shadow-light2black) !important;
-    color: var(--heo-fontcolor)
 }
 
 #widget-tree:hover #widget-tree-button {
     opacity: 0;
-    left: -1.5rem
+    left: -1.5rem;
 }
 
 #widget-tree {
-    background-color: var(--heo-maskbg) !important
+    background-color: var(--heo-maskbg) !important;
 }
 
 #widget-tree:hover {
-    left: 0 !important;
     backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px)
+    left: 0px !important;
 }
 
 #widget-tree a {
     -webkit-line-clamp: 2;
-    color: var(--heo-fontcolor) !important
+    color: var(--heo-fontcolor) !important;
 }
 
 #widget-tree a:hover {
-    color: var(--heo-hovertext) !important
+    color: var(--heo-hovertext) !important;
 }
 
-.toggle-post-icon, .toggle-toc-icon {
-    color: var(--heo-fontcolor) !important
+.toggle-post-icon,
+.toggle-toc-icon {
+    color: var(--heo-fontcolor) !important;
 }
 
 @media screen and (max-width: 768px) {
     #widget-tree {
-        display: none !important
+        display: none !important;
     }
 }
 
@@ -6980,27 +7033,27 @@ span.fund_name {
     z-index: 99;
     right: 30px;
     display: flex;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     opacity: 0;
     bottom: -25px;
     width: 88px;
     height: 123px;
-    user-select: none
+    user-select: none;
 }
 
 .guli_top.guli-fixed {
     opacity: 1;
-    bottom: 25px
+    bottom: 25px;
 }
 
 #guli_top .guli_body {
     position: relative;
     height: 123px;
-    z-index: 1003
+    z-index: 1003;
 }
 
 #guli_top .guli_body:hover {
-    cursor: pointer
+    cursor: pointer;
 }
 
 #guli_top .guli_wing {
@@ -7008,21 +7061,21 @@ span.fund_name {
     height: 64px;
     z-index: 1002;
     bottom: -120px;
-    transform: scale(.01);
-    box-shadow: var(--heo-shadow-yellow)
+    transform: scale(0.01);
+    box-shadow: var(--heo-shadow-yellow);
 }
 
 #guli_top.open_wing .guli_wing {
-    transform: scale(1.03)
+    transform: scale(1.03);
 }
 
 #guli_top.open_wing .guli_body {
-    transform: scale(1)
+    transform: scale(1);
 }
 
 @media screen and (max-width: 1300px) {
     #guli_top {
-        display: none
+        display: none;
     }
 }
 
@@ -7037,130 +7090,94 @@ span.fund_name {
     right: 20px;
     position: fixed;
     border-radius: 12px;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     z-index: 1002;
     user-select: none;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
     border: var(--style-border);
-    animation: barrageIn .6s cubic-bezier(.42, 0, .3, 1.11)
+    animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageIn;
 }
 
 #cookies-window.cw-hide {
     opacity: 0;
-    animation: barrageOut .6s cubic-bezier(.42, 0, .3, 1.11);
-    z-index: -1
+    animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageOut;
+    z-index: -1;
 }
 
 #cookies-window .cookies-window-title {
     padding-bottom: 4px;
     border-bottom: var(--style-border);
     font-size: 12px;
-    font-weight: 700
+    font-weight: 700;
 }
 
 #cookies-window .cookies-window-content {
     font-size: 14px;
     display: flex;
     justify-content: space-around;
-    align-items: center
+    align-items: center;
 }
 
 .cookie-to {
     margin-right: 4px;
-    font-weight: 700
+    font-weight: 700;
 }
 
 .cookies-link {
     margin-left: auto;
-    font-size: 16px
+    font-size: 16px;
 }
 
 @media screen and (max-width: 1300px) {
     #cookies-window {
-        display: none
+        display: none;
     }
 }
 
 .heo-tag {
     padding: 1px 6px;
-    border-radius: 6px 6px 6px 0;
+    border-radius: 6px 6px 6px 0px;
     margin-left: 4px;
     height: 20px;
-    line-height: 19px
+    line-height: 19px;
 }
 
 .heo-tag-new-view {
     color: var(--heo-white);
-    background: var(--heo-green)
+    background: var(--heo-green);
 }
 
 .heo-tag-hot-view {
     color: var(--heo-white);
-    background: var(--heo-red)
-}
-
-#loading-box .loading-bg {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background: var(--heo-card-bg);
-    z-index: 99999;
-    opacity: 1;
-    transition: .3s;
-    pointer-events: all
-}
-
-#loading-box.loaded .loading-bg {
-    opacity: 0;
-    pointer-events: none
-}
-
-#loading-box .loading-img {
-    width: 100px;
-    margin: auto;
-    animation-duration: .3s;
-    animation-name: loadingAction;
-    animation-iteration-count: infinite;
-    animation-direction: alternate
-}
-
-@keyframes loadingAction {
-    from {
-        opacity: 1
-    }
-    to {
-        opacity: .4
-    }
+    background: var(--heo-red);
 }
 
 #page-header.full_page {
     height: 2rem;
+    background-color: var(--heo-none);
     background-image: none !important;
-    background-color: var(--heo-none)
 }
 
 #page-header.full_page #site-info {
-    display: none
+    display: none;
 }
 
 .layout > div:first-child {
-    width: calc(100% - 300px)
+    width: calc(100% - 300px);
 }
 
 div#categoryList {
     display: flex;
     width: 100%;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .categoryItem {
     overflow: hidden;
     transform: scale(1);
-    transition: all .8s cubic-bezier(.65, .15, .37, 1.19);
+    transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19) 0s;
     height: 48%;
-    border-radius: 12px
+    border-radius: 12px;
 }
 
 a.categoryButton {
@@ -7172,33 +7189,37 @@ a.categoryButton {
     text-align: left;
     line-height: 4em;
     font-weight: 700;
-    font-size: .9rem;
+    font-size: 0.9rem;
     color: var(--heo-white);
-    transition: all .8s cubic-bezier(.39, .575, .565, 1);
+    transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
     transform: scale(1);
     overflow: hidden;
-    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+}
+
+a.categoryButton i {
+    transform: scale(1) rotate(15deg);
 }
 
 @media screen and (min-width: 1300px) {
     a.categoryButton:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 @media screen and (max-width: 768px) {
     a.categoryButton {
-        border-radius: 8px
+        border-radius: 8px;
     }
 
     .categoryItem {
-        border-radius: 0;
+        border-radius: 0px;
         height: 47%;
-        box-shadow: none !important
+        box-shadow: none !important;
     }
 }
 
-a.categoryButton:after {
+a.categoryButton::after {
     top: 50px;
     width: 1rem;
     left: 21px;
@@ -7206,75 +7227,73 @@ a.categoryButton:after {
     background: var(--heo-white);
     content: "";
     border-radius: 1px;
-    position: absolute
+    position: absolute;
 }
 
 .categoryButtonText {
-    padding-left: 21px
+    padding-left: 21px;
 }
 
 a.categoryButton i {
     font-size: 5rem;
-    opacity: .2;
+    opacity: 0.2;
     position: absolute;
-    right: 0;
+    right: 0px;
     top: 20%;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     width: 100px;
     text-align: center;
-    filter: blur(2px)
+    filter: blur(2px);
 }
 
 @media screen and (max-width: 768px) {
     a.categoryButton i {
-        display: none
+        display: none;
     }
 
     .recent-post-top .categoryGroup {
-        min-width: 130px !important;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         margin-left: 1rem;
         max-height: 164px;
         overflow: hidden;
-        position: relative
+        position: relative;
+        min-width: 130px !important;
     }
 }
 
 .topGroup {
-    display: flex
+    display: flex;
 }
 
 #bannerGroup {
-    display: flex
+    display: flex;
 }
 
 div#banners {
-    display: none
+    display: none;
 }
 
 .topGroup .todayCard {
-    display: none
+    display: none;
 }
 
 @media screen and (min-width: 1300px) {
     .topGroup {
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        height: calc(328px + .5rem);
-        align-content: space-between;
+        flex-flow: row wrap;
+        place-content: space-between flex-end;
+        height: calc(328px + 0.5rem);
         width: calc(600px + 1.5rem);
-        position: relative
+        position: relative;
     }
 
     div#bannerGroup {
-        width: calc(100% - 600px - 2rem);
-        margin-right: .5rem;
-        height: calc(328px + .5rem);
+        width: calc((100% - 600px) - 2rem);
+        margin-right: 0.5rem;
+        height: calc(328px + 0.5rem);
         display: flex;
         flex-direction: column;
-        justify-content: space-between
+        justify-content: space-between;
     }
 
     div#banners {
@@ -7282,31 +7301,30 @@ div#banners {
         width: 100%;
         height: 76%;
         background: var(--heo-card-bg);
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         border: var(--style-border);
         border-radius: 12px;
-        overflow: hidden;
         position: relative;
         box-shadow: var(--heo-shadow-border);
         flex-direction: column;
         overflow: hidden;
-        transition: .3s;
-        clip-path: inset(0 0 0 0 round 12px)
+        transition: all 0.3s ease 0s;
+        clip-path: inset(0px round 12px);
     }
 
     div#banners:hover {
-        box-shadow: var(--heo-shadow-main)
+        box-shadow: var(--heo-shadow-main);
     }
 
     #banners.flink {
-        margin-bottom: .5rem
+        margin-bottom: 0.5rem;
     }
 
     #banners .banner-button-group {
         position: absolute;
         right: 2rem;
         top: 2rem;
-        display: flex
+        display: flex;
     }
 
     #banners .banner-button {
@@ -7317,9 +7335,9 @@ div#banners {
         display: flex;
         align-items: center;
         z-index: 1;
-        transition: .3s;
+        transition: all 0.3s ease 0s;
         cursor: pointer;
-        box-shadow: var(--heo-shadow-black)
+        box-shadow: var(--heo-shadow-black);
     }
 
     #banners .banner-button.secondary {
@@ -7327,17 +7345,17 @@ div#banners {
         border: var(--style-border-always);
         color: var(--heo-lighttext);
         margin-right: 1rem;
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 
     #banners .banner-button:hover {
         background: var(--heo-theme);
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     #banners .banner-button i {
         margin-right: 8px;
-        font-size: 1rem
+        font-size: 1rem;
     }
 
     .banners-title {
@@ -7345,18 +7363,18 @@ div#banners {
         left: 1.5rem;
         position: absolute;
         display: flex;
-        flex-direction: column
+        flex-direction: column;
     }
 
     .flink .banners-title {
-        top: 1.5rem
+        top: 1.5rem;
     }
 
     .banners-title-big {
         font-size: 36px;
         line-height: 1;
         font-weight: 700;
-        margin-bottom: 8px
+        margin-bottom: 8px;
     }
 
     .banners-title-small {
@@ -7364,47 +7382,45 @@ div#banners {
         line-height: 1;
         color: var(--heo-secondtext);
         margin-top: 8px;
-        margin-bottom: .5rem
+        margin-bottom: 0.5rem;
     }
 
     #banner-hover {
         position: absolute;
         width: 100%;
         height: 100%;
-        top: 0;
-        left: 0;
+        top: 0px;
+        left: 0px;
         background: var(--heo-theme);
         color: var(--heo-white);
-        padding-left: .5rem;
+        padding-left: 0.5rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
         opacity: 0;
-        transition: cubic-bezier(.71, .15, .16, 1.15) .6s
+        transition: all 0.6s cubic-bezier(0.71, 0.15, 0.16, 1.15) 0s;
     }
 
     .bannerText {
         font-size: 4rem;
         line-height: 4rem;
-        font-weight: 700
+        font-weight: 700;
     }
 
     .banner-righticon {
         font-size: 4rem;
-        opacity: .6
+        opacity: 0.6;
     }
 
     #banners:hover #banner-hover {
         opacity: 1;
         padding-left: 2rem;
-        background: #4259efc9;
+        background: 0% 0% / 200% rgba(66, 89, 239, 0.79);
         backdrop-filter: blur(15px);
-        -webkit-backdrop-filter: blur(15px);
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-        transition: .3s;
-        background-size: 200%;
-        cursor: pointer
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+        transition: all 0.3s ease 0s;
+        cursor: pointer;
     }
 
     .topGroup .todayCard {
@@ -7412,30 +7428,30 @@ div#banners {
         width: calc(600px + 1rem);
         height: 100%;
         z-index: 1;
-        top: 0;
-        left: 0;
+        top: 0px;
+        left: 0px;
         background: var(--card-bg);
         border-radius: 12px;
-        margin-left: .5rem;
+        margin-left: 0.5rem;
         overflow: hidden;
-        transition: .3s;
+        transition: all 0.3s ease 0s;
         display: flex;
         cursor: pointer;
-        pointer-events: all
+        pointer-events: all;
     }
 
     .topGroup .todayCard::after {
         position: absolute;
-        content: '';
+        content: "";
         width: 100%;
         height: 100%;
-        top: 0;
-        left: 0
+        top: 0px;
+        left: 0px;
     }
 
     .topGroup .todayCard.hide {
         opacity: 0;
-        pointer-events: none
+        pointer-events: none;
     }
 
     .topGroup .todayCard .todayCard-info {
@@ -7445,23 +7461,23 @@ div#banners {
         z-index: 2;
         color: var(--heo-white);
         max-width: 60%;
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     .topGroup .todayCard.hide .todayCard-info {
         bottom: 1rem;
-        opacity: 0
+        opacity: 0;
     }
 
     .topGroup .todayCard .todayCard-info .todayCard-tips {
-        opacity: .8;
-        font-size: .6rem
+        opacity: 0.8;
+        font-size: 0.6rem;
     }
 
     .topGroup .todayCard .todayCard-info .todayCard-title {
         font-size: 28px;
         font-weight: 700;
-        line-height: 36px
+        line-height: 36px;
     }
 
     .topGroup .banner-button-group {
@@ -7469,163 +7485,157 @@ div#banners {
         right: 2rem;
         bottom: 2rem;
         display: flex;
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     .topGroup .todayCard.hide .banner-button-group {
-        bottom: 1rem
+        bottom: 1rem;
     }
 
     .topGroup .banner-button {
-        background: var(--heo-maskbgdeep);
+        background: var(--heo-white-op);
         border-radius: 20px;
-        color: var(--font-color);
+        color: var(--heo-white);
         display: flex;
         align-items: center;
         z-index: 1;
-        transition: .3s;
+        transition: all 0.3s ease 0s;
         cursor: pointer;
         backdrop-filter: saturate(180%) blur(20px);
-        -webkit-backdrop-filter: blur(20px);
         height: 40px;
         width: 124px;
-        justify-content: center
+        justify-content: center;
     }
 
     .topGroup .banner-button:hover {
         background: var(--heo-theme);
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     .topGroup .banner-button i {
         margin-right: 8px;
-        font-size: 1rem
+        font-size: 1rem;
     }
 
     .topGroup .todayCard .todayCard-cover {
         position: absolute;
         min-width: 100%;
         min-height: 100%;
-        top: 0;
-        left: 0;
+        top: 0px;
+        left: 0px;
         background-size: cover;
         z-index: -1;
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 
     .topGroup .todayCard.hide .todayCard-cover {
-        transform: scale(1.2)
+        transform: scale(1.2);
     }
 }
 
 @keyframes rowup {
-    from {
-        transform: translateX(0)
+    0% {
+        transform: translateX(0px);
     }
-    to {
-        transform: translateX(-50%)
+
+    100% {
+        transform: translateX(-50%);
     }
 }
 
 .tags-group-icon {
     width: 120px;
     height: 120px;
-    border-radius: 30px
+    border-radius: 30px;
 }
 
 .tags-group-all {
     display: flex;
-    transform: rotate(-30deg)
+    transform: rotate(-30deg);
 }
 
 .tags-group-all.nowrapMove {
-    transform: rotate(0);
-    padding-bottom: 2rem
+    transform: rotate(0deg);
+    padding-bottom: 2rem;
 }
 
 .tags-group-wrapper {
     margin-top: 5rem;
     display: flex;
     flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
+    animation: 60s linear 0s infinite normal none running rowup;
 }
 
 .nowrapMove .tags-group-wrapper {
     margin-top: 7rem;
-    animation: rowup 120s linear infinite
+    animation: 120s linear 0s infinite normal none running rowup;
 }
 
-.tags-group-icon-pair .tags-group-icon:nth-child(even) {
+.tags-group-icon-pair .tags-group-icon:nth-child(2n) {
     margin-top: 1rem;
-    transform: translate(-60px)
+    transform: translate(-60px);
 }
 
 .tags-group-icon-pair {
-    margin-left: 1rem
+    margin-left: 1rem;
 }
 
 .tags-group-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: rgb(255, 255, 255);
     font-size: 66px;
     font-weight: 700;
-    box-shadow: var(--heo-shadow-blackdeep)
+    box-shadow: var(--heo-shadow-blackdeep);
 }
 
 .nowrapMove .tags-group-icon {
-    border-radius: 50%
+    border-radius: 50%;
 }
 
 .tags-group-icon img {
-    width: 60%
+    width: 60%;
 }
 
 .nowrapMove .tags-group-icon img {
     min-width: 100%;
     min-height: 100%;
     border-radius: 50%;
-    object-fit: cover
+    object-fit: cover;
 }
 
 #categoryList > div:nth-child(1) > a::before {
     height: 24px;
     width: 44px;
     content: "";
-    background: url(../../img.zhheo.com/i/2022/08/31/630efd0bc1115.png) no-repeat;
-    background-size: 38px 24px;
+    background: url("https://img.zhheo.com/i/2022/08/31/630efd0bc1115.png") 0% 0% / 38px 24px no-repeat;
     position: absolute;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 .categoryItem:hover i {
-    opacity: .8;
-    transition: .8s;
-    transition-delay: .15s;
-    transform: scale(1.03);
+    opacity: 0.8;
+    transition: all 0.8s ease 0.15s;
+    transform: scale(1.03) rotate(0deg);
     font-size: 2.5rem;
-    filter: blur(0)
+    filter: blur(0px);
 }
 
 @media screen and (min-width: 1300px) {
     .categoryItem:hover i {
-        transform: scale(1.03)
+        transform: scale(1.03) rotate(0deg);
     }
 }
 
-#categoryList > a:nth-child() > i {
-    padding-right: 8px
-}
-
 .cate-button-text {
-    box-shadow: var(--heo-shadow-black)
+    box-shadow: var(--heo-shadow-black);
 }
 
 @media screen and (max-width: 768px) {
     div#categoryList {
-        display: none
+        display: none;
     }
 }
 
@@ -7633,74 +7643,68 @@ div#banners {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    min-width: 200px
+    min-width: 200px;
 }
 
 .categoryGroup .categoryItem:nth-child(3) {
-    display: none
+    display: none;
 }
 
 @media screen and (min-width: 1300px) {
     .recent-post-top .categoryGroup {
         flex-direction: row;
-        height: 24%
+        height: 24%;
     }
 
     .categoryItem {
-        width: calc(100% / 3 - .33rem);
+        width: calc(33.3333% - 0.33rem);
         height: 100%;
-        margin-right: .5rem
+        margin-right: 0.5rem;
     }
 
     .categoryItem:last-child {
-        margin-right: 0
+        margin-right: 0px;
     }
 
     .categoryItem:hover {
-        width: 50%
+        width: 50%;
     }
 
     .categoryGroup .categoryItem:nth-child(3) {
-        display: flex
+        display: flex;
     }
 }
 
 a.categoryButton.bikan {
-    background: linear-gradient(to right, #358bff, #15c6ff);
-    background-size: 200%
+    background: linear-gradient(to right, rgb(53, 139, 255), rgb(21, 198, 255)) 0% 0% / 200%;
 }
 
 a.categoryButton.remen {
-    background: linear-gradient(to right, #f65, #ffbf37);
-    background-size: 200%
+    background: linear-gradient(to right, rgb(255, 102, 85), rgb(255, 191, 55)) 0% 0% / 200%;
 }
 
 a.categoryButton.shiyong {
-    background: linear-gradient(to right, #18e7ae, #1eebeb);
-    background-size: 200%
+    background: linear-gradient(to right, rgb(24, 231, 174), rgb(30, 235, 235)) 0% 0% / 200%;
 }
 
-[data-theme=dark] a.categoryButton.bikan {
-    background: linear-gradient(to right, #0653b8, #2fcbff);
-    background-size: 200%
+[data-theme="dark"] a.categoryButton.bikan {
+    background: linear-gradient(to right, rgb(6, 83, 184), rgb(47, 203, 255)) 0% 0% / 200%;
 }
 
-[data-theme=dark] a.categoryButton.remen {
-    background: linear-gradient(to right, #e22a16, #da980c);
-    background-size: 200%
+[data-theme="dark"] a.categoryButton.remen {
+    background: linear-gradient(to right, rgb(226, 42, 22), rgb(218, 152, 12)) 0% 0% / 200%;
 }
 
-[data-theme=dark] a.categoryButton.shiyong {
-    background: linear-gradient(to right, #099e74, #0ea4a4);
-    background-size: 200%
+[data-theme="dark"] a.categoryButton.shiyong {
+    background: linear-gradient(to right, rgb(9, 158, 116), rgb(14, 164, 164)) 0% 0% / 200%;
 }
 
 a.categoryButton:hover {
-    background-position: 100% 0
+    background-position: 100% 0px;
 }
 
 #category-bar {
-    padding: .4rem 1rem .4rem .5rem;
+    padding: 0.4rem 1rem 0.4rem 0.5rem;
     background: var(--heo-card-bg);
     border-radius: 12px;
     display: flex;
@@ -7708,266 +7712,256 @@ a.categoryButton:hover {
     overflow: hidden;
     margin-bottom: 1rem;
     border: var(--style-border);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     width: 100%;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 @media screen and (min-width: 1300px) {
     #category-bar:hover {
         border: var(--style-border-hover);
-        box-shadow: var(--heo-shadow-main)
+        box-shadow: var(--heo-shadow-main);
     }
 
     .category-in-bar-tips {
-        margin-bottom: .25rem
+        margin-bottom: 0.25rem;
     }
 }
 
 @media screen and (max-width: 768px) {
     #category-bar {
-        border-radius: 0;
+        border-radius: 0px;
         background: var(--heo-background);
-        margin-bottom: 0;
-        position: -webkit-sticky;
+        margin-bottom: 0px;
         position: sticky;
         top: 60px;
         z-index: 1;
-        padding: 0 1rem 0 16px;
+        padding: 0px 1rem 0px 16px;
         height: 50px;
-        margin-top: 0;
-        align-items: center
+        margin-top: 0px;
+        align-items: center;
     }
 }
 
 #category #category-bar {
-    padding: 0;
+    padding: 0px;
     border: none;
-    box-shadow: none
+    box-shadow: none;
 }
 
 #category a.category-bar-item.select a {
-    display: none
+    display: none;
 }
 
 .category-in-bar {
     display: flex;
     white-space: nowrap;
-    align-items: center
+    align-items: center;
 }
 
 .category-in-bar-tips {
-    margin-right: 1rem
+    margin-right: 1rem;
 }
 
 .category-bar-items {
     white-space: nowrap;
     overflow-x: scroll;
-    display: flex
+    display: flex;
 }
 
 .category-in-bar .category-in-bar-tips {
-    margin-bottom: 0
+    margin-bottom: 0px;
 }
 
 .category-in-bar #category-bar {
-    margin-bottom: 0
+    margin-bottom: 0px;
 }
 
 .category-bar-items::-webkit-scrollbar {
-    display: none
+    display: none;
 }
 
 .category-bar-item a {
-    padding: .1rem .5rem;
-    margin: 0 4px;
+    padding: 0.1rem 0.5rem;
+    margin: 0px 4px;
     font-weight: 700;
-    border-radius: 8px
+    border-radius: 8px;
 }
 
 .category-bar-item:hover a {
     background: var(--heo-theme);
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .category-bar-item.select a {
     background: var(--heo-theme);
     color: var(--heo-white);
-    border-radius: 8px
+    border-radius: 8px;
 }
 
 @media screen and (max-width: 768px) {
     .category-bar-item.select a {
-        border-radius: 8px
+        border-radius: 8px;
     }
 
     .category-bar-item a {
-        border-radius: 8px
+        border-radius: 8px;
     }
 
     .category-in-bar {
-        position: -webkit-sticky;
         position: sticky;
         top: 60px;
         background: var(--heo-background);
-        z-index: 1002
+        z-index: 1002;
     }
 }
 
 .category-bar-more {
     margin-left: 1rem;
-    font-weight: 700
+    font-weight: 700;
 }
 
-
-
-
-
-li, ul {
+li,
+ul {
     list-style: none;
     display: block;
-    margin: 0;
-    padding: 0
+    margin: 0px;
+    padding: 0px;
 }
 
-
-
-
-
-
 #recent-posts > .recent-post-item > .recent-post-info {
-    padding: 0
+    padding: 0px;
 }
 
 .recent-post-item .recent-post-info .recent-post-info-top {
     position: relative;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     padding: 32px;
-    width: 100%
+    width: 100%;
 }
 
 .recent-post-item .recent-post-info .recent-post-info-top .article-title {
     line-height: 30px;
-    margin-top: 0;
+    margin-top: 0px;
     font-weight: 700;
     color: var(--heo-fontcolor);
-    margin-bottom: 0;
+    margin-bottom: 0px;
     width: 100%;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     font-size: 1rem;
     -webkit-line-clamp: 2;
     display: -webkit-box;
     overflow: hidden;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
 }
 
 .recent-post-item .recent-post-info .recent-post-info-top .lastestpost {
-    display: none
+    display: none;
 }
 
 @media screen and (min-width: 1300px) {
     #recent-posts > .recent-post-item:nth-child(2) .lastestpost {
         display: flex;
         color: var(--heo-lighttext);
-        font-size: .5rem;
-        position: relative
+        font-size: 0.5rem;
+        position: relative;
     }
 
     #recent-posts .recent-post-item.lastestpost-item .recent-post-info-top {
-        padding-top: 16px
+        padding-top: 16px;
     }
 
     .recent-post-item .recent-post-info .recent-post-info-top .article-title {
         font-size: 22px;
-        -webkit-line-clamp: 2
+        -webkit-line-clamp: 2;
     }
 
     .recent-post-item:hover .recent-post-info .recent-post-info-top .article-title {
-        -webkit-line-clamp: 2
+        -webkit-line-clamp: 2;
     }
 
     #recent-posts > .recent-post-item .post_cover {
-        transition: 1s !important;
         height: 225px;
-        width: 100%
+        width: 100%;
+        transition: all 1s ease 0s !important;
     }
 
     .recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
         opacity: 0 !important;
-        -webkit-line-clamp: 2 !important
+        -webkit-line-clamp: 2 !important;
     }
 
     .recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
-        opacity: 1 !important
+        opacity: 1 !important;
     }
 }
 
 .recent-post-item .recent-post-info .recent-post-info-top .content {
     opacity: 0;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-height: 1.4;
     color: var(--heo-secondtext);
-    margin-top: .5rem
+    margin-top: 0.5rem;
 }
 
 @media screen and (max-width: 1300px) {
     .recent-post-item:hover .recent-post-info .recent-post-info-top .content {
-        display: none
+        display: none;
     }
 }
 
 @media screen and (min-width: 1300px) {
     .recent-post-item:hover .recent-post-info .recent-post-info-top .content {
-        display: none
+        display: none;
     }
 }
 
 @media screen and (min-width: 768px) {
     .recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content {
         opacity: 1;
-        -webkit-line-clamp: 4
+        -webkit-line-clamp: 4;
     }
 
     .recent-post-item.post-card-large:hover .recent-post-info .recent-post-info-top .content {
-        -webkit-line-clamp: 6
+        -webkit-line-clamp: 6;
     }
 }
 
 @media screen and (max-width: 768px) {
     .recent-post-item .recent-post-info .recent-post-info-top {
-        padding: 0 20px;
-        top: 20px
+        padding: 0px 20px;
+        top: 20px;
     }
 
     .recent-post-item .recent-post-info .recent-post-info-top .content {
         opacity: 1;
         -webkit-line-clamp: 3;
-        display: none
+        display: none;
     }
 
     #recent-posts .recent-post-item .recent-post-info .article-title {
-        font-size: 19px
+        font-size: 19px;
     }
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 #recent-post-top .recent-post-item .post_cover {
-    width: 100%
+    width: 100%;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap i {
-    margin: 0 .4rem 0 0
+    margin: 0px 0.4rem 0px 0px;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .sticky {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 #recent-posts .recent-post-item {
@@ -7975,123 +7969,114 @@ li, ul {
     background: var(--heo-card-bg);
     border-radius: 12px;
     cursor: pointer;
-    border: var(--style-border)
+    border: var(--style-border);
 }
 
 #recent-posts .recent-post-item:hover {
     border: var(--style-border-hover);
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 #recent-posts > .recent-post-item .right_radius {
-    border-top-left-radius: 12px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 12px
+    border-radius: 12px 0px 0px 12px;
 }
 
 @media screen and (min-width: 1300px) {
     #recent-posts > .recent-post-item .right_radius {
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0
+        border-radius: 12px 12px 0px 0px;
     }
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts .recent-post-item:hover {
         border: none;
-        box-shadow: none
+        box-shadow: none;
     }
 }
 
 @media screen and (max-width: 1300px) {
-    #recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-        border-top-left-radius: 12px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 12px;
+
+    #recent-posts > .recent-post-item .left_radius,
+    #recent-posts > .recent-post-item .right_radius {
+        border-radius: 12px 0px 0px 12px;
         width: 75%;
         display: flex;
-        height: 200px
+        height: 200px;
     }
 
     #recent-posts > .recent-post-item:hover .post_cover img.post_bg {
         transform: scale(1.03);
-        transition: .3s ease-in-out;
-        filter: brightness(.85);
-        border-radius: 12px 0 0 12px
+        transition: all 0.3s ease-in-out 0s;
+        filter: brightness(0.85);
+        border-radius: 12px 0px 0px 12px;
     }
 
     #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     #recent-posts > .recent-post-item .post_cover img.post_bg {
         min-width: 100%;
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-        transition: .3s ease-in-out;
-        min-height: 100%
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+        transition: all 0.3s ease-in-out 0s;
+        min-height: 100%;
     }
 
     #recent-posts > .recent-post-item:hover > .recent-post-info {
-        transition: all .3s;
-        position: relative
+        transition: all 0.3s ease 0s;
+        position: relative;
     }
 
     #recent-posts > .recent-post-item > .recent-post-info {
-        transition: all .3s
+        transition: all 0.3s ease 0s;
     }
 }
 
 #recent-posts > .recent-post-item:hover .post_cover img.post_bg {
     transform: scale(1.03);
-    transition: .3s ease-in-out;
-    filter: brightness(.85);
-    border-radius: 12px 0 0 12px
+    transition: all 0.3s ease-in-out 0s;
+    filter: brightness(0.85);
+    border-radius: 12px 0px 0px 12px;
 }
 
 @media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item .left_radius, #recent-posts > .recent-post-item .right_radius {
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
+
+    #recent-posts > .recent-post-item .left_radius,
+    #recent-posts > .recent-post-item .right_radius {
+        border-radius: 12px 12px 0px 0px;
         width: 100%;
-        display: flex
+        display: flex;
     }
 }
 
-#recent-posts > .recent-post-item .left_radius a, #recent-posts > .recent-post-item .right_radius a {
+#recent-posts > .recent-post-item .left_radius a,
+#recent-posts > .recent-post-item .right_radius a {
     min-height: 100%;
-    min-width: 100%
+    min-width: 100%;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info {
     display: inline-block;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .recent-top-post-group {
     border-radius: 12px;
-    overflow: hidden;
-    overflow-x: auto;
+    overflow: auto hidden;
     width: 100%;
-    margin-bottom: 0
+    margin-bottom: 0px;
 }
 
 .recent-post-top {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     width: 100%;
-    overflow-x: scroll
+    overflow-x: scroll;
 }
 
 .recent-post-top::-webkit-scrollbar {
-    display: none
+    display: none;
 }
 
 .recent-post-top .recent-post-item {
@@ -8099,7 +8084,7 @@ li, ul {
     width: 200px;
     flex-direction: column;
     align-items: flex-start;
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     background: var(--heo-card-bg);
     border-radius: 12px;
     overflow: hidden;
@@ -8107,123 +8092,122 @@ li, ul {
     height: 164px;
     max-height: 164px;
     border: var(--style-border-always);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     position: relative;
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 @media screen and (max-width: 768px) {
     .recent-post-top .recent-post-item {
         border-radius: 8px;
         box-shadow: none;
-        clip-path: inset(0 0 0 0 round 8px)
+        clip-path: inset(0px round 8px);
     }
 
     .recent-post-top .recent-post-item:last-child {
-        margin-right: 1rem
+        margin-right: 1rem;
     }
 }
 
 @media screen and (min-width: 1300px) {
     .recent-post-top .recent-post-item {
-        margin-right: 0;
-        margin-bottom: .5rem
+        margin-right: 0px;
+        margin-bottom: 0.5rem;
     }
 
     .recent-post-top .recent-post-item:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 
     .recent-post-top {
-        overflow-x: visible
+        overflow-x: visible;
     }
 
     .recent-top-post-group {
         overflow: visible;
-        overflow-x: visible
     }
 }
 
 span.recent-post-top-text {
     position: absolute;
-    top: 0;
+    top: 0px;
     left: -40px;
     display: flex;
     z-index: 1;
     background: var(--heo-theme);
     color: var(--heo-white);
     padding: 2px 8px;
-    font-size: .6rem;
-    border-radius: 12px 0 12px 0;
-    transition: .3s;
-    cursor: pointer
+    font-size: 0.6rem;
+    border-radius: 12px 0px;
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
 }
 
 .recent-post-item:hover .recent-post-top-text {
-    left: 0
+    left: 0px;
 }
 
 @media screen and (min-width: 1300px) {
     .recent-post-top .recent-post-item:hover {
         border: var(--style-border-hover);
         box-shadow: var(--heo-shadow-main);
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     .recent-post-top .recent-post-item:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 @media screen and (max-width: 768px) {
     .recent-top-post-group {
-        border-radius: 0;
-        background: var(--heo-background)
+        border-radius: 0px;
+        background: var(--heo-background);
     }
 
     .recent-post-top-text {
-        display: none !important
+        display: none !important;
     }
 
     .recent-post-top .recent-post-item .post_cover img {
-        border-radius: 8px 8px 0 0 !important
+        border-radius: 8px 8px 0px 0px !important;
     }
 }
 
 .recent-post-top .recent-post-item .post_cover a {
     height: 100px;
     overflow: hidden;
-    display: flex
+    display: flex;
 }
 
 .recent-post-top .recent-post-item .post_cover img {
     object-fit: cover;
     width: 100%;
     background: var(--heo-secondbg);
-    border-radius: 12px 12px 0 0
+    border-radius: 12px 12px 0px 0px;
 }
 
 .recent-post-top .recent-post-item:hover .post_cover img {
-    transform: scale(1)
+    transform: scale(1);
 }
 
 .recent-post-item .post_cover {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+    -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
 }
 
 .recent-post-top .recent-post-item .recent-post-info {
-    padding: .3rem .5rem .3rem .5rem !important;
-    transition: .3s
+    transition: all 0.3s ease 0s;
+    padding: 0.3rem 0.5rem !important;
 }
 
 .recent-post-top .recent-post-item:hover .recent-post-info a {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 @media screen and (max-width: 1300px) {
     .recent-post-top .recent-post-item:hover .recent-post-info a {
         color: var(--heo-theme);
-        transition: .3s
+        transition: all 0.3s ease 0s;
     }
 }
 
@@ -8233,24 +8217,22 @@ span.recent-post-top-text {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     line-height: 1.5;
-    justify-content: center;
+    place-content: center;
     align-items: flex-end;
-    align-content: center;
-    padding-top: .5rem;
     font-weight: 700;
-    font-size: .8rem !important;
-    padding: 0 !important
+    font-size: 0.8rem !important;
+    padding: 0px !important;
 }
 
 .title-and-tips {
     display: flex;
     margin-top: 1rem;
-    align-items: center
+    align-items: center;
 }
 
 .title-and-tips .page-title {
     line-height: 1;
-    margin: 0
+    margin: 0px;
 }
 
 .title-and-tips .page-tips {
@@ -8259,15 +8241,20 @@ span.recent-post-top-text {
     margin-bottom: auto;
     border-radius: 8px;
     padding: 2px 6px;
-    font-size: .5rem;
-    margin-left: 8px
+    font-size: 0.5rem;
+    margin-left: 8px;
 }
 
 #aside-content .card-widget {
     box-shadow: var(--heo-shadow-border);
     background: var(--heo-card-bg);
     border: var(--style-border);
-    transition: .3s
+    border-radius: 12px;
+    transition: all 0.3s ease 0s;
+    position: relative;
+    overflow: hidden;
+    margin-top: 1rem;
+    padding: 1rem 1.2rem;
 }
 
 #recent-posts > .recent-post-item {
@@ -8276,137 +8263,115 @@ span.recent-post-top-text {
     -webkit-box-orient: horizontal;
     -webkit-box-align: center;
     align-items: center;
-    transition: all .3s ease 0s
+    transition: all 0.3s ease 0s;
 }
 
-#recent-posts > .recent-post-item {
-    margin-top: .5rem;
+#recent-posts > .recent-post-item:not(:first-child) {
+    margin-top: 0.5rem;
     margin-bottom: 1rem;
     position: relative;
-    overflow: hidden
+    overflow: hidden;
 }
 
 @media screen and (min-width: 1300px) {
-
     #recent-posts > .recent-post-item {
-        width: calc(100% / 2 - .5rem);
         flex-direction: column;
-        margin-top: .25rem;
-        margin-bottom: .75rem;
-        box-shadow: var(--heo-shadow-border);
-        clip-path: inset(0 0 0 0 round 12px)
     }
 
-    /*!* 1 列 *!*/
-    /*#recent-posts > .recent-post-item.col1 {*/
-    /*    width: calc(100% - .5rem);*/
-    /*}*/
-    /*!* 2 列 *!*/
-    /*#recent-posts > .recent-post-item.col2 {*/
-    /*    width: calc(100% / 2 - .5rem);*/
-    /*}*/
-    /*!* 3 列 *!*/
-    /*#recent-posts > .recent-post-item.col3{*/
-    /*    width: calc(100% / 3 - .5rem);*/
-    /*}*/
-    /*!* 4 列 *!*/
-    /*#recent-posts > .recent-post-item.col4 {*/
-    /*    width: calc(100% / 4 - .5rem);*/
-    /*}*/
-    #recent-posts > .recent-post-item:active {
-        transform: scale(.97)
+    #recent-posts > .recent-post-item:not(:first-child) {
+        width: calc(50% - 0.5rem);
+        margin-top: 0.25rem;
+        margin-bottom: 0.75rem;
+        box-shadow: var(--heo-shadow-border);
+        clip-path: inset(0px round 12px);
+    }
+
+    #recent-posts > .recent-post-item:not(:first-child):active {
+        transform: scale(0.97);
     }
 
     #category-bar {
-        margin-bottom: .75rem;
-        box-shadow: var(--heo-shadow-border)
+        margin-bottom: 0.75rem;
+        box-shadow: var(--heo-shadow-border);
     }
 
     #recent-posts {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        place-content: flex-start space-between;
         align-items: flex-start;
-        align-content: flex-start
     }
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts > .recent-post-item {
-        border-radius: 0
+        border-radius: 0px;
     }
 
-    #recent-posts > .recent-post-item {
-        margin: 1.5rem 1rem;
+    #recent-posts > .recent-post-item:not(:first-child) {
+        margin: 0.5rem 1rem 1.5rem;
         border-radius: 12px;
-        margin-top: .5rem;
         border: var(--style-border-always);
         box-shadow: var(--heo-shadow-border);
         display: block;
         position: relative;
-        clip-path: inset(0 0 0 0 round 12px)
+        clip-path: inset(0px round 12px);
     }
 
     #recent-posts .recent-post-item .post_cover {
-        border-radius: 0 !important;
-        width: 100%
+        width: 100%;
+        border-radius: 0px !important;
     }
 
-    a.article-meta__categories {
-        left: 12px !important;
-        top: 12px !important;
-        border-radius: 4px !important;
-        padding: 2px 9px !important;
-        font-size: 12px
-    }
 }
 
 @media screen and (min-width: 1300px) {
     .topGroup .recent-post-item:nth-child(7) {
-        display: none
+        display: none;
     }
 }
 
 @media screen and (max-width: 768px) {
     #sidebar-menus > div.author-avatar {
-        display: none
+        display: none;
     }
 
     #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-        bottom: .5rem !important
+        bottom: 0.5rem !important;
     }
 
     #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time {
-        display: absolute;
-        right: 0
+        right: 0px;
     }
 
     #rightside {
-        display: none
+        display: none;
     }
 
     #web_bg {
-        background: 0 0 !important
+        background: 0px 0px !important;
     }
 
     #recent-posts > .recent-post-item .post_cover img.post_bg {
-        border-radius: 12px 12px 0 0 !important
+        border-radius: 12px 12px 0px 0px !important;
     }
 
     #recent-posts > .recent-post-item .post_cover img.post_bg:hover {
-        transform: scale(1)
+        transform: scale(1);
     }
 
     #recent-posts > .recent-post-item:hover img.post_bg {
-        transform: scale(1)
+        transform: scale(1);
     }
 
     .recent-post-top .recent-post-item:hover .post_cover img {
-        transform: scale(1)
+        transform: scale(1);
     }
 
-    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, #recent-posts > .recent-post-item > .recent-post-info > .content {
-        padding: 0 20px !important
+    #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap,
+    #recent-posts > .recent-post-item > .recent-post-info > .article-title,
+    #recent-posts > .recent-post-item > .recent-post-info > .content {
+        padding: 0px 20px !important;
     }
 }
 
@@ -8415,80 +8380,79 @@ a.article-meta__categories {
     padding: 1px 6px;
     background: var(--heo-black-op);
     border-radius: 8px;
-    margin-left: 0;
+    margin-left: 0px;
     font-size: 12px;
     font-weight: 700;
     color: var(--heo-white);
     top: 8px;
     left: 8px;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 a.article-meta__categories:hover {
+    box-shadow: var(--heo-shadow-theme);
     background: var(--heo-theme) !important;
     color: var(--heo-white) !important;
-    box-shadow: var(--heo-shadow-theme)
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-title {
     line-height: 1.4;
-    margin-top: 0;
+    margin-top: 0px;
     font-weight: 700;
     color: var(--heo-fontcolor);
-    margin-bottom: 0;
+    margin-bottom: 0px;
     position: absolute;
     width: 100%;
-    left: 0;
-    padding: 0 40px;
-    transition: .3s
+    left: 0px;
+    padding: 0px 40px;
+    transition: all 0.3s ease 0s;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 @media screen and (min-width: 768px) {
     #recent-posts > .recent-post-item > .recent-post-info > .article-title {
-        top: 40px
+        top: 40px;
     }
 
     #recent-posts > .recent-post-item:hover > .recent-post-info > .article-title {
-        top: 20px
+        top: 20px;
     }
 
     #recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-title {
-        top: 30px
+        top: 30px;
     }
 
     #recent-posts .recent-post-item:hover .recent-post-info .article-title {
-        color: var(--heo-theme)
+        color: var(--heo-theme);
     }
 }
 
 .article-meta-wrap {
-    color: var(--heo-secondtext) !important
+    color: var(--heo-secondtext) !important;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
-    right: 0;
-    text-align: right
+    right: 0px;
+    text-align: right;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date i {
-    display: none
+    display: none;
 }
 
 .post-meta-date .far {
-    opacity: .6
+    opacity: 0.6;
 }
 
 .post-meta-date .article-meta-label {
-    display: none
+    display: none;
 }
 
 .post-meta-date {
-    margin-right: .8rem
+    margin-right: 0.8rem;
 }
 
 #aside-content #card-toc .toc-content .toc-link.active {
@@ -8498,213 +8462,210 @@ a.article-meta__categories:hover {
     background-color: var(--heo-card-bg);
     color: var(--heo-lighttext);
     font-weight: 700;
-    font-size: 20px
+    font-size: 20px;
 }
 
-[data-theme=dark].toc-list .toc-list-item.active .toc-link .toc-text {
-    color: var(--heo-white)
+[data-theme="dark"].toc .toc-item.active .toc-link .toc-text {
+    color: var(--heo-white);
 }
 
-#aside-content #card-toc .toc-content .toc-list-item.active .toc-link {
+#aside-content #card-toc .toc-content .toc-item.active .toc-link {
     opacity: 1;
-    border-radius: 8px
+    border-radius: 8px;
 }
 
 #aside-content #card-toc .toc-content .toc-link {
     line-height: 1.2;
     padding: 8px;
-    border-left: 0 solid transparent;
+    border-left: 0px solid transparent;
     border-radius: 12px;
     color: var(--heo-secondtext);
-    cursor: default
+    cursor: default;
 }
 
 #aside-content #card-toc .toc-content .toc-link:not(.active) span {
-    opacity: .6;
+    opacity: 0.6;
     cursor: pointer;
     filter: blur(1px);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
-    filter: blur(0);
-    opacity: 1
+    filter: blur(0px);
+    opacity: 1;
 }
 
 #aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 #card-toc {
-    padding: .5rem .5rem !important
+    padding: 0.5rem !important;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__separator {
-    display: none
+    display: none;
 }
 
 .article-meta {
-    margin: 0 8px 0 0;
+    margin: 0px 8px 0px 0px;
     white-space: nowrap;
     overflow: hidden;
     display: inline-block;
-    text-overflow: ellipsis
+    text-overflow: ellipsis;
 }
 
 .article-meta__link {
-    display: none
+    display: none;
 }
 
 .article-meta__tags {
     margin-right: 4px;
-    padding: 0 .2rem;
-    padding-left: 0
+    padding: 0px 0.2rem 0px 0px;
 }
 
 #recent-posts > div > i .post_cover {
-    display: none
+    display: none;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info {
     height: 174px;
     width: 100%;
     cursor: pointer;
-    position: relative
+    position: relative;
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts .recent-post-item .recent-post-info {
-        height: 7rem
+        height: 7rem;
     }
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
     position: absolute;
     bottom: 16px;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     justify-content: space-between;
     width: 100%;
-    left: 0;
-    padding: 0 32px;
-    white-space: nowrap
+    left: 0px;
+    padding: 0px 32px;
+    white-space: nowrap;
 }
 
 @media screen and (min-width: 1300px) {
     #recent-posts > .recent-post-item:hover > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
+        bottom: 30px;
     }
 
     #recent-posts > .recent-post-item.post-card-large:hover > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
+        bottom: 30px;
     }
 
     #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-        bottom: 30px
+        bottom: 30px;
     }
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
     background-color: var(--heo-post-blockquote-bg);
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 #home_top {
     max-width: 1400px;
-    margin: auto;
-    margin-top: .5rem;
-    padding: 0 1.5rem
+    margin: 0.5rem auto auto;
+    padding: 0px 1.5rem;
 }
 
 @media screen and (max-width: 768px) {
     #home_top {
-        padding: 0;
-        margin-top: 0
+        padding: 0px;
+        margin-top: 0px;
     }
 }
 
 #aside-content .card-tag-cloud a[href*="/tags/Sketch/"] {
+    font-weight: 500;
     color: var(--heo-lighttext) !important;
-    font-weight: 500
 }
 
 #aside-content .card-tag-cloud a[href*="/tags/%E8%AE%BE%E8%AE%A1/"] {
+    font-weight: 500;
     color: var(--heo-lighttext) !important;
-    font-weight: 500
 }
 
 #aside-content .card-tag-cloud a[href*="/tags/%E5%B9%B2%E8%B4%A7/"] {
+    font-weight: 500;
     color: var(--heo-lighttext) !important;
-    font-weight: 500
 }
 
 #aside-content .card-tag-cloud a[href*="/tags/%E6%95%99%E7%A8%8B/"] {
+    font-weight: 500;
     color: var(--heo-lighttext) !important;
-    font-weight: 500
 }
 
 #aside-content .card-tag-cloud a sup {
-    opacity: .4;
-    margin-left: 2px
+    opacity: 0.4;
+    margin-left: 2px;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .content {
     line-height: 1.4;
     color: var(--heo-secondtext);
-    margin-top: 0;
+    margin-top: 0px;
     cursor: pointer;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     opacity: 1;
     position: absolute;
     width: 100%;
-    left: 0;
-    padding: 0 40px
+    left: 0px;
+    padding: 0px 40px;
 }
 
 @media screen and (min-width: 768px) {
     #recent-posts > .recent-post-item > .recent-post-info > .content {
         opacity: 0;
-        top: 120px
+        top: 120px;
     }
 
     #recent-posts > .recent-post-item:hover > .recent-post-info > .content {
         opacity: 1;
-        top: 90px
+        top: 90px;
     }
 
     @media screen and (max-width: 1300px) {
         #recent-posts > .post-card-large > .recent-post-info > .content {
-            opacity: 1 !important
+            opacity: 1 !important;
         }
 
         #recent-posts > .post-card-large:hover > .recent-post-info > .content {
-            top: 110px
+            top: 110px;
         }
 
         #recent-posts > .post-card-large > .recent-post-info > .content {
-            -webkit-line-clamp: 3 !important
+            -webkit-line-clamp: 3 !important;
         }
 
         #recent-posts > .post-card-large:hover > .recent-post-info > .content {
-            -webkit-line-clamp: 5 !important
+            -webkit-line-clamp: 5 !important;
         }
 
         #recent-posts > .post-card-large {
-            height: 20em !important
+            height: 20em !important;
         }
     }
 }
 
 @media screen and (max-width: 768px) {
     #recent-posts > .recent-post-item > .recent-post-info > .content {
-        top: 5rem
+        top: 5rem;
     }
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .content {
-    -webkit-line-clamp: 2
+    -webkit-line-clamp: 2;
 }
 
 div#author-info__sayhi {
@@ -8715,7 +8676,7 @@ div#author-info__sayhi {
     margin-right: auto;
     padding: 2px 8px;
     border-radius: 12px;
-    width: fit-content
+    width: fit-content;
 }
 
 #aside-content .card-info .author-info__name {
@@ -8724,72 +8685,74 @@ div#author-info__sayhi {
     color: var(--heo-white);
     font-size: 28px;
     line-height: 1.1;
-    margin-top: .8rem;
-    margin-bottom: 1rem
+    margin-top: 0.8rem;
+    margin-bottom: 1rem;
 }
 
 #aside-content > .card-widget:first-child {
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     border: none;
     box-shadow: none;
-    background: var(--heo-main)
+    background: var(--heo-main);
+    margin-top: 0px;
 }
 
 #aside-content > .card-widget.card-info {
-    background: linear-gradient(-45deg, var(--heo-main), #031764, #150136, #67044d);
     background-size: 400%;
     box-shadow: var(--heo-shadow-black);
-    animation: gradient 15s ease infinite;
-    position: relative
+    animation: 15s ease 0s infinite normal none running gradient;
+    position: relative;
 }
 
 @keyframes gradient {
     0% {
-        background-position: 0 50%
+        background-position: 0px 50%;
     }
+
     50% {
-        background-position: 100% 50%
+        background-position: 100% 50%;
     }
+
     100% {
-        background-position: 0 50%
+        background-position: 0px 50%;
     }
 }
 
 @media screen and (max-width: 1300px) {
     #aside-content > .card-widget:first-child {
-        min-height: 329px
+        min-height: 329px;
     }
 }
 
 #aside-content > div.card-widget.card-info > div > div.card-info-avatar.is-center > div.author-info__description {
     line-height: 1.38;
-    margin: .3rem 0;
+    margin: 0.3rem 0px;
     text-align: justify;
-    color: rgba(255, 255, 255, .8)
+    color: rgba(255, 255, 255, 0.8);
 }
 
 #aside-content > div.card-widget.card-info > div > div.card-info-avatar.is-center > div.author-info__description b {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .author-info__description2 {
     line-height: 1.38;
-    margin: .3rem 0;
+    margin: 0.3rem 0px;
     text-align: justify;
     width: 100%;
     z-index: 2;
-    color: rgba(255, 255, 255, .8)
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .author-info__description2 b {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .card-widget.card-info .banner-button-group {
     position: absolute;
     right: 1rem;
     bottom: 1rem;
-    display: flex
+    display: flex;
 }
 
 .card-widget.card-info .banner-button-group .banner-button {
@@ -8800,101 +8763,95 @@ div#author-info__sayhi {
     display: flex;
     align-items: center;
     z-index: 1;
-    transition: .3s;
-    cursor: pointer
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
 }
 
 .card-widget.card-info .banner-button-group .banner-button:hover {
     background: var(--heo-white);
-    color: var(--heo-black)
+    color: var(--heo-black);
 }
 
 .card-widget.card-info .banner-button-group .banner-button i {
     margin-right: 8px;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #aside-content .card-info .card-info-data {
-    display: none
+    display: none;
 }
 
 #aside-content .card-info a img {
-    border-radius: 0;
+    border-radius: 0px;
     height: 200px;
     display: inherit;
-    filter: drop-shadow(-5px 14px 8px #00000008);
+    filter: drop-shadow(rgba(0, 0, 0, 0.03) -5px 14px 8px);
     position: absolute;
     right: -24px;
     bottom: -82px;
     width: auto;
     z-index: 0;
-    transition: cubic-bezier(.48, -.21, 0, 1.5) .3s
+    transition: all 0.3s cubic-bezier(0.48, -0.21, 0, 1.5) 0s;
 }
 
 #aside-content .card-info a img:hover {
-    bottom: -42px
+    bottom: -42px;
 }
 
-[data-theme=light] #aside-content .card-info a img {
-    filter: drop-shadow(-5px 14px 8px #ffffff08)
+[data-theme="light"] #aside-content .card-info a img {
+    filter: drop-shadow(rgba(255, 255, 255, 0.03) -5px 14px 8px);
 }
 
 .card-widget.card-info {
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 #aside-content > div.card-widget.card-info > div.card-content {
     padding: 1rem 1.2rem;
-    min-height: 330px
+    min-height: 330px;
 }
 
 #aside-content > div.card-widget.card-info > div.card-info-avatarimg {
     overflow: hidden;
     background: var(--heo-yellow);
-    transition: 1.5s;
+    transition: all 1.5s ease 0s;
     min-height: 160px;
     position: relative;
-    box-shadow: var(--heo-shadow-yellow)
+    box-shadow: var(--heo-shadow-yellow);
 }
 
 #aside-content > div.card-widget.card-info > div.card-info-avatarimg:hover img {
-    transform: scale(1.03)
-}
-
-#aside-content > div.card-widget.card-info > div > div.card-info-data > div:nth-child() > a > div.headline {
-    font-weight: 700
+    transform: scale(1.03);
 }
 
 @media screen and (max-width: 900px) {
     #aside-content .card-announcement {
-        display: none
+        display: none;
     }
 
     #aside-content #card-funds {
-        display: none
+        display: none;
     }
 }
 
 #aside-content .card-info #card-info-btn {
-    display: none
+    display: none;
 }
 
 #aside-content .card-info .card-info-social-icons {
-    margin: 0;
+    margin: 0px;
     padding-top: 10px;
     display: flex;
     justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     cursor: pointer;
     position: absolute;
     bottom: 1rem;
-    left: 1rem
+    left: 1rem;
 }
 
 #aside-content .card-info .card-info-social-icons .social-icon {
-    margin: 0;
-    margin-right: 8px
+    margin: 0px 8px 0px 0px;
 }
 
 #aside-content .card-info .card-info-social-icons i {
@@ -8904,76 +8861,73 @@ div#author-info__sayhi {
     width: 40px;
     height: 40px;
     display: flex;
-    align-items: center
+    align-items: center;
 }
 
 #aside-content .card-info .card-info-social-icons i:hover {
     background: var(--heo-secondbg);
-    transform: scale(.97);
+    transform: scale(0.97);
     color: var(--heo-main);
-    box-shadow: none
+    box-shadow: none;
 }
 
 #aside-content .card-info .banner-button {
     height: 40px;
     width: 124px;
     border-radius: 20px;
-    justify-content: center
+    justify-content: center;
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content .card-info .card-info-social-icons i {
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
-    [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
-        color: var(--heo-white)
+    [data-theme="dark"] #aside-content .card-info .card-info-social-icons i {
+        color: var(--heo-white);
     }
 }
 
 #aside-content .card-info .card-info-data > .card-info-data-item:hover {
     background: var(--heo-post-blockquote-bg);
-    transform: scale(.97)
+    transform: scale(0.97);
 }
 
-#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline, #aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
-    color: var(--heo-blue)
+#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.headline,
+#aside-content > div.card-widget.card-info > div.card-content > div.card-info-data > .card-info-data-item:hover > a > div.length-num {
+    color: var(--heo-blue);
 }
 
 .announcement_content p {
-    margin: .5rem 0 0 0;
-    line-height: 1.38
+    margin: 0.5rem 0px 0px;
+    line-height: 1.38;
 }
 
 #aside-content .item-headline {
-    padding-bottom: 0;
+    padding-bottom: 0px;
     margin-left: 8px;
     font-size: 1em;
-    font-weight: 700
+    font-weight: 700;
 }
 
 #aside-content .item-headline i {
-    min-width: 19.5px
+    min-width: 19.5px;
 }
 
-#aside-content .item-headline + div, #aside-content .item-headline + ul {
-    padding: 0
-}
-
-#aside-content .card-widget {
-    border-radius: 12px;
-    transition: .3s
+#aside-content .item-headline + div,
+#aside-content .item-headline + ul {
+    padding: 0px;
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content .card-widget {
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 }
 
 @media screen and (max-width: 768px) {
     #aside-content .card-widget {
-        border-radius: 12px
+        border-radius: 12px;
     }
 }
 
@@ -8981,26 +8935,28 @@ div#author-info__sayhi {
     margin-top: 8px;
     background: var(--heo-card-btn-bg);
     border-radius: 8px;
-    transition: .3s !important
+    transition: all 0.3s ease 0s !important;
 }
 
 #aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover {
     color: var(--heo-white);
     background: var(--heo-blue);
     border-radius: 8px;
-    transition: .3s !important
+    transition: all 0.3s ease 0s !important;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-    transition: .3s !important
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
+    transition: all 0.3s ease 0s !important;
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
-    transition: .3s !important
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item.more span {
+    transition: all 0.3s ease 0s !important;
 }
 
 #aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover span {
-    background: 0 0
+    background: 0px 0px;
 }
 
 #web_bg {
@@ -9012,146 +8968,151 @@ div#author-info__sayhi {
     left: -50%;
     transform: rotate(-15deg);
     opacity: 1;
-    background-color: var(--heo-background)
+    background-color: var(--heo-background);
 }
 
-#web_bg:before {
+#web_bg::before {
+    opacity: 1;
     background-color: var(--heo-background) !important;
-    opacity: 1
 }
 
-[data-theme=dark] #footer:before, [data-theme=dark] #page-header:before, [data-theme=dark] #web_bg:before {
-    background-color: var(--heo-none) !important
+[data-theme="dark"] #footer::before,
+[data-theme="dark"] #page-header::before,
+[data-theme="dark"] #web_bg::before {
+    background-color: var(--heo-none) !important;
 }
 
-[data-theme=dark]#web_bg {
-    opacity: 1
+[data-theme="dark"]#web_bg {
+    opacity: 1;
 }
 
 #aside-content .card-tag-cloud a {
+    font-size: 0.8rem;
+    border-radius: 8px;
     color: var(--heo-fontcolor) !important;
-    font-size: .8rem;
-    border-radius: 8px
 }
 
 #aside-content .card-tag-cloud a:hover {
     background: var(--heo-theme);
+    box-shadow: var(--heo-shadow-theme);
     color: var(--heo-white) !important;
-    box-shadow: var(--heo-shadow-theme)
 }
 
 #aside-content .card-tag-cloud a.tags-cloud-more {
     width: 100%;
     text-align: center;
-    border-radius: 8px !important;
     border: var(--style-border);
     margin-top: 8px;
-    font-size: var(--global-font-size) !important
+    border-radius: 8px !important;
+    font-size: var(--global-font-size) !important;
 }
 
 @media screen and (min-width: 1300px) {
     #aside-content .card-tag-cloud a:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     #aside-content .card-tag-cloud a:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
-#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
+#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
     color: var(--heo-white);
     background-color: var(--heo-theme);
     box-shadow: var(--heo-shadow-theme);
     border-radius: 8px;
-    padding: .15rem .5rem;
-    border: var(--style-border-hover)
+    padding: 0.15rem 0.5rem;
+    border: var(--style-border-hover);
 }
 
 @media screen and (min-width: 1300px) {
-    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
-        transform: scale(1.03)
+
+    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
+    #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
+        transform: scale(1.03);
     }
 
-    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:active {
-        transform: scale(.97)
+    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active,
+    #aside-content .card-categories ul.card-category-list > .card-category-list-item a:active {
+        transform: scale(0.97);
     }
 }
 
 a.extend.next {
-    right: 0
+    right: 0px;
 }
 
 a.extend.prev {
-    left: 0
+    left: 0px;
 }
 
 @media screen and (max-width: 768px) {
     #pagination {
-        margin-bottom: 0;
-        margin-top: 0
+        margin-bottom: 0px;
+        margin-top: 0px;
     }
 }
 
 @media screen and (min-width: 1300px) {
     #pagination {
-        margin-top: .25rem
+        margin-top: 0.25rem;
     }
 }
 
 .lg-container {
-    display: none
+    display: none;
 }
 
-#page-header.post-bg:before {
-    transition: 0s;
-    opacity: .93;
+#page-header.post-bg::before {
+    transition: all 0s ease 0s;
     height: 20rem;
     background-color: var(--heo-main);
-    opacity: .8
+    opacity: 0.8;
 }
 
 @media screen and (max-width: 768px) {
     #page-header.post-bg {
+        margin-bottom: -12px;
         height: 30rem !important;
-        margin-bottom: -12px
     }
 
-    #page-header.post-bg:before {
-        height: 15rem
+    #page-header.post-bg::before {
+        height: 15rem;
     }
 
     .post-bg #post-cover {
         min-height: 15rem !important;
         height: 70% !important;
-        opacity: 1 !important
+        opacity: 1 !important;
     }
 }
 
 @media screen and (min-width: 1300px) {
     #page-header.post-bg {
-        height: 25rem
+        height: 25rem;
     }
 
     #page-header {
-        height: 25rem
+        height: 25rem;
     }
 
-    #page-header.post-bg:before {
-        height: 25rem
+    #page-header.post-bg::before {
+        height: 25rem;
     }
 
     #post-info .post-title {
         width: 1100px;
-        font-size: 2.6rem !important
+        font-size: 2.6rem !important;
     }
 }
 
 #page-header.post-bg {
     background-color: var(--heo-main);
-    transition: 0s;
+    transition: all 0s ease 0s;
     overflow: hidden;
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 .post-bg #post-cover {
@@ -9160,61 +9121,60 @@ a.extend.prev {
     object-fit: cover;
     min-width: 50vw;
     min-height: 20rem;
-    opacity: .8
+    opacity: 0.8;
 }
 
 .coverdiv {
     width: 70%;
     height: 100%;
     position: relative;
-    margin: 0 -20% 0 auto;
+    margin: 0px -20% 0px auto;
     overflow: hidden;
-    margin-bottom: 0;
     transform: rotate(10deg) translateY(-10%) scale(2);
-    filter: blur(10px)
+    filter: blur(10px);
 }
 
 .coverdiv.loaded {
-    display: block
+    display: block;
 }
 
-.coverdiv:after {
+.coverdiv::after {
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
-    box-shadow: 110px -130px 300px 60px var(--heo-main) inset
+    top: 0px;
+    left: 0px;
+    box-shadow: 110px -130px 300px 60px var(--heo-main) inset;
 }
 
 @media screen and (max-width: 768px) {
     .coverdiv {
-        margin: 0 0 0 auto;
-        transform: rotate(0) translateY(0) scale(1);
-        filter: blur(0);
+        margin: 0px 0px 0px auto;
+        transform: rotate(0deg) translateY(0px) scale(1);
+        filter: blur(0px);
         width: 100%;
         position: fixed;
         height: 30rem;
-        z-index: 1
+        z-index: 1;
     }
 
-    .coverdiv:after {
-        box-shadow: 0 0 205px 59px var(--heo-main) inset
+    .coverdiv::after {
+        box-shadow: 0 0 205px 59px var(--heo-main) inset;
     }
 }
 
 #page-header {
-    background-image: none !important;
     display: flex;
-    justify-content: center
+    justify-content: center;
+    background-image: none !important;
 }
 
 #post-cover-rgb {
     position: absolute;
+    background: var(--heo-lighttext);
     width: 100% !important;
     height: 100% !important;
-    background: var(--heo-lighttext)
 }
 
 .layout > div:first-child:not(.recent-posts) {
@@ -9223,78 +9183,78 @@ a.extend.prev {
     border-radius: 12px;
     background: var(--heo-card-bg);
     border: var(--style-border);
-    width: calc(100% - 300px)
+    width: calc(100% - 300px);
 }
 
 #page {
-    box-shadow: none
+    box-shadow: none;
 }
 
 .post-comment {
-    background: var(--heo-card-bg)
+    background: var(--heo-card-bg);
 }
 
 .layout > div:first-child:not(.recent-posts):hover {
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 @media screen and (max-width: 768px) {
     .layout > div:first-child:not(.recent-posts) {
-        border-radius: 0;
-        padding: 0 1rem !important;
+        border-radius: 0px;
+        background: var(--heo-background);
+        padding: 0px 1rem !important;
         box-shadow: none !important;
-        background: var(--heo-background)
     }
 
     .layout {
-        padding: 0 1.5rem
+        padding: 0px 1.5rem;
     }
 }
 
 @media screen and (max-width: 768px) {
     .layout {
-        padding: 0
+        padding: 0px;
     }
 
     .layout > div:first-child:not(.recent-posts) {
-        z-index: 10
+        z-index: 10;
     }
 
     .post .layout > div:first-child:not(.recent-posts) {
-        border-radius: 12px 12px 0 0
+        border-radius: 12px 12px 0px 0px;
     }
 
     .post .layout#content-inner {
-        background: var(--heo-main)
+        background: var(--heo-main);
     }
 
     .page .layout#content-inner {
-        background: var(--heo-background)
+        background: var(--heo-background);
     }
 
     #aside-content {
         z-index: 2;
         background: var(--heo-background);
-        padding: 0 1rem;
+        padding: 0px 1rem;
         display: flex;
         flex-direction: column;
-        width: 100%
+        width: 100%;
     }
 }
 
 .layout#content-inner {
-    max-width: 1400px
+    max-width: 1400px;
 }
 
 .full_page #post-cover {
-    display: none
+    display: none;
 }
 
 #page-header #post-info {
-    top: 0;
+    top: 0px;
     position: absolute;
-    padding: 0 3rem;
-    margin: 0 auto;
+    padding: 0px 3rem;
+    margin: 0px auto;
     z-index: 10;
     color: var(--heo-white);
     max-width: 1400px;
@@ -9302,306 +9262,306 @@ a.extend.prev {
     flex-direction: column;
     align-items: flex-start;
     height: calc(100% + 30px);
-    justify-content: center
+    justify-content: center;
 }
 
 @media screen and (max-width: 768px) {
     #page-header #post-info {
-        padding: 0 6%;
+        padding: 18rem 6% 0px;
         justify-content: normal;
-        padding-top: 18rem
     }
 }
 
 @media screen and (min-width: 1300px) {
     #page-header #post-info {
         height: calc(100% + 30px);
-        top: 0;
+        top: 0px;
         display: flex;
-        justify-content: center
+        justify-content: center;
     }
 }
 
 #post-info #post-meta > .meta-secondline > span:first-child {
     display: inline;
-    margin-right: .8rem
+    margin-right: 0.8rem;
 }
 
 #post-firstinfo {
     text-align: left;
     display: flex;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 #post-firstinfo .post-meta__tags {
     color: var(--heo-white);
-    opacity: .4;
-    margin-right: 1rem
+    opacity: 0.4;
+    margin-right: 1rem;
 }
 
 #post-firstinfo .post-meta__tags:hover {
     color: var(--heo-white);
-    opacity: 1
+    opacity: 1;
 }
 
 span.post-meta-categories {
     background-color: var(--heo-white-op);
-    padding: 0 .5rem;
+    padding: 0px 0.5rem;
     border-radius: 8px;
     line-height: 32px;
     height: 32px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
-span.post-meta-categories {
-    margin-left: 8px
+span.post-meta-categories:not(:first-child) {
+    margin-left: 8px;
 }
 
 span.post-meta-categories:hover {
-    background-color: var(--heo-white)
+    background-color: var(--heo-white);
 }
 
 a.post-meta-categories {
     color: var(--heo-white);
-    font-size: .7rem
+    font-size: 0.7rem;
 }
 
 span.post-meta-categories:hover a.post-meta-categories {
-    color: var(--heo-main)
+    color: var(--heo-main);
 }
 
 .meta-firstline .tag_share {
-    margin-left: 1rem
+    margin-left: 1rem;
 }
 
 #post-firstinfo .meta-firstline {
     display: flex;
-    align-items: center
+    align-items: center;
 }
 
 @media screen and (max-width: 768px) {
     #post-firstinfo .meta-firstline {
-        margin-bottom: .4rem
+        margin-bottom: 0.4rem;
     }
 }
 
 .meta-avatar img {
     width: 30px;
     border-radius: 30px;
-    height: 30px
+    height: 30px;
 }
 
 a.post-meta-original {
-    background: var(--heo-white-op) !important;
-    color: var(--heo-white) !important;
-    padding: 0 .5rem;
-    font-size: .7rem;
+    padding: 0px 0.5rem;
+    font-size: 0.7rem;
     margin: auto;
     border-radius: 8px;
     font-weight: 700;
     height: 32px;
-    line-height: 32px
+    line-height: 32px;
+    background: var(--heo-white-op) !important;
+    color: var(--heo-white) !important;
 }
 
 a.post-meta-original:hover {
     color: var(--heo-main) !important;
     background: var(--heo-white) !important;
-    border-radius: 8px !important
+    border-radius: 8px !important;
 }
 
 .meta-avatar img:hover {
-    transform: rotate(360deg)
+    transform: rotate(360deg);
 }
 
 @media screen and (max-width: 768px) {
     .meta-share-time {
-        display: none !important
+        display: none !important;
     }
 
     #post-info #post-meta {
         display: flex;
-        margin: 0 auto;
-        z-index: 1
+        margin: 0px auto;
+        z-index: 1;
     }
 
-    #post-info:after {
+    #post-info::after {
         position: absolute;
-        content: '';
+        content: "";
         width: 100%;
         height: 100%;
-        bottom: 0;
-        left: 0;
+        bottom: 0px;
+        left: 0px;
         box-shadow: 0 -214px 287px 45px var(--heo-main) inset;
-        z-index: 0
+        z-index: 0;
     }
 
     .meta-secondline {
-        justify-content: center !important
+        justify-content: center !important;
     }
 
     .post-meta__tag-list {
-        display: none
+        display: none;
     }
 
     .typed-cursor {
-        display: none
+        display: none;
     }
 
     .meta-avatar {
-        display: none !important
+        display: none !important;
     }
 
     #post-firstinfo {
         white-space: nowrap;
-        margin: 0 auto;
-        z-index: 1
+        margin: 0px auto;
+        z-index: 1;
     }
 
     .meta-firstline .tag_share {
-        display: none
+        display: none;
     }
 }
 
 .post-meta__tag-list::-webkit-scrollbar {
-    display: none
+    display: none;
 }
 
 .meta-share-time a:hover {
-    background: 0 0 !important
+    background: 0px 0px !important;
 }
 
 .meta-share-time .meta-avatar-name {
     opacity: 1;
+    font-weight: 700;
     color: var(--heo-white) !important;
-    font-weight: 700
 }
 
 .meta-share-time {
-    display: flex
+    display: flex;
 }
 
 .meta-share-time .meta-info {
-    margin: 0 .5rem
+    margin: 0px 0.5rem;
 }
 
 .meta-secondline {
+    flex-flow: row wrap;
+    justify-content: flex-start;
     display: flex !important;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start
 }
 
 .meta-avatar {
-    display: flex
+    display: flex;
 }
 
 .meta-avatar .meta-avatar-name {
-    margin: 0 .5rem
+    margin: 0px 0.5rem;
 }
 
 #post-info #post-meta .fab {
     margin-bottom: 3px;
-    font-size: 15px
+    font-size: 15px;
 }
 
 span.post-meta-pv-cv {
-    margin-left: .8rem
+    margin-left: 0.8rem;
 }
 
 span.post-meta-wechat {
-    margin-right: .8rem;
-    opacity: .6
+    margin-right: 0.8rem;
+    opacity: 0.6;
 }
 
 span.post-meta-position {
-    margin-right: .8rem;
-    opacity: .6
+    margin-right: 0.8rem;
+    opacity: 0.6;
 }
 
 #post-info #post-meta .post-meta-label {
-    display: none
+    display: none;
 }
 
 #post-info #post-meta .post-meta-icon {
-    margin-right: .4rem
+    margin-right: 0.4rem;
 }
 
 #post-info #post-meta .post-meta-separator {
-    margin: 0 .4rem
+    margin: 0px 0.4rem;
 }
 
-.post-meta-pv-cv #visit {
-    font-weight: 800
+.post-meta-pv-cv #busuanzi_value_page_pv {
+    font-weight: 800;
 }
 
 #post-meta > div > span.post-meta-wordcount > span.word-count {
-    font-weight: 800
+    font-weight: 800;
 }
 
 #post-meta > div > span.post-meta-wordcount > span:nth-child(7) {
-    font-weight: 800
+    font-weight: 800;
 }
 
 #post-firstinfo > div > span.post-meta-categories > a {
-    font-weight: 800
+    font-weight: 800;
 }
 
 .post-meta-wordcount {
-    opacity: .6
+    opacity: 0.6;
 }
 
 @media screen and (max-width: 768px) {
     .post-meta-wordcount {
-        margin-left: 0
+        margin-left: 0px;
     }
 }
 
 .post-meta-date {
-    opacity: .6
+    opacity: 0.6;
 }
 
 .post-meta-pv-cv {
-    opacity: .6
+    opacity: 0.6;
 }
 
 .post-meta-pv {
-    opacity: .6;
-    margin-right: .8rem
+    opacity: 0.6;
+    margin-right: 0.8rem;
 }
 
 .post-meta-commentcount {
-    opacity: .6
+    opacity: 0.6;
 }
 
-#comment-count {
+#twikoo-count {
     font-weight: 800;
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .el-textarea .el-input__count {
-    color: var(--heo-secondtext) !important
+    color: var(--heo-secondtext) !important;
 }
 
 .post-meta-commentcount i {
-    margin-right: .5rem
+    margin-right: 0.5rem;
 }
 
 .inline-image {
     display: flex;
     margin: 8px auto;
     width: fit-content;
-    justify-content: center
+    justify-content: center;
 }
 
 .inline-image a:hover {
-    background: 0 0 !important;
-    box-shadow: none !important
+    background: 0px 0px !important;
+    box-shadow: none !important;
 }
 
 .inline-image img {
-    margin: 0;
+    margin-top: 0px;
+    margin-right: 0px;
+    margin-left: 0px;
     display: inline-flex;
-    margin-bottom: 0 !important
+    margin-bottom: 0px !important;
 }
 
 #post-info .post-title {
@@ -9610,178 +9570,191 @@ span.post-meta-position {
     font-size: 2.3rem;
     line-height: 1.2;
     text-align: left;
-    margin: 1rem 0 1rem 0 !important;
     -webkit-line-clamp: 2;
-    padding: 0
+    padding: 0px;
+    margin: 1rem 0px !important;
 }
 
 @media screen and (max-width: 768px) {
     #post-info .post-title {
         font-size: 1.2rem;
         -webkit-line-clamp: 3;
-        margin: .2rem auto !important;
         text-align: center;
-        z-index: 1
+        z-index: 1;
+        margin: 0.2rem auto !important;
     }
 }
 
 #post-meta > div {
-    text-align: left
+    text-align: left;
 }
 
 #post-info #post-meta {
     color: var(--heo-white);
-    margin-top: .4rem;
+    margin-top: 0.4rem;
     height: 30px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #post-info #post-meta a {
     text-decoration: none;
     color: var(--heo-fontcolor);
-    height: 30px
+    height: 30px;
 }
 
 #post-info #post-meta a:hover {
     text-decoration: none;
     color: var(--heo-blue);
-    border-radius: 12px
+    border-radius: 12px;
 }
 
-#article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before {
-    top: calc(50% - .45rem);
-    content: ''
+#article-container h1::before,
+#article-container h2::before,
+#article-container h3::before,
+#article-container h4::before,
+#article-container h5::before,
+#article-container h6::before {
+    top: calc(50% - 0.45rem);
+    content: "";
 }
 
-#article-container h1:hover:before, #article-container h2:hover:before, #article-container h3:hover:before, #article-container h4:hover:before, #article-container h5:hover:before, #article-container h6:hover:before {
-    color: var(--heo-lighttext)
+#article-container h1:hover::before,
+#article-container h2:hover::before,
+#article-container h3:hover::before,
+#article-container h4:hover::before,
+#article-container h5:hover::before,
+#article-container h6:hover::before {
+    color: var(--heo-lighttext);
 }
 
-#article-container h1:hover, #article-container h2:hover, #article-container h3:hover, #article-container h4:hover, #article-container h5:hover, #article-container h6:hover {
-    padding-left: 1.3rem
+#article-container h1:hover,
+#article-container h2:hover,
+#article-container h3:hover,
+#article-container h4:hover,
+#article-container h5:hover,
+#article-container h6:hover {
+    padding-left: 1.3rem;
 }
 
-#article-container ul > li:not(.tab):before {
-    border: .21em solid var(--heo-lighttext);
-    background: var(--heo-lighttext)
+#article-container ul > li:not(.tab)::before {
+    border: 0.21em solid var(--heo-lighttext);
+    background: var(--heo-lighttext);
 }
 
-#article-container ol, #article-container ul {
-    padding: 0
+#article-container ol,
+#article-container ul {
+    padding: 0px;
 }
 
 #article-container .tabs {
-    margin: 1rem 0 !important;
     border-radius: 12px;
     overflow: hidden;
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
+    margin: 1rem 0px !important;
 }
 
 #article-container .tabs .nav-tabs {
-    background: var(--heo-secondbg)
+    background: var(--heo-secondbg);
 }
 
 #article-container .tabs > .nav-tabs > .tab.active button {
     border-top: 0 solid var(--heo-lighttext);
     border-bottom: 3px solid var(--heo-lighttext);
-    background: var(--heo-background)
+    background: var(--heo-background);
 }
 
 #article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
+    border-bottom: 3px solid var(--heo-secondbg);
     border-top: none !important;
-    border-bottom: 3px solid var(--heo-secondbg)
 }
 
 #article-container .tabs > .nav-tabs > .tab button {
-    transition: all 0s;
-    -webkit-transition: all 0s;
     background: var(--heo-secondbg);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     border-top: none;
-    border-bottom: 3px solid var(--heo-secondbg)
+    border-bottom: 3px solid var(--heo-secondbg);
 }
 
 #article-container .tabs > .nav-tabs > .tab:not(.active) button:hover {
     background: var(--heo-main);
     color: var(--heo-white);
-    transition: .3s;
-    border-top: 3px solid var(--heo-main)
+    transition: all 0.3s ease 0s;
+    border-top: 3px solid var(--heo-main);
 }
 
 .tab-item-content {
-    background: var(--heo-card-bg)
+    background: var(--heo-card-bg);
 }
 
 #article-container .tabs {
-    border: 3px solid var(--heo-secondbg) !important
+    border: 3px solid var(--heo-secondbg) !important;
 }
 
 #article-container .tabs > .tab-contents .tab-item-content.active {
-    animation: tabshow 0s;
-    -webkit-animation: tabshow 0s;
-    padding: 1.2rem 1.2rem
+    animation: 0s ease 0s 1 normal none running tabshow;
+    padding: 1.2rem;
 }
 
 @media screen and (max-width: 768px) {
     #article-container .tabs > .tab-contents .tab-item-content.active {
-        padding: .5rem .5rem
+        padding: 0.5rem;
     }
 }
 
 details {
-    margin-bottom: 1rem
+    margin-bottom: 1rem;
 }
 
 details summary {
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
     background: var(--heo-card-bg);
     border-radius: 12px;
-    margin: .2rem 0;
-    transition: .3s;
+    margin: 0.2rem 0px;
+    transition: all 0.3s ease 0s;
     border: var(--style-border);
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 details summary:hover {
     cursor: pointer;
     background: var(--heo-main);
     color: var(--heo-white);
-    transition: .3s;
-    box-shadow: var(--heo-shadow-main)
+    transition: all 0.3s ease 0s;
+    box-shadow: var(--heo-shadow-main);
 }
 
 details summary:focus {
-    outline: 0
+    outline: 0px;
 }
 
 details summary::marker {
     color: var(--heo-main);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 details summary:hover::marker {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 details[open] {
     border-radius: 12px;
     border: var(--style-border);
-    padding: 0 1.5rem;
-    background: var(--heo-card-bg)
+    padding: 0px 1.5rem;
+    background: var(--heo-card-bg);
 }
 
 @media screen and (max-width: 768px) {
     details[open] {
-        padding: 0
+        padding: 0px;
     }
 }
 
 details[open] summary {
-    display: none
+    display: none;
 }
 
-#article-container ul > li:not(.tab):hover:before {
-    border-color: var(--heo-none)
+#article-container ul > li:not(.tab):hover::before {
+    border-color: var(--heo-none);
 }
 
 #article-container a {
@@ -9789,8 +9762,8 @@ details[open] summary {
     border-bottom: 2px solid var(--heo-lighttext);
     color: var(--heo-fontcolor);
     font-weight: 700;
-    padding: 0 4px;
-    border-radius: 4px 4px 0 0
+    padding: 0px 4px;
+    border-radius: 4px 4px 0px 0px;
 }
 
 #article-container a:not(.fancybox):hover {
@@ -9799,99 +9772,91 @@ details[open] summary {
     color: var(--heo-white);
     background: var(--heo-main);
     border-radius: 4px;
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 #article-container a.fancybox {
-    border-bottom: 0;
-    padding: 0;
+    border-bottom: 0px;
+    padding: 0px;
     margin: auto;
     display: contents;
-    width: fit-content
+    width: fit-content;
 }
 
 #article-container a.fancybox img {
-    cursor: pointer
+    cursor: pointer;
 }
 
 .site-card-avatar a.fancybox {
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 #article-container p {
-    margin: 1rem 0;
+    margin: 1rem 0px;
     text-align: left;
-    letter-spacing: .6px
+    letter-spacing: 0.6px;
 }
 
-/*#article-container code {*/
-/*    color: var(--heo-pink);*/
-/*    padding: .2rem .4rem;*/
-/*    border-radius: 4px;*/
-/*    margin: 0 4px;*/
-/*    background: var(--heo-secondbg) !important;*/
-/*    line-height: 2;*/
-/*    box-shadow: var(--heo-shadow-border)*/
-/*}*/
-
-/*#article-container code::selection {*/
-/*    background: var(--heo-main) !important*/
-/*}*/
-
 .table-wrap {
-    margin: 1rem 0;
-    border-radius: 8px
+    margin: 1rem 0px;
+    border-radius: 8px;
 }
 
-table td, table th {
-    border: var(--style-border-always)
+table td,
+table th {
+    border: var(--style-border-always);
 }
 
 table thead {
-    background: var(--heo-secondbg)
+    background: var(--heo-secondbg);
 }
 
-b, strong {
-    color: var(--heo-lighttext)
+b,
+strong {
+    color: var(--heo-lighttext);
 }
 
 #article-container p {
-    font-size: .9rem;
+    font-size: 0.9rem;
     line-height: 1.7;
-    font-weight: 400
+    font-weight: 400;
 }
 
-#article-container.post-content h1, #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 {
+#article-container.post-content h1,
+#article-container.post-content h2,
+#article-container.post-content h3,
+#article-container.post-content h4 {
+    display: flex;
     align-items: center;
     justify-content: space-between;
-    flex-direction: row-reverse
+    flex-direction: row-reverse;
 }
 
 #article-container.post-content h1 {
     font-size: 1.5rem;
-    line-height: 1.3
+    line-height: 1.3;
 }
 
 #article-container.post-content h2 {
     font-size: 1.3rem;
     line-height: 1.3;
     border-top: 1px dashed var(--heo-theme-op);
-    padding-top: 1.5rem
+    padding-top: 1.5rem;
 }
 
 #article-container.post-content h3 {
     font-size: 1.1rem;
-    line-height: 1.3
+    line-height: 1.3;
 }
 
 #article-container.post-content h4 {
     font-size: 1rem;
-    line-height: 1.3
+    line-height: 1.3;
 }
 
 @media screen and (max-width: 768px) {
     #article-container p {
-        line-height: 1.5
+        line-height: 1.5;
     }
 }
 
@@ -9899,108 +9864,111 @@ b, strong {
     display: flex;
     align-items: center;
     height: 30px;
-    color: var(--heo-yellow)
+    color: var(--heo-yellow);
 }
 
 .note.warning:not(.modern) {
     border-radius: 8px;
     border-width: 1px;
     border-color: var(--heo-yellow);
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 #article-container .tag-Link {
     background: var(--heo-secondbg);
-    border-radius: 8px !important;
     display: flex;
-    border: var(--style-border);
     flex-direction: column;
-    padding: .5rem 1rem;
+    padding: 0.5rem 1rem;
+    margin-top: 1rem;
+    border-radius: 8px !important;
     border-width: 1px !important;
-    margin-top: 1rem
 }
 
 #article-container .tag-Link:hover {
-    border: var(--style-border-hover)
+    border: var(--style-border-hover);
 }
 
 #article-container .tag-Link .tag-link-tips {
     border-bottom: var(--style-border-always);
     padding-bottom: 4px;
-    font-size: .6rem;
+    font-size: 0.6rem;
     color: var(--heo-gray);
     font-weight: 400;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #article-container .tag-Link:hover .tag-link-tips {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 #article-container .tag-Link .tag-link-bottom {
     display: flex;
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     align-items: center;
     justify-content: space-around;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #article-container .tag-Link .tag-link-bottom .tag-link-left {
     width: 60px;
     min-width: 60px;
     height: 60px;
-    background-size: cover !important;
     border-radius: 60px;
-    background: var(--heo-card-bg);
-    pointer-events: none
+    pointer-events: none;
+    background-size: cover !important;
 }
 
 #article-container .tag-Link .tag-link-bottom .tag-link-right {
     margin-left: 1rem;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-title {
     font-size: 1rem;
     line-height: 1.2;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename {
-    font-size: .7rem;
+    font-size: 0.7rem;
     color: var(--heo-gray);
     font-weight: 400;
     margin-top: 4px;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #article-container .tag-Link:hover .tag-link-bottom .tag-link-right .tag-link-sitename {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 #article-container .tag-Link .tag-link-bottom i {
     margin-left: auto;
-    padding-left: .5rem;
-    pointer-events: none
+    padding-left: 0.5rem;
+    pointer-events: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-top: 1rem;
-    padding-top: 0;
-    padding-left: 0 !important;
-    font-weight: weight
+    padding-top: 0px;
+    padding-left: 0px !important;
 }
 
 #post h2 {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
 }
 
-#article-container > h1:nth-child(1), #article-container > h2:nth-child(1) {
-    margin: 0
+#article-container > h1:nth-child(1),
+#article-container > h2:nth-child(1) {
+    margin: 0px;
 }
 
-#aside-content #card-toc .toc-content:before {
-    display: none
+#aside-content #card-toc .toc-content::before {
+    display: none;
 }
 
 blockquote {
@@ -10008,115 +9976,94 @@ blockquote {
     background-color: var(--heo-secondbg);
     color: var(--heo-secondtext);
     border-radius: 8px;
-    margin: 1rem 0;
-    padding: .5rem .8rem
+    margin: 1rem 0px;
+    padding: 0.5rem 0.8rem;
 }
 
 blockquote p {
-    padding: 0
+    padding: 0px;
 }
 
 #article-container .headerlink::before {
-    content: "\f0c1";
-    font-family: "Font Awesome 5 Free"
+    content: "";
+    font-family: "Font Awesome 5 Free";
 }
 
 #article-container .headerlink {
     float: right;
-    opacity: .08;
-    border-bottom-style: none;
-    border-bottom: none;
+    opacity: 0.08;
     position: relative;
-    padding: 0;
+    padding: 0px;
     border: none;
-    border-radius: 8px !important;
     line-height: 1;
-    font-size: 1rem
+    font-size: 1rem;
+    border-radius: 8px !important;
 }
 
 #article-container .headerlink:hover {
-    background: 0 0 !important;
     opacity: 1;
+    text-decoration: none;
+    background: 0px 0px !important;
     border-bottom: none !important;
     box-shadow: none !important;
-    background: var(--heo-none);
     color: var(--heo-lighttext) !important;
-    text-decoration: none
 }
 
 #sidebar {
-    background: var(--heo-maskbg)
+    background: var(--heo-maskbg);
 }
 
 #article-container img {
     border-radius: 12px;
-    margin-bottom: .5rem;
-    object-fit: cover
+    margin-bottom: 0.5rem;
+    object-fit: cover;
+}
+
+#article-container img.error {
+    content: url("https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp");
 }
 
 .doge-inner-player {
-    border-radius: 12px !important
+    border-radius: 12px !important;
 }
 
-#article-container ol li:before, #article-container ul li:before {
+#article-container ol li::before,
+#article-container ul li::before {
     background: var(--heo-theme);
-    cursor: default
+    cursor: default;
 }
 
-#article-container ol li:hover:before, #article-container ul li:hover:before {
-    transform: rotate(0)
-}
-
-figure {
-    margin-top: .5rem !important
-}
-
-#article-container figure.highlight .highlight-tools {
-    background: var(--heo-secondbg) !important
+#article-container ol li:hover::before,
+#article-container ul li:hover::before {
+    transform: rotate(0deg);
 }
 
 #article-container .gutter {
-    opacity: .6
+    opacity: 0.6;
 }
 
 #article-container .code-lang {
-    margin-left: 6px
+    margin-left: 6px;
 }
 
 #article-container .highlight-tools .code-lang {
     text-transform: capitalize;
-    left: 1.9rem
-}
-
-#article-container figure.highlight table::-webkit-scrollbar {
-    color: var(--heo-blue);
-    background: var(--heo-secondbg);
-    height: 8px
-}
-
-#article-container figure.highlight table::-webkit-scrollbar-thumb {
-    background: var(--heo-gray)
-}
-
-#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {
-    background: var(--heo-main)
+    left: 1.9rem;
 }
 
 #article-container .code-expand-btn i {
+    font-size: 1rem;
     color: var(--heo-white) !important;
-    font-size: 1rem
 }
 
 #article-container .code-expand-btn {
-    background-color: var(--heo-mask);
     background: var(--heo-secondbg);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 #article-container .code-expand-btn:hover {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 #readmore-talk {
@@ -10124,54 +10071,54 @@ figure {
     color: var(--heo-lighttext);
     padding: 8px;
     border-radius: 12px;
-    background: #f2b94b0c
+    background: rgba(242, 185, 75, 0.047);
 }
 
 .relatedPosts > .relatedPosts-list .cover::after {
-    content: ' ';
+    content: " ";
     display: block;
     position: absolute;
     z-index: 0;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
-    background-size: 100% 100%
+    background: url("https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp") 0% 0% / 100% 100%;
 }
 
 .relatedPosts > .relatedPosts-list a {
     display: flex;
     width: 100%;
-    height: 100%
+    height: 100%;
 }
 
 @media screen and (min-width: 768px) {
     #post > div.relatedPosts > div.relatedPosts-list > div {
-        -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+        -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
     }
 
     #post > div.relatedPosts > div.relatedPosts-list > div {
-        border-radius: 12px
+        border-radius: 12px;
     }
 
     .relatedPosts > .headline {
-        font-size: .8em
+        font-size: 0.8em;
     }
 
     @media screen and (max-width: 1300px) {
         #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7) {
-            display: none
+            display: none;
         }
 
         #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8) {
-            display: none
+            display: none;
         }
     }
 }
 
 .relatedPosts > .headline {
-    margin-bottom: .8rem !important;
-    font-size: 1.2em
+    font-size: 1.2em;
+    margin-bottom: 0.8rem !important;
 }
 
 #post .tag_share .post-meta__tags {
@@ -10179,31 +10126,31 @@ figure {
     border: var(--style-border-always);
     color: var(--heo-fontcolor);
     border-radius: 8px;
-    margin: 0;
+    margin: 0px;
     display: flex;
     align-items: center;
     white-space: nowrap;
-    height: 34px
+    height: 34px;
 }
 
 #post .tag_share .post-meta__tags:not(:last-child) {
-    margin: 0 .5rem 0 0
+    margin: 0px 0.5rem 0px 0px;
 }
 
 #post .tag_share .post-meta__tags:hover {
     background: var(--heo-lighttext);
     box-shadow: var(--heo-shadow-main);
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 @media screen and (min-width: 1300px) {
     #post .tag_share .post-meta__tags {
         background: var(--heo-card-bg);
-        border: var(--style-border)
+        border: var(--style-border);
     }
 
     #post .tag_share .post-meta__tags:hover {
-        border: var(--style-border-hover)
+        border: var(--style-border-hover);
     }
 }
 
@@ -10211,121 +10158,120 @@ figure {
     background: var(--heo-card-bg);
     padding: 1rem 1.3rem;
     overflow: hidden;
-    border: var(--style-border);
     border-width: 1px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
-#post .post-copyright:after {
+#post .post-copyright::after {
     position: absolute;
     right: 22px;
     top: -77px;
-    content: '\f25e';
+    content: "";
     font-size: 180px;
-    font-family: 'Font Awesome 5 Brands';
+    font-family: "Font Awesome 5 Brands";
     color: var(--heo-fontcolor);
-    opacity: .4;
-    filter: blur(7px)
+    opacity: 0.4;
+    filter: blur(7px);
 }
 
 @media screen and (max-width: 768px) {
     #post .post-copyright {
-        padding: 1rem 1.3rem
+        padding: 1rem 1.3rem;
     }
 }
 
 .post-copyright__author {
     display: flex;
-    align-items: center
+    align-items: center;
 }
 
 .post-copyright__original {
     background: var(--heo-fontcolor);
     color: var(--heo-card-bg);
-    padding: .2rem .5rem;
-    font-size: .7rem;
+    padding: 0.2rem 0.5rem;
+    font-size: 0.7rem;
     border-radius: 8px;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     font-weight: 700;
     line-height: 1.5;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .post-copyright__original:hover {
     background: var(--heo-main);
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 @media screen and (max-width: 768px) {
     #post .post-copyright {
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 
     .post-copyright .post-meta-original {
-        display: none
+        display: none;
     }
 
     .post-copyright__original {
-        display: none
+        display: none;
     }
 
-    #post .post-copyright:after {
-        display: none
+    #post .post-copyright::after {
+        display: none;
     }
 }
 
 .post-copyright-copybtn {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     color: var(--heo-fontcolor);
-    opacity: .4;
-    transition: .3s
+    opacity: 0.4;
+    transition: all 0.3s ease 0s;
 }
 
 .post-copyright-copybtn:hover {
     opacity: 1;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #post .post-copyright .post-copyright-info a {
-    padding: 0;
+    padding: 0px;
     color: var(--heo-fontcolor);
-    font-weight: 700
+    font-weight: 700;
 }
 
 #post .post-copyright .post-copyright__notice .post-copyright-info a {
-    padding: 0 4px
+    padding: 0px 4px;
 }
 
 #post .post-copyright .post-copyright-info a:hover {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 #post .post-copyright .post-copyright-info {
-    padding-left: 0;
+    padding-left: 0px;
     color: var(--heo-fontcolor);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
 }
 
 #post .post-copyright .post-copyright-title {
-    padding-left: 0;
+    padding-left: 0px;
     color: var(--heo-fontcolor);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     font-size: 1rem;
-    font-weight: 700
+    font-weight: 700;
 }
 
 #post .post-copyright .post-copyright-title:hover {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 #post > div.post-copyright > div.post-copyright__author > span > span {
-    padding: 0;
+    padding: 0px;
     color: var(--heo-fontcolor);
     font-weight: 700;
     font-size: 1rem;
@@ -10333,108 +10279,108 @@ figure {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
 }
 
 @media screen and (max-width: 768px) {
     #post > div.post-copyright > div.post-copyright__author > span > span {
-        -webkit-line-clamp: 3
+        -webkit-line-clamp: 3;
     }
 
     #post .post-copyright .post-copyright-info {
-        -webkit-line-clamp: 2
+        -webkit-line-clamp: 2;
     }
 
     #post .post-copyright .post-copyright-title {
         -webkit-line-clamp: 3;
-        line-height: 1.2
+        line-height: 1.2;
     }
 }
 
 #post > div.post-copyright > div.post-copyright__type {
     line-height: 16px;
     display: flex;
-    margin-top: 8px
+    margin-top: 8px;
 }
 
 #post > div.post-copyright > div.post-copyright__type > span > a {
     font-size: 14px;
-    opacity: .6;
-    line-height: 16px
+    opacity: 0.6;
+    line-height: 16px;
 }
 
 #post > div.post-copyright > div.post-copyright__type > span > a:hover {
     opacity: 1;
-    background: 0 0
+    background: 0px 0px;
 }
 
 #post-copyright-url a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
 }
 
 #post > div.post-copyright > div.post-copyright__notice {
-    font-size: .7rem;
+    font-size: 0.7rem;
     line-height: 1rem;
-    margin: .5rem 0
+    margin: 0.5rem 0px;
 }
 
-#post .post-copyright:before {
-    display: none
+#post .post-copyright::before {
+    display: none;
 }
 
 .post-reward .reward-button {
     background: var(--heo-red);
     color: var(--heo-white);
-    padding: 0;
+    padding: 0px;
     width: 133px;
     height: 40px;
     line-height: 39px;
-    box-shadow: var(--heo-shadow-red)
+    box-shadow: var(--heo-shadow-red);
 }
 
 .post-reward:hover .reward-button {
     color: var(--heo-white);
     background: var(--heo-theme);
-    box-shadow: none
+    box-shadow: none;
 }
 
-.share-button .fa-qrcode:before {
-    font-size: 1rem
+.share-button .fa-qrcode::before {
+    font-size: 1rem;
 }
 
 .post-qr-code-img {
     box-shadow: var(--heo-shadow-lightblack);
     border-radius: 12px;
-    border: var(--style-border-always)
+    border: var(--style-border-always);
 }
 
 .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
-    padding-top: 0;
+    padding-top: 0px;
     margin-top: -8px;
-    margin-bottom: 8px
+    margin-bottom: 8px;
 }
 
 .post-reward .reward-main .reward-all {
     border-radius: 12px;
     background: var(--heo-background);
     border: var(--style-border-always);
-    padding: .8rem;
+    padding: 0.8rem;
     display: flex;
     box-shadow: var(--heo-shadow-border);
     flex-direction: column;
-    align-items: center
+    align-items: center;
 }
 
 .reward-dec {
-    font-size: .6rem
+    font-size: 0.6rem;
 }
 
 .reward-text {
-    margin-bottom: 0;
-    font-weight: 700
+    margin-bottom: 0px;
+    font-weight: 700;
 }
 
 a.reward-main-btn {
@@ -10443,165 +10389,175 @@ a.reward-main-btn {
     display: flex;
     flex-direction: column;
     border-radius: 12px;
-    padding: 4px 0;
+    padding: 4px 0px;
     border: var(--style-border-always);
     margin: 8px;
-    width: 100%
+    width: 100%;
 }
 
 a.reward-main-btn:hover {
     color: var(--heo-white);
-    background: var(--heo-red);
-    background-image: url(../../p.zhheo.com/JgNrST23690481619450556342.gif!cover.webp);
-    box-shadow: var(--heo-shadow-red)
+    background-image: url("https://p.zhheo.com/JgNrST23690481619450556342.gif!cover");
+    box-shadow: var(--heo-shadow-red);
 }
 
 .reward-title {
     font-weight: 700;
-    color: var(--heo-red)
+    color: var(--heo-red);
 }
 
 .reward-link.mode {
     background: var(--heo-green);
     color: var(--heo-white);
-    padding: 0;
+    padding: 0px;
     width: 173px;
     height: 40px;
     line-height: 39px;
     box-shadow: var(--heo-shadow-green);
     border-radius: 8px;
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     text-align: center;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (min-width: 1300px) {
     .reward-link.mode:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     .reward-link.mode:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 .reward-link.mode a {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .reward-link.mode i {
-    margin-right: 4px
+    margin-right: 4px;
 }
 
 .reward-link.mode:hover {
     background: var(--heo-theme);
-    box-shadow: none
+    box-shadow: none;
 }
 
 #quit-box {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    background: rgba(0, 0, 0, .4);
-    top: 0;
-    left: 0;
+    background: rgba(0, 0, 0, 0.4);
+    top: 0px;
+    left: 0px;
     display: none;
     z-index: 101;
-    margin: 0 !important
+    margin: 0px !important;
 }
 
 .post-tools-left #quit-box {
-    display: none
+    display: none;
 }
 
-#pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
-    background: var(--heo-secondbg)
+#pagination .next-post,
+#pagination .prev-post,
+.next-post.pull-right,
+.prev-post.pull-left {
+    background: var(--heo-secondbg);
 }
 
 @media screen and (min-width: 768px) {
     #pagination .next-post a {
-        border-left: var(--heo-card-bg);
         border-left-width: 3px;
         border-left-style: solid;
         display: flex;
         align-items: flex-start;
-        height: 150px
+        height: 150px;
     }
 
     #pagination .next-post.pull-full a {
-        border-left-width: 0
+        border-left-width: 0px;
     }
 
     #pagination .prev-post a {
-        border-right: var(--heo-card-bg);
         border-right-width: 3px;
-        border-right-style: solid
+        border-right-style: solid;
     }
 
     #pagination .pagination-info {
-        padding: 1rem 1.5rem 1rem 1.5rem;
+        padding: 1rem 1.5rem;
         position: relative;
         display: flex;
-        top: 0;
+        top: 0px;
         transform: none;
         flex-direction: column;
         justify-content: center;
         margin: auto;
-        height: 100%
+        height: 100%;
     }
 
-    #pagination .next-post a:hover, #pagination .prev-post a:hover {
-        background: var(--heo-main)
+    #pagination .next-post a:hover,
+    #pagination .prev-post a:hover {
+        background: var(--heo-main);
     }
 
-    #pagination .next-post a:hover div, #pagination .prev-post a:hover div {
-        color: var(--heo-white) !important
+    #pagination .next-post a:hover div,
+    #pagination .prev-post a:hover div {
+        color: var(--heo-white) !important;
     }
 }
 
 @media screen and (max-width: 768px) {
-    #pagination .next-post a:hover, #pagination .prev-post a:hover {
-        background: var(--heo-none)
+
+    #pagination .next-post a:hover,
+    #pagination .prev-post a:hover {
+        background: var(--heo-none);
     }
 }
 
-#pagination img.next-cover, #pagination img.prev-cover {
-    opacity: .15;
+#pagination img.next-cover,
+#pagination img.prev-cover {
+    opacity: 0.15;
     transform: scale(1.03);
-    transition: .3s;
-    filter: blur(0);
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
+    transition: all 0.3s ease 0s;
+    filter: blur(0px);
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
-#pagination .next-post:hover img.next-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, #pagination .prev-post:hover img.prev-cover {
-    opacity: .25;
+#pagination .next-post:hover img.next-cover,
+#pagination .next-post:hover img.prev-cover,
+#pagination .prev-post:hover img.next-cover,
+#pagination .prev-post:hover img.prev-cover {
+    opacity: 0.25;
     transform: scale(1.03);
-    filter: blur(5px)
+    filter: blur(5px);
 }
 
-#pagination .next-post .label, #post #pagination .prev-post .label {
-    color: var(--heo-fontcolor)
+#pagination .next-post .label,
+#post #pagination .prev-post .label {
+    color: var(--heo-fontcolor);
 }
 
-#pagination .next_info, #post #pagination .prev_info {
+#pagination .next_info,
+#post #pagination .prev_info {
     color: var(--heo-fontcolor);
     font-weight: 700;
     -webkit-line-clamp: 2;
     white-space: normal;
     line-height: 1.3;
-    font-size: .9rem;
+    font-size: 0.9rem;
     display: -webkit-box;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
 }
 
 #post #pagination {
     overflow: hidden;
-    position: inherit
+    position: inherit;
 }
 
 #pagination.pagination-post {
-    background: var(--heo-card-bg)
+    background: var(--heo-card-bg);
 }
 
 @media screen and (min-width: 1300px) {
@@ -10610,137 +10566,145 @@ a.reward-main-btn:hover {
         width: 300px;
         bottom: -100px;
         right: 20px;
-        z-index: 1000;
         height: fit-content;
-        transition: cubic-bezier(.42, 0, .3, 1.11) .3s;
+        transition: all 0.3s cubic-bezier(0.42, 0, 0.3, 1.11) 0s;
         border: var(--style-border);
         border-radius: 12px;
         overflow: hidden;
         cursor: pointer;
         opacity: 0;
-        z-index: 1002
+        z-index: 1002;
     }
 
     #post #pagination.show-window {
         bottom: 20px;
-        opacity: 1
+        opacity: 1;
     }
 
     #post #pagination:hover {
-        border: var(--style-border-hover)
+        border: var(--style-border-hover);
     }
 
     #pagination .next-post a {
         border: none;
         height: fit-content;
-        padding: .5rem 0
+        padding: 0.5rem 0px;
     }
 
     #pagination.pagination-post {
-        border-radius: 0
+        border-radius: 0px;
     }
 
-    #pagination .next_info, #post #pagination .prev_info {
+    #pagination .next_info,
+    #post #pagination .prev_info {
         font-size: 14px;
-        font-weight: 400
+        font-weight: 400;
     }
 
     #pagination .pagination-info {
-        padding: .5rem 1rem;
-        transform: none
+        padding: 0.5rem 1rem;
+        transform: none;
     }
 
     #post #pagination {
-        background: 0 0
+        background: 0px 0px;
     }
 
-    #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
+    #pagination .next-post,
+    #pagination .prev-post,
+    .next-post.pull-right,
+    .prev-post.pull-left {
         background: var(--heo-maskbgdeep);
-        -webkit-backdrop-filter: blur(5px);
-        backdrop-filter: blur(5px)
+        backdrop-filter: blur(5px);
     }
 
     .prev-post.pull-left {
-        display: none
+        display: none;
     }
 
     .next-post.pull-right {
-        width: 100% !important
+        width: 100% !important;
     }
 
     #pagination .next-post .pagination-info {
         text-align: left;
-        position: relative
+        position: relative;
     }
 
-    #pagination .next-post .label, #post #pagination .prev-post .label {
+    #pagination .next-post .label,
+    #post #pagination .prev-post .label {
         color: var(--heo-fontcolor);
         font-weight: 700;
         font-size: 12px;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         border-bottom: var(--style-border);
         line-height: 1;
-        padding-bottom: .5rem
+        padding-bottom: 0.5rem;
     }
 }
 
 @media screen and (max-width: 768px) {
     .prev-post.pull-left {
-        border-bottom: var(--style-border-always)
+        border-bottom: var(--style-border-always);
     }
 
     #post #pagination {
         border-radius: 12px;
         border: var(--style-border-always);
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 
-    #pagination .next-post .label, #post #pagination .prev-post .label {
-        text-align: left
+    #pagination .next-post .label,
+    #post #pagination .prev-post .label {
+        text-align: left;
     }
 
-    #pagination .next_info, #post #pagination .prev_info {
-        text-align: left
+    #pagination .next_info,
+    #post #pagination .prev_info {
+        text-align: left;
     }
 
-    #pagination .next-post, #pagination .prev-post, .next-post.pull-right, .prev-post.pull-left {
-        background: var(--heo-card-bg)
+    #pagination .next-post,
+    #pagination .prev-post,
+    .next-post.pull-right,
+    .prev-post.pull-left {
+        background: var(--heo-card-bg);
     }
 }
 
 @media screen and (max-width: 768px) {
     #pagination .page-number {
-        display: none
+        display: none;
     }
 
     #pagination .pagination .space {
-        display: none
+        display: none;
     }
 
     #pagination .pagination .extend {
         width: 100%;
         height: 2.5rem;
-        margin: .2rem 1rem 1rem 1rem;
+        margin: 0.2rem 1rem 1rem;
         border-radius: 12px;
         line-height: 2.5rem;
         background: var(--heo-card-bg);
         border: var(--style-border-always);
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 
     #pagination .pagination .extend i {
-        display: none
+        display: none;
     }
 
     #pagination .pagination .extend:hover {
         background: var(--heo-theme);
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     #pagination .pagination {
         background: var(--heo-background);
-        transition: .3s;
-        display: flex
+        transition: all 0.3s ease 0s;
+        display: flex;
     }
 }
 
@@ -10750,64 +10714,69 @@ a.reward-main-btn:hover {
         background: var(--heo-card-bg);
         height: 2rem;
         line-height: calc(2rem - 2px);
-        border-radius: 8px !important;
-        margin: 0 .3rem;
+        margin: 0px 0.3rem;
         box-shadow: var(--heo-shadow-border);
         border: var(--style-border);
-        transition: .3s
+        transition: all 0.3s ease 0s;
+        border-radius: 8px !important;
     }
 
     #pagination .page-number.current {
         background: var(--heo-theme);
         border: var(--style-border-hover);
-        box-shadow: var(--heo-shadow-theme)
+        box-shadow: var(--heo-shadow-theme);
     }
 
     #pagination .page-number.current:hover {
         background: var(--heo-theme);
         box-shadow: var(--heo-shadow-theme);
-        color: var(--heo-white)
+        color: var(--heo-white);
     }
 
     #pagination .page-number:hover {
         color: var(--heo-theme);
         border: var(--style-border-hover);
         box-shadow: var(--heo-shadow-main);
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
-    #pagination a.extend.next:hover, #pagination a.extend.prev:hover {
+    #pagination a.extend.next:hover,
+    #pagination a.extend.prev:hover {
         color: var(--heo-theme);
         border: var(--style-border-hover);
         box-shadow: var(--heo-shadow-main);
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     @media screen and (min-width: 1300px) {
         #pagination .page-number:hover {
-            transform: scale(1.03)
+            transform: scale(1.03);
         }
 
-        #pagination a.extend.next:hover, #pagination a.extend.prev:hover {
-            transform: scale(1.03)
+        #pagination a.extend.next:hover,
+        #pagination a.extend.prev:hover {
+            transform: scale(1.03);
         }
 
         #pagination .page-number:active {
-            transform: scale(.97)
+            transform: scale(0.97);
         }
 
-        #pagination a.extend.next:active, #pagination a.extend.prev:active {
-            transform: scale(.97)
+        #pagination a.extend.next:active,
+        #pagination a.extend.prev:active {
+            transform: scale(0.97);
         }
-    }#pagination span.space {
-         margin: 0 .3rem
-     }
+    }
 
-    #pagination a.extend.next, #pagination a.extend.prev {
+    #pagination span.space {
+        margin: 0px 0.3rem;
+    }
+
+    #pagination a.extend.next,
+    #pagination a.extend.prev {
         width: 4rem;
         height: 2rem;
         line-height: 1.9rem;
-        border-radius: 8px !important;
         background: var(--heo-card-bg);
         box-shadow: var(--heo-shadow-border);
         position: absolute;
@@ -10816,87 +10785,89 @@ a.reward-main-btn:hover {
         align-items: center;
         justify-content: center;
         overflow: hidden;
-        transition: .3s
+        transition: all 0.3s ease 0s;
+        border-radius: 8px !important;
     }
 
-    #pagination a.extend.next i, #pagination a.extend.prev i {
-        transition: .3s
+    #pagination a.extend.next i,
+    #pagination a.extend.prev i {
+        transition: all 0.3s ease 0s;
     }
 
     #pagination a.extend.next {
-        overflow: hidden
+        overflow: hidden;
     }
 
     #pagination a.extend.next .pagination_tips_next {
         margin-left: -32px;
-        transition: .3s;
-        opacity: 0
+        transition: all 0.3s ease 0s;
+        opacity: 0;
     }
 
     #pagination a.extend.next:hover .pagination_tips_next {
         margin-left: 2px;
         opacity: 1;
-        white-space: nowrap
+        white-space: nowrap;
     }
 
     #pagination a.extend.prev .pagination_tips_prev {
         margin-right: -32px;
-        transition: .3s;
-        opacity: 0
+        transition: all 0.3s ease 0s;
+        opacity: 0;
     }
 
     #pagination a.extend.prev:hover .pagination_tips_prev {
         margin-right: 2px;
         opacity: 1;
-        white-space: nowrap
+        white-space: nowrap;
     }
 
     #pagination {
-        overflow: visible
+        overflow: visible;
     }
 
     #pagination .pagination {
         position: relative;
         display: flex;
-        justify-content: center
+        justify-content: center;
     }
 }
 
 .relatedPosts-list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .relatedPosts > .relatedPosts-list > div {
     background: var(--heo-background);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     cursor: pointer;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .relatedPosts > .relatedPosts-list > div:hover {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 @media screen and (max-width: 768px) {
     .relatedPosts {
-        display: none
+        display: none;
     }
 
     .relatedPosts > .relatedPosts-list > div {
-        border-radius: 4px
+        border-radius: 4px;
     }
 }
 
 @media screen and (min-width: 1300px) {
     .relatedPosts > .relatedPosts-list > div {
-        width: calc(25% - 8px)
+        width: calc(25% - 8px);
     }
 }
 
 .relatedPosts > .relatedPosts-list > div:hover a .title {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .relatedPosts > .relatedPosts-list .content .title {
@@ -10904,17 +10875,17 @@ a.reward-main-btn:hover {
     font-weight: 700;
     line-height: 1.5;
     -webkit-line-clamp: 4;
-    font-size: .9rem;
-    text-align: left
+    font-size: 0.9rem;
+    text-align: left;
 }
 
 .relatedPosts > .relatedPosts-list .content .date {
     color: var(--heo-fontcolor);
-    display: none
+    display: none;
 }
 
 #post > hr {
-    display: none
+    display: none;
 }
 
 .post-tips {
@@ -10922,123 +10893,124 @@ a.reward-main-btn:hover {
     font-size: 14px;
     position: absolute;
     bottom: 1rem;
-    left: 2rem
+    left: 2rem;
 }
 
 .post-tips a {
     color: var(--heo-gray) !important;
-    border: none !important
+    border: none !important;
 }
 
 .post-tips a:hover {
-    color: var(--heo-main) !important
+    color: var(--heo-main) !important;
 }
 
 @media screen and (max-width: 768px) {
     .post-tips {
-        left: 1rem
+        left: 1rem;
     }
 }
 
 div#post-comment {
-    margin-top: 2rem
+    margin-top: 2rem;
 }
 
 #post-comment > div.comment-head > div.comment-privacy {
     display: block;
     justify-content: space-between;
     float: right;
-    line-height: 2rem
+    line-height: 2rem;
 }
 
 #post-comment .comment-tips {
-    background-color: rgba(103, 194, 58, .13);
-    border: var(--style-border-always);
+    background-color: rgba(103, 194, 58, 0.13);
     border-color: var(--heo-green);
     color: var(--heo-green);
     border-radius: 8px;
     padding: 8px 12px;
-    margin-top: .5rem;
-    display: none
+    margin-top: 0.5rem;
+    display: none;
 }
 
 #post-comment .comment-tips.show {
-    display: flex
+    display: flex;
 }
 
 .tk-avatar {
+    box-shadow: var(--heo-shadow-border);
     width: 32px !important;
     height: 32px !important;
-    box-shadow: var(--heo-shadow-border)
 }
 
 .tk-avatar.tk-has-avatar {
     width: 32px !important;
     height: 32px !important;
-    border-radius: 32px !important
+    border-radius: 32px !important;
 }
 
 .tk-row .tk-avatar {
-    display: none
+    display: none;
 }
 
 .tk-avatar .tk-avatar-img {
-    height: 32px !important
+    height: 32px !important;
 }
 
 .tk-avatar .tk-avatar-img:hover {
-    transform: rotate(360deg)
+    transform: rotate(360deg);
 }
 
 img.tk-avatar-img {
-    height: 32px !important
+    height: 32px !important;
 }
 
 .tk-avatar {
-    margin-right: .5rem !important
+    margin-right: 0.5rem !important;
 }
 
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
-    content: '输入QQ号会自动获取昵称和头像'
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1)::before {
+    content: "输入QQ号会自动获取昵称和头像";
 }
 
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
-    content: '收到回复将会发送到你的邮箱'
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2)::before {
+    content: "收到回复将会发送到你的邮箱";
 }
 
-.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
-    content: '可以通过昵称访问你的网站'
+.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3)::before {
+    content: "可以通过昵称访问你的网站";
 }
 
 .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before {
     display: block;
-    animation: commonTipsIn .3s
+    animation: 0.3s ease 0s 1 normal none running commonTipsIn;
 }
 
 .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
     display: block;
-    animation: commonTriangleIn .3s
+    animation: 0.3s ease 0s 1 normal none running commonTriangleIn;
 }
 
 @keyframes commonTipsIn {
     0% {
         top: -50px;
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
         top: -60px;
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @keyframes commonTriangleIn {
     0% {
         transform: translate(-50%, -36px);
-        opacity: 0
+        opacity: 0;
     }
+
     100% {
         transform: translate(-50%, -46px);
-        opacity: 1
+        opacity: 1;
     }
 }
 
@@ -11051,44 +11023,47 @@ img.tk-avatar-img {
     left: 50%;
     transform: translate(-50%);
     padding: 14px 18px;
-    background: #444;
-    color: #fff;
-    z-index: 100
+    background: rgb(68, 68, 68);
+    color: rgb(255, 255, 255);
+    z-index: 100;
 }
 
 .el-input.el-input--small.el-input-group.el-input-group--prepend::after {
     display: none;
-    content: '';
+    content: "";
     position: absolute;
-    border: 12px solid transparent;
-    border-top-color: #444;
+    border-width: 12px;
+    border-style: solid;
+    border-color: rgb(68, 68, 68) transparent transparent;
+    border-image: initial;
     left: 50%;
-    transform: translate(-50%, -46px)
+    transform: translate(-50%, -46px);
 }
 
 .tk-nick {
+    line-height: 32px;
     font-size: 1rem !important;
-    line-height: 32px
 }
 
-.el-input-group__append, .el-input-group__prepend {
+.el-input-group__append,
+.el-input-group__prepend {
     background-color: var(--heo-card-bg) !important;
     color: var(--heo-fontcolor) !important;
-    border-color: var(--heo-card-border) !important
+    border-color: var(--heo-card-border) !important;
 }
 
 .el-input__inner {
     background: var(--heo-background) !important;
     border: 1px solid var(--heo-card-border) !important;
-    color: var(--heo-fontcolor) !important
+    color: var(--heo-fontcolor) !important;
 }
 
 .page .el-input__inner {
-    background: var(--heo-card-bg) !important
+    background: var(--heo-card-bg) !important;
 }
 
 .el-input__inner:focus {
-    border: 1px solid var(--heo-main) !important
+    border: 1px solid var(--heo-main) !important;
 }
 
 .el-textarea__inner {
@@ -11096,215 +11071,216 @@ img.tk-avatar-img {
     color: var(--heo-fontcolor) !important;
     border-radius: 12px !important;
     min-height: 100px !important;
-    padding: 16px 16px 40px 16px !important;
-    border: var(--style-border-always) !important
+    padding: 16px 16px 40px !important;
+    border: var(--style-border-always) !important;
 }
 
 @media screen and (max-width: 768px) {
     .el-textarea__inner {
         border-radius: 4px !important;
-        background: var(--card-bg) !important
+        background: var(--card-bg) !important;
     }
 }
 
 #page .el-textarea__inner {
+    box-shadow: var(--heo-shadow-border);
     background: var(--heo-card-bg) !important;
-    box-shadow: var(--heo-shadow-border)
 }
 
 .el-textarea__inner:focus {
+    box-shadow: var(--heo-shadow-main);
     border: var(--style-border-hover-always) !important;
-    box-shadow: var(--heo-shadow-main)
 }
 
 #page .tk-meta-input .el-input {
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 #twikoo .tk-row .tk-col {
-    flex-direction: column-reverse !important
+    flex-direction: column-reverse !important;
 }
 
 #twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1) {
-    display: none !important
+    display: none !important;
 }
 
 .el-loading-mask {
-    background-color: none !important
 }
 
 .tk-tag {
-    transform: translateY(-2px)
+    transform: translateY(-2px);
 }
 
 .tk-tag-green {
     border-radius: 4px !important;
-    border: 0 solid #e1f3d8 !important;
-    font-size: .5rem !important
+    border: 0px solid rgb(225, 243, 216) !important;
+    font-size: 0.5rem !important;
 }
 
-[data-theme=dark] .tk-tag-green {
-    background-color: #67c23a21 !important
+[data-theme="dark"] .tk-tag-green {
+    background-color: rgba(103, 194, 58, 0.13) !important;
 }
 
 .tk-tag-yellow {
     border-radius: 4px !important;
-    border: 0 solid #e1f3d8 !important;
-    font-size: .5rem !important
+    border: 0px solid rgb(225, 243, 216) !important;
+    font-size: 0.5rem !important;
 }
 
-[data-theme=dark] .tk-tag-green {
-    background-color: #c0c23a21 !important
+[data-theme="dark"] .tk-tag-green {
+    background-color: rgba(192, 194, 58, 0.13) !important;
 }
 
 .tk-tag-red {
     border-radius: 4px !important;
-    border: 0 solid #f3d8d8 !important;
-    font-size: .5rem !important
+    border: 0px solid rgb(243, 216, 216) !important;
+    font-size: 0.5rem !important;
 }
 
-[data-theme=dark] .tk-tag-red {
-    background-color: #c23a3a21 !important
+[data-theme="dark"] .tk-tag-red {
+    background-color: rgba(194, 58, 58, 0.13) !important;
 }
 
 .el-button {
     background-color: var(--heo-fontcolor) !important;
     border: 0 solid var(--heo-main) !important;
     color: var(--heo-background) !important;
-    border-radius: 8px !important
+    border-radius: 8px !important;
 }
 
 .el-button:hover {
     background: var(--heo-main) !important;
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 .el-button.tk-preview {
-    display: none !important
+    display: none !important;
 }
 
 #twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > a {
-    display: none !important
+    display: none !important;
 }
 
 #twikoo {
-    z-index: 102
+    z-index: 102;
 }
 
 .twikoo-info {
-    color: var(--heo-secondtext)
+    color: var(--heo-secondtext);
 }
 
 .tk-action-link {
-    color: var(--heo-lighttext) !important
+    color: var(--heo-lighttext) !important;
 }
 
 .tk-action-icon svg {
-    fill: var(--heo-lighttext) !important
+    fill: var(--heo-lighttext) !important;
 }
 
 button.el-button.tk-cancel.el-button--default.el-button--small {
     background: var(--heo-secondbg) !important;
     border-radius: 8px !important;
-    color: var(--heo-fontcolor) !important
+    color: var(--heo-fontcolor) !important;
 }
 
 .tk-submit-action-icon.__markdown {
-    display: none
+    display: none;
 }
 
 .tk-comments .el-button--primary {
-    border-color: var(--heo-fontcolor) !important;
-    color: var(--heo-card-bg) !important;
-    border-radius: 4px !important;
     box-shadow: var(--heo-shadow-black);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     width: 5rem;
     position: absolute;
     top: -53px;
-    right: 0;
-    margin-left: .5rem !important;
-    height: 32px
+    right: 0px;
+    height: 32px;
+    border-color: var(--heo-fontcolor) !important;
+    color: var(--heo-card-bg) !important;
+    border-radius: 4px !important;
+    margin-left: 0.5rem !important;
 }
 
-.tk-comments .el-button--primary.is-disabled, .tk-comments .el-button--primary.is-disabled:active, .tk-comments .el-button--primary.is-disabled:focus, .tk-comments .el-button--primary.is-disabled:hover {
-    opacity: .4
+.tk-comments .el-button--primary.is-disabled,
+.tk-comments .el-button--primary.is-disabled:active,
+.tk-comments .el-button--primary.is-disabled:focus,
+.tk-comments .el-button--primary.is-disabled:hover {
+    opacity: 0.4;
 }
 
 .tk-row-actions-start {
     position: absolute;
     top: -100px;
-    left: 17px
+    left: 17px;
 }
 
 @media screen and (max-width: 768px) {
     .tk-submit .el-button--primary {
         width: 5rem;
         height: 132px;
-        top: -161px
+        top: -161px;
     }
 
     .tk-row-actions-start {
-        top: -210px
+        top: -210px;
     }
 }
 
 .tk-comments-title {
     position: absolute;
-    bottom: 0;
-    left: 0
+    bottom: 0px;
+    left: 0px;
 }
 
 .tk-extras {
-    margin-top: .5rem;
-    padding-bottom: .5rem
+    margin-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
 
 .tk-icon.__comments:first-child {
-    display: none
+    display: none;
 }
 
 .tk-icon.__comments {
-    margin-left: 0 !important
+    margin-left: 0px !important;
 }
 
 .tk-row.actions {
-    margin-bottom: .5rem !important;
-    margin-left: 0 !important;
-    margin-top: .5rem !important;
-    justify-content: space-around !important
+    margin-bottom: 0.5rem !important;
+    margin-left: 0px !important;
+    margin-top: 0.5rem !important;
+    justify-content: space-around !important;
 }
 
 .tk-meta-input {
+    margin-top: 0.8rem;
+    width: calc(100% - 5.5rem);
     position: relative !important;
-    margin-top: .8rem;
-    width: calc(100% - 5.5rem)
 }
 
 #post-comment blockquote {
     background: var(--heo-secondbg);
     border: var(--style-border);
     box-shadow: none;
-    margin: 0;
-    margin-bottom: .5rem;
-    font-size: .6rem;
+    margin: 0px 0px 0.5rem;
+    font-size: 0.6rem;
     color: var(--heo-secondtext);
-    border-radius: 8px
+    border-radius: 8px;
 }
 
 .tk-content .tk-owo-emotion {
     width: 3em;
-    margin: 0 2px 0 2px
+    margin: 0px 2px;
 }
 
 .OwO .OwO-body .OwO-bar .OwO-packages li {
     line-height: 45px !important;
-    font-size: 28px !important
+    font-size: 28px !important;
 }
 
 .OwO .OwO-body {
     z-index: 102;
-    width: 500px
+    width: 500px;
 }
 
 #owo-big {
@@ -11315,34 +11291,36 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     border-radius: 10px;
     z-index: 9999;
     display: none;
-    transform: translate(0, -105%);
+    transform: translate(0px, -105%);
     overflow: hidden;
-    animation: owoIn .3s cubic-bezier(.42, 0, .3, 1.11);
-    padding: 1rem
+    animation: 0.3s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running owoIn;
+    padding: 1rem;
 }
 
 #owo-big img {
-    width: 100%
+    width: 100%;
 }
 
-.tk-owo-emotion, .twikoo .OwO-item img {
-    pointer-events: none
+.tk-owo-emotion,
+.twikoo .OwO-item img {
+    pointer-events: none;
 }
 
 @keyframes owoIn {
     0% {
-        transform: translate(0, -95%);
-        opacity: 0
+        transform: translate(0px, -95%);
+        opacity: 0;
     }
+
     100% {
-        transform: translate(0, -105%);
-        opacity: 1
+        transform: translate(0px, -105%);
+        opacity: 1;
     }
 }
 
 @media screen and (max-width: 768px) {
     .OwO .OwO-body {
-        width: 300px
+        width: 300px;
     }
 }
 
@@ -11351,140 +11329,139 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     border: var(--style-border-always);
     padding: 1px 5px 1px 2px;
     border-radius: 8px;
+    font-size: 0.5rem;
     margin-right: 4px !important;
     color: var(--heo-secondtext) !important;
     display: inline !important;
     margin-top: 6px !important;
-    font-size: .5rem
 }
 
 .tk-extra .tk-icon {
-    display: none
+    display: none;
 }
 
 .tk-expand {
-    background: var(--heo-card-bg) !important;
-    color: var(--heo-fontcolor) !important;
     border: var(--style-border-always);
     box-shadow: var(--heo-shadow-border);
-    border-radius: 12px
+    border-radius: 12px;
+    background: var(--heo-card-bg) !important;
+    color: var(--heo-fontcolor) !important;
 }
 
 .tk-expand:hover {
     background: var(--heo-theme) !important;
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 .tk-time {
+    font-size: 0.8rem;
+    margin-left: 0.5rem;
     color: var(--heo-secondtext) !important;
-    font-size: .8rem;
-    margin-left: .5rem
 }
 
 .tk-comments-container > .tk-comment {
-    margin-top: 0 !important;
-    margin-bottom: .5rem !important;
     background: var(--heo-card-bg);
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     border-radius: 12px;
-    padding: 0;
-    padding-top: .5rem;
-    border: none;
-    border-top: var(--style-border-dashed)
+    padding: 0.5rem 0px 0px;
+    border-right: none;
+    border-bottom: none;
+    border-left: none;
+    border-image: initial;
+    border-top: var(--style-border-dashed);
+    margin-top: 0px !important;
+    margin-bottom: 0.5rem !important;
 }
 
 #page .tk-comments-container > .tk-comment {
-    padding: 1rem;
-    padding-bottom: 1.5rem;
-    border: var(--style-border);
+    padding: 1rem 1rem 1.5rem;
     border-top: var(--style-border);
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 @media screen and (max-width: 768px) {
     .tk-comments-container > .tk-comment {
         padding: 1rem;
         border: var(--style-border-always);
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 
     .tk-icon.__comments {
-        left: .5rem
+        left: 0.5rem;
     }
 }
 
 .tk-icon {
-    position: absolute
+    position: absolute;
 }
 
 #post-comment .comment-head {
-    font-size: .8em !important;
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
+    font-size: 0.8em !important;
 }
 
 .tk-comments-no {
-    display: none !important
+    display: none !important;
 }
 
 .tk-comments-container {
-    min-height: 0 !important;
-    margin-top: .5rem
+    margin-top: 0.5rem;
+    min-height: 0px !important;
 }
 
 .tk-replies > .tk-comment {
     background: var(--heo-card-bg);
     border-top: var(--style-border-dashed);
     border-radius: 12px;
-    padding: 0;
-    transition: .3s;
-    padding-top: 1rem;
-    margin-top: 0
+    padding: 1rem 0px 0px;
+    transition: all 0.3s ease 0s;
+    margin-top: 0px;
 }
 
 .tk-content p {
-    margin: 0 !important
+    margin: 0px !important;
 }
 
 .tk-replies .tk-content span:first-child {
-    font-size: .5rem;
-    color: var(--heo-secondtext)
+    font-size: 0.5rem;
+    color: var(--heo-secondtext);
 }
 
 .img-alt {
     font-size: 12px;
-    margin: 0;
-    color: var(--heo-secondtext)
+    margin: 0px;
+    color: var(--heo-secondtext);
 }
 
 .long-img .img-alt {
-    display: none
+    display: none;
 }
 
 .long-img img {
-    border-radius: 0 !important;
-    margin: 0 !important
+    border-radius: 0px !important;
+    margin: 0px !important;
 }
 
 .relatedPosts > .relatedPosts-list > div:hover .cover {
     transform: scale(1);
-    opacity: 0
+    opacity: 0;
 }
 
 @media screen and (min-width: 768px) {
     #pagination.pagination-post {
         border-radius: 12px;
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 
     .relatedPosts {
-        margin-top: 1rem
+        margin-top: 1rem;
     }
 }
 
 @media screen and (min-width: 1300px) {
     #pagination.pagination-post {
-        border-radius: 0;
-        margin-top: 0
+        border-radius: 0px;
+        margin-top: 0px;
     }
 }
 
@@ -11493,41 +11470,41 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     width: 100%;
     justify-content: space-between;
     margin-top: 2rem;
-    flex-wrap: wrap
+    flex-wrap: wrap;
 }
 
 .post-reward {
-    margin-top: 0;
+    margin-top: 0px;
     display: flex;
-    justify-content: center
+    justify-content: center;
 }
 
 .post-reward:hover > .reward-main {
-    display: none
+    display: none;
 }
 
 .post-reward .reward-main {
-    z-index: 1003
+    z-index: 1003;
 }
 
 @media screen and (min-width: 768px) {
     .post-reward:hover > .reward-main {
+        justify-content: left;
         display: flex !important;
-        justify-content: left
     }
 }
 
 @media screen and (max-width: 768px) {
     .post-reward .reward-main {
-        justify-content: center !important;
         position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
         z-index: 102;
         width: 100%;
         margin: auto;
-        padding: 0
+        padding: 0px;
+        justify-content: center !important;
     }
 
     .post-reward .reward-main .reward-all {
@@ -11535,38 +11512,38 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
-        padding: 30px 0 60px 0;
-        border-radius: 12px 12px 0 0
+        padding: 30px 0px 60px;
+        border-radius: 12px 12px 0px 0px;
     }
 
     #post .tag_share .post-meta__tags {
-        margin: 0 .5rem 0 0
+        margin: 0px 0.5rem 0px 0px;
     }
 
     a.reward-main-btn {
-        margin: 4px auto
+        margin: 4px auto;
     }
 
     .tk-meta-input .el-input .el-input-group__prepend {
-        padding: 0 .3rem !important
+        padding: 0px 0.3rem !important;
     }
 
     .tk-meta-input {
         display: flex;
         flex-direction: column;
-        top: 0;
-        position: inherit !important
+        top: 0px;
+        position: inherit !important;
     }
 
     .tk-meta-input .el-input {
-        margin-left: 0 !important;
+        margin-bottom: 8px;
+        margin-left: 0px !important;
         width: 100% !important;
-        margin-bottom: 8px
     }
 
     .tk-icon {
         position: absolute;
-        right: 0
+        right: 0px;
     }
 }
 
@@ -11575,21 +11552,20 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     display: flex;
     text-overflow: ellipsis;
     flex-wrap: wrap;
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 .post-tools-right {
-    overflow: scroll;
-    overflow-x: overlay;
-    padding-right: 0;
+    overflow: overlay scroll;
+    padding-right: 0px;
     display: flex;
     align-items: center;
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 @media screen and (max-width: 768px) {
     .post-tools-left > div {
-        margin: 8px
+        margin: 8px;
     }
 
     .post-tools-left {
@@ -11598,39 +11574,39 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
         text-overflow: ellipsis;
         margin-top: 1rem;
         justify-content: center;
-        width: 100%
+        width: 100%;
     }
 
     .post-tools-right {
         margin-top: 1rem;
         width: 100%;
-        justify-content: center
+        justify-content: center;
     }
 }
 
-.post-reward .reward-main .reward-all:after {
-    display: none
+.post-reward .reward-main .reward-all::after {
+    display: none;
 }
 
 .reward-group {
     display: flex;
-    margin-top: .5rem
+    margin-top: 0.5rem;
 }
 
 .post-reward .reward-main .reward-all .reward-item:first-child img {
-    border-color: var(--heo-green)
+    border-color: var(--heo-green);
 }
 
 .post-reward .reward-main .reward-all .reward-item:last-child img {
-    border-color: var(--heo-blue)
+    border-color: var(--heo-blue);
 }
 
 .share-link {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     display: flex;
     justify-content: center;
     position: relative;
-    text-align: center
+    text-align: center;
 }
 
 .share-button {
@@ -11638,39 +11614,39 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     color: var(--heo-fontcolor);
     border-radius: 8px;
     cursor: pointer;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     width: 56px;
-    height: 40px
+    height: 40px;
 }
 
 .share-button i {
-    line-height: 40px
+    line-height: 40px;
 }
 
 .share-button i.fab {
-    line-height: 42px
+    line-height: 42px;
 }
 
 @media screen and (min-width: 1300px) {
     .share-button {
         background: var(--heo-card-bg);
-        border: var(--style-border)
+        border: var(--style-border);
     }
 
     .share-button:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     .share-button:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 
     .share-button i {
-        line-height: 38px
+        line-height: 38px;
     }
 
     .share-button i.fab {
-        line-height: 40px
+        line-height: 40px;
     }
 }
 
@@ -11678,21 +11654,21 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     background: var(--heo-theme);
     border-color: var(--heo-theme);
     color: var(--heo-white);
-    transition: .3s;
-    box-shadow: var(--heo-shadow-blue)
+    transition: all 0.3s ease 0s;
+    box-shadow: var(--heo-shadow-blue);
 }
 
 .share-link.weibo:hover .share-button {
     background: var(--heo-red);
     border-color: var(--heo-red);
-    box-shadow: var(--heo-shadow-red)
+    box-shadow: var(--heo-shadow-red);
 }
 
 .share-link.mobile:hover .share-button {
     background: var(--heo-green);
     border-color: var(--heo-green);
     box-shadow: var(--heo-shadow-green);
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .share-main {
@@ -11700,16 +11676,16 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     bottom: 40px;
     z-index: 100;
     display: none;
-    padding-bottom: 15px
+    padding-bottom: 15px;
 }
 
 .share-main-all {
     padding: 12px;
     border-radius: 12px;
     background: var(--heo-background);
-    animation: donate_effcet .3s .1s ease both;
+    animation: 0.3s ease 0.1s 1 normal both running donate_effcet;
     flex-direction: column;
-    border: var(--style-border-always)
+    border: var(--style-border-always);
 }
 
 #qrcode {
@@ -11721,133 +11697,96 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     padding: 8px;
     border-radius: 8px;
     margin-bottom: 8px;
-    border: var(--style-border-always)
+    border: var(--style-border-always);
 }
 
 .share-link:hover .share-main {
-    display: flex
+    display: flex;
 }
 
 .share-qrcode {
     display: flex;
-    justify-content: center
+    justify-content: center;
 }
 
 @media screen and (max-width: 768px) {
     .share-link.mobile {
-        display: none
+        display: none;
     }
 
     .share-button {
         background: var(--heo-card-bg);
         border: var(--style-border-always);
-        box-shadow: var(--heo-shadow-border)
+        box-shadow: var(--heo-shadow-border);
     }
 }
 
-/*#article-container figure.highlight {*/
-/*    border-radius: 8px 8px 4px 4px*/
-/*}*/
-
-/*#article-container figure.highlight, #article-container pre {*/
-/*    color: #f8f8f2;*/
-/*    background: #696969*/
-/*}*/
-
-/*#article-container figure.highlight .highlight-tools {*/
-/*    background: #3f3f3f;*/
-/*    color: var(--heo-fontcolor)*/
-/*}*/
-
-/*#article-container figure.highlight .gutter pre {*/
-/*    color: #d3d3d3 !important;*/
-/*    background: grey;*/
-/*    border-right: var(--style-border-always)*/
-/*}*/
-
-/*#article-container figure.highlight figcaption a {*/
-/*    color: #a9a9a9 !important*/
-/*}*/
-
-/*#article-container .highlight:not(.js-file-line-container), #article-container pre {*/
-/*    background-color: var(--heo-card-bg) !important;*/
-/*    color: var(--heo-fontcolor);*/
-/*    box-shadow: var(--heo-shadow-border);*/
-/*    border: var(--style-border-always)*/
-/*}*/
-
-/*#article-container figure.highlight pre span::selection {*/
-/*    background: var(--heo-main) !important;*/
-/*    color: var(--heo-white) !important*/
-/*}*/
-
 .OwO .OwO-body {
+    overflow: hidden;
+    backdrop-filter: saturate(180%) blur(10px);
     border: var(--style-border-always) !important;
     border-radius: 8px !important;
-    overflow: hidden;
     background-color: var(--heo-maskbg) !important;
-    backdrop-filter: saturate(180%) blur(10px);
-    -webkit-backdrop-filter: blur(10px)
 }
 
 .OwO .OwO-body .OwO-bar {
-    border-top: none !important
+    border-top: none !important;
 }
 
 .OwO .OwO-body .OwO-items .OwO-item:hover {
+    border-radius: 8px;
     box-shadow: var(--heo-shadow-lightblack) !important;
-    border-radius: 8px
 }
 
 #twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span {
     line-height: 48px;
-    font-size: 28px
+    font-size: 28px;
 }
 
 .OwO .OwO-body .OwO-bar .OwO-packages li {
-    margin-right: 0 !important;
     width: 50px;
     height: 48px;
-    transition: .3s
+    transition: all 0.3s ease 0s;
+    margin-right: 0px !important;
 }
 
 .OwO .OwO-body .OwO-bar .OwO-packages li:hover {
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 .OwO-packages {
     background: var(--heo-background);
-    padding-left: 8px !important
+    padding-left: 8px !important;
 }
 
 .OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
-    background: var(--heo-secondbg) !important
+    background: var(--heo-secondbg) !important;
 }
 
 .OwO .OwO-body .OwO-items-show {
+    min-height: 197px;
     margin: 12px 8px !important;
-    min-height: 197px
 }
 
 #page .category-lists .category-title {
-    display: none
+    display: none;
 }
 
 .article-sort-item-title {
     line-height: 1.3;
-    -webkit-line-clamp: 1
+    -webkit-line-clamp: 1;
 }
 
 @media screen and (max-width: 768px) {
     .article-sort-item-title {
-        -webkit-line-clamp: 2
+        -webkit-line-clamp: 2;
     }
 }
 
 #page {
-    background: 0 0;
+    background: 0px 0px;
     border: none;
-    padding: 0
+    padding: 0px;
 }
 
 .article-sort .article-sort-item .article-sort-item-img {
@@ -11855,17 +11794,17 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     min-width: 151px;
     min-height: 80px;
     background: var(--heo-secondbg);
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000)
+    -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
 }
 
 @media screen and (max-width: 768px) {
     .article-sort .article-sort-item .article-sort-item-img {
-        min-width: 80px
+        min-width: 80px;
     }
 }
 
 #post .tag_share .post-meta__tag-list {
-    display: flex
+    display: flex;
 }
 
 @media screen and (max-width: 768px) {
@@ -11873,49 +11812,50 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
         display: flex;
         overflow: scroll;
         position: absolute;
-        left: 0;
-        padding: 0 20px 0 20px;
-        width: 100%
+        left: 0px;
+        padding: 0px 20px;
+        width: 100%;
     }
 }
 
 #page .tag-cloud-list a {
+    padding: 0.2em 0.5em;
+    background: var(--heo-secondbg);
+    margin: 0.5em;
+    border-radius: 12px;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    border: var(--style-border-always);
+    box-shadow: var(--heo-shadow-border);
     color: var(--heo-fontcolor) !important;
     font-size: 1.4em !important;
-    padding: .2em .5em;
-    background: var(--heo-secondbg);
-    margin: .5em .5em;
-    border-radius: 12px;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d;
-    border: var(--style-border-always);
-    box-shadow: var(--heo-shadow-border)
 }
 
 #page .tag-cloud-list a:hover {
-    background: var(--heo-blue) !important;
     box-shadow: var(--heo-shadow-blue);
+    border: var(--style-border-hover);
+    background: var(--heo-blue) !important;
     color: var(--heo-white) !important;
-    border: var(--style-border-hover)
 }
 
 span.tagsPageCount {
     background: var(--heo-card-bg);
-    padding: 4px 4px;
+    padding: 4px;
     border-radius: 8px;
     color: var(--heo-secondtext);
     line-height: 1;
     text-align: center;
     min-width: 35px;
     display: inline-block;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #page .tag-cloud-list a:hover span.tagsPageCount {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
-#post .tag_share .post-meta__tags span.tagsPageCount, #tag-page-tags .tagsPageCount {
+#post .tag_share .post-meta__tags span.tagsPageCount,
+#tag-page-tags .tagsPageCount {
     padding: 2px 4px;
     background: var(--heo-secondbg);
     border: var(--style-border-always);
@@ -11923,56 +11863,50 @@ span.tagsPageCount {
     display: inline-block;
     border-radius: 4px;
     text-align: center;
-    font-size: .6rem;
+    font-size: 0.6rem;
     color: var(--heo-fontcolor);
-    margin-left: 4px
+    margin-left: 4px;
 }
 
-#post .tag_share .post-meta__tags:hover span.tagsPageCount, #tag #tag-page-tags a:hover .tagsPageCount {
+#post .tag_share .post-meta__tags:hover span.tagsPageCount,
+#tag #tag-page-tags a:hover .tagsPageCount {
     background: var(--heo-card-bg);
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 #tag #tag-page-tags a.select .tagsPageCount {
     background: var(--heo-card-bg);
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 span.tags-punctuation {
-    opacity: .4
+    opacity: 0.4;
 }
 
 #article-container h1 {
-    padding-left: 0
+    padding-left: 0px;
 }
 
-#article-container h1:before {
-    display: none
+#article-container h1::before {
+    display: none;
 }
 
 #article-container h1:hover {
-    padding-left: 0
-}
-
-#article-container > div > figure > figcaption > p {
-    margin: 0
+    padding-left: 0px;
 }
 
 #page .category-lists ul li::before {
-    display: none
+    display: none;
 }
 
 #page .category-lists ul li {
-    margin: 0;
-    margin-right: 8px;
-    margin-bottom: 8px
+    margin: 0px 8px 8px 0px;
 }
 
 #page .category-lists ul {
     display: flex;
-    padding: 0;
-    flex-wrap: wrap;
-    flex-direction: row
+    padding: 0px;
+    flex-flow: row wrap;
 }
 
 #page .category-lists ul li {
@@ -11980,130 +11914,120 @@ span.tags-punctuation {
     width: 200px;
     border-radius: 12px;
     background: var(--card-bg);
-    border: var(--style-border-always)
-}
-
-figure.gallery-group {
-    border-radius: 12px
-}
-
-figure.gallery-group:hover .gallery-group-name::after {
-    display: none
+    border: var(--style-border-always);
 }
 
 .tag-cloud-title {
-    display: none
+    display: none;
 }
 
 .tk-replies .tk-content {
-    margin-top: 0 !important
+    margin-top: 0px !important;
 }
 
 #tag #tag-page-tags {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -.75rem;
-    margin-bottom: .5rem
+    flex-flow: row wrap;
+    margin: 0px -0.75rem 0.5rem;
 }
 
 #tag #tag-page-tags a {
-    padding: .1rem .5rem;
-    margin: .25rem .25rem;
+    padding: 0.1rem 0.5rem;
+    margin: 0.25rem;
     line-height: 1.6;
     border-radius: 8px;
-    color: var(--heo-fontcolor) !important;
     border: var(--style-border-always);
     display: flex;
-    align-items: center
+    align-items: center;
+    color: var(--heo-fontcolor) !important;
 }
 
 #tag #tag-page-tags a.select {
-    color: var(--heo-white) !important;
     background: var(--heo-theme);
-    box-shadow: var(--heo-shadow-theme)
+    box-shadow: var(--heo-shadow-theme);
+    color: var(--heo-white) !important;
 }
 
 #tag #tag-page-tags a:hover {
-    color: var(--heo-white) !important;
     background: var(--heo-theme);
-    box-shadow: var(--heo-shadow-theme)
+    box-shadow: var(--heo-shadow-theme);
+    color: var(--heo-white) !important;
 }
 
-.article-sort-item:before {
-    display: none
+.article-sort-item::before {
+    display: none;
 }
 
-.article-sort-title:before {
-    display: none
+.article-sort-title::before {
+    display: none;
 }
 
-.article-sort-title:after {
-    display: none
+.article-sort-title::after {
+    display: none;
 }
 
 .article-sort {
-    border: none
+    border: none;
 }
 
 .article-sort {
-    margin-left: 0;
-    padding-left: 0
+    margin-left: 0px;
+    padding-left: 0px;
 }
 
 .article-sort-title {
-    margin-left: 0;
-    padding-bottom: 0;
-    padding-left: 0
+    margin-left: 0px;
+    padding-bottom: 0px;
+    padding-left: 0px;
 }
 
 .article-sort-item {
-    margin: 0 0 1rem 0;
+    margin: 0px 0px 1rem;
     overflow: hidden;
-    border-radius: 12px
+    border-radius: 12px;
 }
 
 @media screen and (max-width: 768px) {
     .article-sort-item-info a {
-        white-space: inherit !important
+        white-space: inherit !important;
     }
 }
 
 .article-sort-item.year {
-    font-size: .8rem;
+    font-size: 0.8rem;
     color: var(--heo-secondtext);
-    margin-bottom: .2rem
+    margin-bottom: 0.2rem;
 }
 
 .article-sort-item-img img:hover {
-    transform: scale(1)
+    transform: scale(1);
 }
 
 .article-sort-title {
     font-weight: 700;
-    font-size: 2em
+    font-size: 2em;
 }
 
 .article-sort-item-info {
-    padding: 0 .8rem;
+    padding: 0px 0.8rem;
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .article-sort-item-time {
     order: 1;
     margin-top: 4px;
-    color: var(--heo-secondtext)
+    color: var(--heo-secondtext);
 }
 
 .article-sort-item-title {
     order: 0;
-    font-weight: 700
+    font-weight: 700;
 }
 
 .article-sort-item-title:hover {
-    transform: translateX(0);
-    color: var(--heo-hovertext)
+    transform: translateX(0px);
+    color: var(--heo-hovertext);
 }
 
 #random-post {
@@ -12113,472 +12037,471 @@ figure.gallery-group:hover .gallery-group-name::after {
     box-shadow: var(--heo-shadow-border);
     padding: 20px 30px;
     border-radius: 12px;
-    margin-top: 8px
+    margin-top: 8px;
+}
+
+.random-friends-post {
+    text-decoration: none;
+    border-bottom: 2px solid var(--heo-lighttext);
+    color: var(--heo-fontcolor);
+    font-weight: 700;
+    padding: 0px 4px;
+}
+
+.random-friends-post:hover {
+    text-decoration: none;
+    border-bottom: 2px solid var(--heo-none);
+    color: var(--heo-white);
+    background: var(--heo-main);
+    border-radius: 4px;
+    box-shadow: var(--heo-shadow-main);
 }
 
 .random-post-start {
-    transition-duration: .3s
+    transition-duration: 0.3s;
 }
 
 .random-post-start:hover {
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 .flink#article-container .flink-list {
-    padding: 0;
-    margin: 1rem -6px 0 -6px;
-    overflow-x: hidden
+    padding: 0px;
+    margin: 1rem -6px 0px;
+    overflow-x: hidden;
 }
 
 .flink#article-container .flink-desc {
-    margin: 0
+    margin: 0px;
 }
 
 .flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
     white-space: normal;
-    padding: 5px 10px 16px 0;
+    padding: 5px 10px 16px 0px;
     color: var(--heo-fontcolor);
     text-align: left;
     height: 40px;
     text-overflow: ellipsis;
-    opacity: .7;
+    opacity: 0.7;
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2
+    -webkit-line-clamp: 2;
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .flink-list-item .flink-item-info {
     max-width: 136px;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .flink-list-item:hover .flink-item-info {
-    max-width: 100%
+    max-width: 100%;
 }
 
 .flink#article-container .flink-list > .flink-list-item a .flink-item-name {
     text-align: left;
     font-size: 19px;
-    color: var(--heo-fontcolor)
+    color: var(--heo-fontcolor);
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-name {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .flink#article-container .flink-list > .flink-list-item a {
     display: flex;
-    border: none
+    border: none;
 }
 
 .flink#article-container .flink-list > .flink-list-item a:hover {
-    background: 0 0
+    background: 0px 0px;
 }
 
 .flink#article-container .flink-list > .flink-list-item a img {
     border-radius: 32px;
     margin: 15px 20px 15px 15px;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     background: var(--heo-background);
     min-width: 60px;
-    min-height: 60px
+    min-height: 60px;
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a img {
-    transition: .6s;
-    width: 0;
-    height: 0;
+    transition: all 0.6s ease 0s;
+    width: 0px;
+    height: 0px;
     opacity: 0;
-    margin: .5rem;
-    min-width: 0;
-    min-height: 0
+    margin: 0.5rem;
+    min-width: 0px;
+    min-height: 0px;
 }
 
 .flink#article-container .flink-list > .flink-list-item a span {
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
     overflow: inherit;
-    width: 100%
+    width: 100%;
 }
 
 .flink#article-container .flink-list > .flink-list-item {
-    margin: 6px 6px;
-    transition: .3s;
+    margin: 6px;
+    transition: all 0.3s ease-in-out 0s;
     border-radius: 12px;
-    transition-timing-function: ease-in-out;
     position: relative;
     width: calc(20% - 12px);
     border: var(--style-border);
     box-shadow: var(--heo-shadow-border);
-    background: var(--heo-card-bg)
+    background: var(--heo-card-bg);
 }
 
 .flink#article-container .flink-list > .flink-list-item:hover {
     transform: scale(1);
     background: var(--heo-theme);
     border: var(--style-border-hover);
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 @media screen and (min-width: 1300px) {
     .flink#article-container .flink-list > .flink-list-item:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     .flink#article-container .flink-list > .flink-list-item:active {
-        transform: scale(.97)
+        transform: scale(0.97);
     }
 }
 
 .gallery-group figcaption p {
-    line-height: 1.5 !important
+    line-height: 1.5 !important;
 }
 
 .flink#article-container .site-card .info .title {
     color: var(--heo-fontcolor);
-    text-align: left
+    text-align: left;
 }
 
 .flink#article-container .site-card:hover .info .title {
     color: var(--heo-white);
-    box-shadow: var(--heo-shadow-blue)
+    box-shadow: var(--heo-shadow-blue);
 }
 
 .flink#article-container .site-card:hover .info {
-    height: 120px
+    height: 120px;
 }
 
 .flink#article-container .site-card .site-card-text {
     display: flex;
     flex-direction: column;
-    align-items: flex-start
+    align-items: flex-start;
 }
 
 .flink#article-container .site-card .info .desc {
-    font-size: .7rem;
+    font-size: 0.7rem;
     color: var(--heo-fontcolor);
-    opacity: .7;
-    transition: .3s;
-    text-align: left
+    opacity: 0.7;
+    transition: all 0.3s ease 0s;
+    text-align: left;
 }
 
 .flink#article-container .site-card:hover .info .desc {
-    -webkit-line-clamp: 4
+    -webkit-line-clamp: 4;
 }
 
 .flink#article-container .site-card:hover .info .desc {
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     color: var(--heo-white);
-    width: 100%
+    width: 100%;
 }
 
 .flink#article-container .site-card:hover .info {
-    background: var(--heo-theme)
+    background: var(--heo-theme);
 }
 
 .flink#article-container .site-card {
     border: var(--style-border);
     border-radius: 12px;
-    transition: .3s;
-    transition-timing-function: ease-in-out;
+    transition: all 0.3s ease-in-out 0s;
     overflow: hidden;
     height: 200px;
     position: relative;
-    width: calc(100% / 7 - 16px);
+    width: calc(14.2857% - 16px);
     background: var(--heo-card-bg);
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 @media screen and (min-width: 1300px) {
     .flink#article-container .site-card:hover {
-        transform: scale(1.03)
+        transform: scale(1.03);
     }
 
     .flink#article-container .site-card:active {
-        transition: .95
     }
 }
 
 .site-card-tag {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     padding: 4px 8px;
     background-color: var(--heo-main);
     box-shadow: var(--heo-shadow-main);
     color: var(--heo-white);
     z-index: 1;
-    border-radius: 12px 0 12px 0;
-    transition: .3s;
-    font-size: .6rem
+    border-radius: 12px 0px;
+    transition: all 0.3s ease 0s;
+    font-size: 0.6rem;
 }
 
-.site-card-tag.vip { /*! Edit and share this gradient: https://html5kit.com/gradient-editor/?preset=d48f16,100;e5b085,0 */
-    background: -moz-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: -webkit-linear-gradient(38deg, #e5b085 0, #d48f16 100%);
-    background: linear-gradient(38deg, #e5b085 0, #d48f16 100%);
+.site-card-tag.vip {
+    background: linear-gradient(38deg, rgb(229, 176, 133) 0px, rgb(212, 143, 22) 100%);
     overflow: hidden;
-    box-shadow: var(--heo-shadow-yellow)
+    box-shadow: var(--heo-shadow-yellow);
 }
 
 .light {
     cursor: pointer;
     position: absolute;
-    top: 0;
+    top: 0px;
     width: 100px;
     height: 50px;
-    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-    -webkit-animation: light_tag 4s both infinite;
-    -moz-animation: light_tag 4s both infinite;
-    -ms-animation: light_tag 4s both infinite;
-    animation: light_tag 4s both infinite
+    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+    animation: 4s ease 0s infinite normal both running light_tag;
 }
 
 @keyframes light_tag {
     0% {
-        transform: skewx(0);
-        -o-transform: skewx(0);
-        -moz-transform: skewx(0);
-        -webkit-transform: skewx(0);
-        left: -150px
+        transform: skewX(0deg);
+        left: -150px;
     }
+
     99% {
-        transform: skewx(-25deg);
-        -o-transform: skewx(-25deg);
-        -moz-transform: skewx(-25deg);
-        -webkit-transform: skewx(-25deg);
-        left: 50px
+        transform: skewX(-25deg);
+        left: 50px;
     }
 }
 
 .site-card-tag.speed {
     background: var(--heo-green);
-    box-shadow: var(--heo-shadow-green)
+    box-shadow: var(--heo-shadow-green);
 }
 
 .flink#article-container .site-card:hover .site-card-tag {
-    left: -50px
+    left: -50px;
 }
 
 .flink-list-item:hover .site-card-tag {
-    left: -50px
+    left: -50px;
 }
 
 .flink#article-container .site-card .info {
     display: flex;
     border: none;
-    padding: .5rem;
+    padding: 0.5rem;
     width: 100%;
     height: 90px;
-    margin: 0;
-    border-radius: 0 0 12px 12px
+    margin: 0px;
+    border-radius: 0px 0px 12px 12px;
 }
 
 .flink#article-container .site-card .img img {
-    border-radius: 12px 12px 0 0;
+    border-radius: 12px 12px 0px 0px;
     transform: scale(1.03);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 @media screen and (min-width: 769px) {
     .flink#article-container .site-card:hover .img img {
         transform: scale(1.1);
-        filter: brightness(.3)
+        filter: brightness(0.3);
     }
 
     .flink#article-container .site-card:hover .img {
-        height: 80px
+        height: 80px;
     }
 }
 
 .flink#article-container .site-card .img {
-    -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000);
-    border-radius: 12px 12px 0 0;
+    -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0));
+    border-radius: 12px 12px 0px 0px;
     height: 120px;
     width: 100%;
     display: flex;
     border: none;
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 .flink#article-container .site-card .info img {
     border-radius: 32px;
-    transition: .3s !important;
-    margin: 2px 8px 0 0;
+    margin: 2px 8px 0px 0px;
     width: 20px;
     height: 20px;
     min-width: 20px;
     min-height: 20px;
-    background: var(--heo-secondbg)
+    background: var(--heo-secondbg);
+    transition: all 0.3s ease 0s !important;
 }
 
 .flink#article-container .site-card-group {
-    padding: 20px 0
+    padding: 20px 0px;
 }
 
 .flink#article-container .site-card:hover .info img {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
     opacity: 0;
-    min-width: 0;
-    min-height: 0
+    min-width: 0px;
+    min-height: 0px;
 }
 
 .flink#article-container .site-card:hover {
     border: var(--style-border-hover);
-    box-shadow: var(--heo-shadow-main)
+    box-shadow: var(--heo-shadow-main);
 }
 
 .article-sort-item-info a {
     margin-right: auto;
     overflow: hidden;
-    text-overflow: ellipsis
+    text-overflow: ellipsis;
 }
 
 @media screen and (max-width: 768px) {
     #letlink {
         flex-direction: column !important;
-        text-align: center !important
+        text-align: center !important;
     }
 
     #letlogo {
-        display: none !important
+        display: none !important;
     }
 
     #footer-wrap {
-        margin-top: 1rem !important
+        margin-top: 1rem !important;
     }
 }
 
 .footer-banner-right {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap
+    flex-flow: row wrap;
 }
 
 #footer-wrap {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    padding: 20px 50px 0 50px;
-    text-align: left !important;
+    padding: 20px 50px 0px;
     max-width: 1200px;
-    margin: 0 auto
+    margin: 0px auto;
+    text-align: left !important;
 }
 
 #footer-wrap h1 {
     font-size: 1.5rem;
-    margin: 0
+    margin: 0px;
 }
 
 #footer-wrap h3 {
-    padding: 0 12px
+    padding: 0px 12px;
 }
 
 #footer-wrap p {
-    margin: 0 0 0 .2rem;
-    font-size: .8rem;
-    opacity: .8
+    margin: 0px 0px 0px 0.2rem;
+    font-size: 0.8rem;
+    opacity: 0.8;
 }
 
 #footer-wrap i {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     width: 22px;
     font-size: 18px;
-    display: inline-block
+    display: inline-block;
 }
 
 #footer-wrap #letlogo {
     display: flex;
     flex-direction: column;
-    margin-right: 60px;
     align-self: center;
-    margin: auto 0;
-    max-width: 200px
+    margin: auto 0px;
+    max-width: 200px;
 }
 
 #footer-wrap #letlink .link_group {
     display: flex;
     flex-direction: column;
     margin-right: 20px;
-    min-width: 180px
+    min-width: 180px;
 }
 
 #footer-wrap #letlink {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    margin: 0 0 1rem 0
+    margin: 0px 0px 1rem;
 }
 
 #weblogo i {
     font-size: 2rem;
     line-height: 2rem;
-    letter-spacing: -10px
+    letter-spacing: -10px;
 }
 
-#footer:before {
+#footer::before {
+    z-index: -1;
     position: absolute !important;
     width: 100% !important;
     height: 100% !important;
-    content: '' !important;
-    z-index: -1
+    content: "" !important;
 }
 
 .weixin:hover::after {
     transform: scale(1);
-    opacity: 1
+    opacity: 1;
 }
 
 #error-wrap {
-    top: 40%
+    top: 40%;
 }
 
 #error-wrap .error-content .error-info .error_title {
-    margin-top: -3rem !important
+    margin-top: -3rem !important;
 }
 
 #error-wrap .error-content {
-    box-shadow: none !important;
     border-radius: 12px;
-    background: var(--heo-card-bg) !important
+    box-shadow: none !important;
+    background: var(--heo-card-bg) !important;
 }
 
 #body-wrap.error .aside-list {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    bottom: 0;
+    flex-flow: row nowrap;
+    bottom: 0px;
     position: absolute;
     padding: 1rem;
     width: 100%;
-    overflow: scroll
+    overflow: scroll;
 }
 
 #body-wrap.error .aside-list .aside-list-group {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     max-width: 1200px;
-    margin: 0 auto
+    margin: 0px auto;
 }
 
 #body-wrap.error .aside-list .aside-list-item {
-    padding: .5rem
+    padding: 0.5rem;
 }
 
 #body-wrap.error .aside-list .aside-list-item img {
     width: 100%;
     object-fit: cover;
-    border-radius: 12px
+    border-radius: 12px;
 }
 
 #body-wrap.error .aside-list .aside-list-item .thumbnail {
@@ -12586,7 +12509,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     width: 230px;
     height: 143px;
     background: var(--heo-card-bg);
-    display: flex
+    display: flex;
 }
 
 #body-wrap.error .aside-list .aside-list-item .content .title {
@@ -12595,54 +12518,53 @@ figure.gallery-group:hover .gallery-group-name::after {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     line-height: 1.5;
-    justify-content: center;
+    place-content: center;
     align-items: flex-end;
-    align-content: center;
-    padding-top: .5rem
+    padding-top: 0.5rem;
 }
 
 #body-wrap.error .aside-list .aside-list-item .content time {
-    display: none
+    display: none;
 }
 
 .load-btn.button-load {
     background: var(--heo-card-btn-bg);
     color: var(--heo-fontcolor);
-    padding: 12px 12px;
-    margin: 1.5rem 0 0 0;
+    padding: 12px;
+    margin: 1.5rem 0px 0px;
     width: 100%;
     text-align: center;
     border-radius: 12px;
-    transition: .3s;
-    font-weight: 700
+    transition: all 0.3s ease 0s;
+    font-weight: 700;
 }
 
 .load-btn.button-load:hover {
     background: var(--heo-blue);
     color: var(--heo-white);
-    transition: .3s;
-    box-shadow: var(--heo-shadow-blue)
+    transition: all 0.3s ease 0s;
+    box-shadow: var(--heo-shadow-blue);
 }
 
 .moments-list {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .moments-list .article-sort-item-info {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .article-sort-item-info-more {
     display: flex;
-    font-size: .7rem;
-    margin-right: auto
+    font-size: 0.7rem;
+    margin-right: auto;
 }
 
 .friend_post_time {
     margin-left: 8px;
-    color: var(--heo-secondtext)
+    color: var(--heo-secondtext);
 }
 
 .friendlink-avatar {
@@ -12653,92 +12575,92 @@ figure.gallery-group:hover .gallery-group-name::after {
     border-radius: 32px;
     overflow: hidden;
     background: var(--heo-secondbg);
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 .friendlink-avatar:hover {
+    background: var(--heo-secondbg);
     border-radius: 32px !important;
-    background: var(--heo-secondbg)
 }
 
 .moments-list .article-sort-item-info .article-sort-item-title {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 .moments-list .article-sort-item-info .article-sort-item-title:hover {
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 #friend_link_moments {
-    border: none !important
+    border: none !important;
 }
 
 .moments-article-img {
     height: 100%;
-    margin: 0 !important
+    margin: 0px !important;
 }
 
 .tab-item-content #moments_container .moments-item a {
     border-bottom: none;
-    padding: 0;
+    padding: 0px;
     margin-right: auto;
-    width: auto
+    width: auto;
 }
 
 .tab-item-content #moments_container .moments-item a:hover {
-    background: 0 0;
+    background: 0px 0px;
     color: var(--heo-lighttext);
-    box-shadow: none
+    box-shadow: none;
 }
 
 .tab-item-content #moments_container h2 {
-    display: none
+    display: none;
 }
 
 #friend_moments_list .moments-sort-item {
-    margin: 1rem 0
+    margin: 1rem 0px;
 }
 
 .moments-sort-item-img {
-    border-radius: 12px
+    border-radius: 12px;
 }
 
 .moments-item-time {
-    order: 1
+    order: 1;
 }
 
 .moments-sort-item-title {
     color: var(--heo-lighttext);
     border-bottom: none !important;
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 .moments-sort-item-title:hover {
     color: var(--heo-hovertext) !important;
-    background: 0 0 !important;
-    box-shadow: none !important
+    background: 0px 0px !important;
+    box-shadow: none !important;
 }
 
 .friendlink-avatar {
-    border-bottom: none !important
+    border-bottom: none !important;
 }
 
 .moments_load_button {
+    transition: all 0.3s ease 0s;
+    width: 100%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     color: var(--heo-fontcolor) !important;
     background: var(--heo-card-btn-bg) !important;
     padding: 12px 16px !important;
     border-radius: 12px !important;
-    transition: .3s;
-    width: 100%;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    border: 0 !important
+    border: 0px !important;
 }
 
 .moments_load_button:hover {
+    transition: all 0.3s ease 0s;
     color: var(--heo-white) !important;
     background: var(--heo-main) !important;
-    transition: .3s
 }
 
 .moments-item-title {
@@ -12747,131 +12669,129 @@ figure.gallery-group:hover .gallery-group-name::after {
     order: 0;
     width: 100%;
     font-weight: 700;
-    -webkit-line-clamp: 1 !important;
     overflow: hidden;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1 !important;
 }
 
 .moments-item-info {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .moments_post_time {
-    display: none
+    display: none;
 }
 
 .moments_post_time i {
-    margin-right: 8px
+    margin-right: 8px;
 }
 
 .chart {
     align-items: flex-start;
-    flex: 1;
+    flex: 1 1 0%;
     width: 100px;
     height: 60px;
-    margin: 20px
+    margin: 20px;
 }
 
 .moments-item-title {
-    font-weight: 700
+    font-weight: 700;
 }
 
 .moments_post_info_number {
-    float: right
+    float: right;
 }
 
 @media screen and (max-width: 500px) {
     #info_user_pool {
         padding: 10px;
         flex-direction: column;
-        max-height: 200px
+        max-height: 200px;
     }
 
     .chart {
-        flex: 0;
+        flex: 0 1 0%;
         width: 100%;
         height: 160px;
-        margin: 0
+        margin: 0px;
     }
 }
 
 .moments-item-img {
     width: 60px !important;
-    height: 60px !important
+    height: 60px !important;
 }
 
 .moments-item-img img {
     border-radius: 99px;
     width: 80px;
     height: 80px;
-    overflow: hidden
+    overflow: hidden;
 }
 
 #info_user_pool {
     background: var(--heo-secondbg);
-    border-radius: 12px !important;
     margin-top: 1rem;
-    box-shadow: none !important
+    border-radius: 12px !important;
+    box-shadow: none !important;
 }
 
 .moments-item {
-    margin-left: 0 !important;
-    box-shadow: none !important
+    margin-left: 0px !important;
+    box-shadow: none !important;
 }
 
 .hexo-douban-item {
-    border-bottom: none !important;
     background: var(--heo-card-bg);
-    border: var(--style-border);
     box-shadow: var(--heo-shadow-border);
     border-radius: 12px;
-    margin: 8px 0;
+    margin: 8px 0px;
     height: 160px;
-    min-height: 160px !important;
     width: 49%;
-    overflow: hidden
+    overflow: hidden;
+    border-bottom: none !important;
+    min-height: 160px !important;
 }
 
 @media screen and (min-width: 1300px) {
     .hexo-douban-item {
-        width: 32%
+        width: 32%;
     }
 }
 
 #hexo-douban-item3 {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between
+    flex-flow: row wrap;
+    justify-content: space-between;
 }
 
 .hexo-douban-item .hexo-douban-picture a {
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 .hexo-douban-item .hexo-douban-picture img {
-    margin: 0 !important;
-    height: 100% !important
+    margin: 0px !important;
+    height: 100% !important;
 }
 
 .hexo-douban-tabs {
-    display: none
+    display: none;
 }
 
 .hexo-douban-title a {
-    border-bottom: 0 !important
+    border-bottom: 0px !important;
 }
 
 .hexo-douban-title {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .hexo-douban-title a:hover {
     color: var(--heo-lighttext) !important;
-    background: var(--heo-none) !important
+    background: var(--heo-none) !important;
 }
 
 .hexo-douban-pagination {
@@ -12879,69 +12799,68 @@ figure.gallery-group:hover .gallery-group-name::after {
     width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center
+    align-items: center;
 }
 
 span.hexo-douban-pagenum {
-    margin: 0 .5rem
+    margin: 0px 0.5rem;
 }
 
 .hexo-douban-title {
     font-size: 1rem;
-    line-height: 1
+    line-height: 1;
 }
 
 .hexo-douban-title a {
-    padding: 0 !important
+    padding: 0px !important;
 }
 
 .hexo-douban-info {
+    margin-right: 0.5rem;
     padding-left: 130px !important;
-    margin-right: .5rem
 }
 
 .hexo-douban-meta {
-    font-size: .7rem !important;
     color: var(--heo-secondtext);
-    margin-top: .3rem;
-    line-height: 1.05
+    margin-top: 0.3rem;
+    line-height: 1.05;
+    font-size: 0.7rem !important;
 }
 
 .hexo-douban-comments {
     line-height: 1.2;
-    margin-top: .5rem;
-    font-size: .8rem !important;
+    margin-top: 0.5rem;
     -webkit-line-clamp: 3;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    -webkit-box-orient: vertical
+    -webkit-box-orient: vertical;
+    font-size: 0.8rem !important;
 }
 
 .hexo-douban-picture {
     height: 100%;
-    top: 0 !important;
-    padding: 10px 0 10px 10px
+    padding: 10px 0px 10px 10px;
+    top: 0px !important;
 }
 
 .hexo-douban-picture a img {
-    border-radius: 8px !important
+    border-radius: 8px !important;
 }
 
 .hexo-douban-button {
     width: 4rem;
     height: 2rem;
     line-height: 1.9rem;
-    border-radius: 8px !important;
     background: var(--heo-card-bg);
     box-shadow: var(--heo-shadow-lightblack);
-    border: var(--style-border);
-    margin: 0 .2rem;
-    border-bottom: var(--style-border) !important
+    margin: 0px 0.2rem;
+    border-radius: 8px !important;
+    border-bottom: var(--style-border) !important;
 }
 
 .article-sort-item-time {
-    display: none
+    display: none;
 }
 
 .article-sort-item-tags {
@@ -12951,55 +12870,52 @@ span.hexo-douban-pagenum {
     display: inline-block;
     text-overflow: ellipsis;
     width: 100%;
-    font-size: .7rem
+    font-size: 0.7rem;
 }
 
 .article-sort-item-tags a {
     color: var(--heo-fontcolor);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 .article-sort-item-tags a:hover {
     color: var(--heo-theme);
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #heo-footer .footer-links {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 #heo-footer {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     width: 100%;
     max-width: 1200px;
-    margin: 1rem auto;
+    margin: 1rem auto 3rem;
     justify-content: space-between;
-    flex-wrap: wrap;
-    margin-bottom: 3rem;
-    padding: 0 1rem
+    padding: 0px 1rem;
 }
 
 #heo-footer .footer-item {
-    font-size: .8rem;
-    line-height: .8rem;
-    margin: .38rem 0;
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    margin: 0.38rem auto 0.38rem 0px;
     color: var(--heo-fontcolor);
-    margin-right: auto
 }
 
 #heo-footer .footer-item:hover {
-    color: var(--heo-theme)
+    color: var(--heo-theme);
 }
 
 #heo-footer .footer-group {
-    min-width: 120px
+    min-width: 120px;
 }
 
 #heo-footer .footer-title {
     color: var(--heo-secondtext);
-    font-size: .8rem
+    font-size: 0.8rem;
 }
 
 #footer-banner {
@@ -13010,11 +12926,11 @@ span.hexo-douban-pagenum {
     display: flex;
     overflow: hidden;
     z-index: 1002;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
-[data-theme=dark] #footer-banner {
-    background: var(--heo-secondbg)
+[data-theme="dark"] #footer-banner {
+    background: var(--heo-secondbg);
 }
 
 #footer-banner .footer-banner-links {
@@ -13022,64 +12938,62 @@ span.hexo-douban-pagenum {
     justify-content: space-between;
     max-width: 1400px;
     width: 100%;
-    margin: 0 auto;
+    margin: 0px auto;
     flex-wrap: wrap;
-    align-items: center
+    align-items: center;
 }
 
 #footer-banner .footer-banner-left {
     display: flex;
     flex-wrap: wrap;
-    min-height: 32px
+    min-height: 32px;
 }
 
 #footer-banner .footer-banner-link {
     margin-right: 1rem;
     color: var(--heo-fontcolor);
-    font-size: .8rem;
+    font-size: 0.8rem;
     font-weight: 700;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 #footer-banner .footer-banner-link.cc {
-    margin-right: 0
+    margin-right: 0px;
 }
 
 #footer-banner .footer-banner-link.cc i {
-    margin-right: .5rem
+    margin-right: 0.5rem;
 }
 
 #footer-banner .footer-banner-link:hover {
-    color: var(--heo-theme)
+    color: var(--heo-theme);
 }
 
 #footer-banner > div > div.footer-banner-left > span {
-    margin-right: 1rem
+    margin-right: 1rem;
 }
 
 #footer-banner .footer-banner-right a:hover {
-    color: var(--heo-lighttext)
+    color: var(--heo-lighttext);
 }
 
 #footer_deal i {
-    font-size: .9rem;
-    transition: .3s;
-    line-height: .9rem;
-    height: .9rem
+    font-size: 0.9rem;
+    line-height: 0.9rem;
+    height: 0.9rem;
 }
 
 .la-widget.la-data-widget__container {
     border-radius: 12px;
-    border: var(--style-border) !important;
     box-shadow: var(--heo-shadow-border);
-    border-color: var(--heo-card-border)
+    border: var(--style-border) !important;
 }
 
 #about-page {
     display: flex;
     padding-top: 1rem;
     flex-direction: column;
-    align-items: center
+    align-items: center;
 }
 
 #about-page .author-img {
@@ -13087,26 +13001,26 @@ span.hexo-douban-pagenum {
     border-radius: 50%;
     overflow: hidden;
     width: 180px;
-    height: 180px
+    height: 180px;
 }
 
 #about-page .author-title {
     font-size: 2rem;
     font-weight: 700;
-    margin-top: 1rem
+    margin-top: 1rem;
 }
 
 .page-title {
-    display: none
+    display: none;
 }
 
 :root {
-    --offset: 0px
+    --offset: 0px;
 }
 
 .inline-word {
     word-break: keep-all;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .author-content {
@@ -13114,14 +13028,14 @@ span.hexo-douban-pagenum {
     flex-wrap: wrap;
     justify-content: space-between;
     width: 100%;
-    margin-top: 1rem
+    margin-top: 1rem;
 }
 
 .author-content-item-group.column {
     display: flex;
     flex-direction: column;
     width: 49%;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .author-content-item {
@@ -13132,53 +13046,53 @@ span.hexo-douban-pagenum {
     box-shadow: var(--heo-shadow-border);
     position: relative;
     padding: 1rem 2rem;
-    overflow: hidden
+    overflow: hidden;
 }
 
 .author-content-item.single {
-    width: 100%
+    width: 100%;
 }
 
 .author-content-item .author-content-item-title {
     font-size: 36px;
     font-weight: 700;
-    line-height: 1
+    line-height: 1;
 }
 
 .author-content-item .author-content-item-tips {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+    opacity: 0.8;
+    font-size: 0.6rem;
+    margin-bottom: 0.5rem;
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item {
-        width: 100% !important;
         margin-top: 1rem;
-        padding: 1rem
+        padding: 1rem;
+        width: 100% !important;
     }
 
     .author-content-item-group.column {
-        width: 100% !important
+        width: 100% !important;
     }
 
     .author-content {
-        margin-top: 0
+        margin-top: 0px;
     }
 }
 
 .card-background-icon {
     font-size: 12rem;
-    opacity: .2;
+    opacity: 0.2;
     position: absolute;
-    right: 0;
+    right: 0px;
     bottom: -40%;
     transform: rotate(30deg);
-    transition: 2s ease-in-out
+    transition: all 2s ease-in-out 0s;
 }
 
 .author-content-item:hover .card-background-icon {
-    transform: rotate(20deg)
+    transform: rotate(20deg);
 }
 
 #about-page .myInfoAndSayHello {
@@ -13186,80 +13100,75 @@ span.hexo-douban-pagenum {
     flex-direction: column;
     justify-content: center;
     color: var(--heo-white);
-    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
-    width: 59%
+    background: linear-gradient(120deg, rgb(91, 39, 255) 0px, rgb(0, 212, 255) 100%) 0% 0% / 200%;
+    animation: 15s ease 0s infinite normal none running gradient;
+    width: 59%;
 }
 
 #about-page .myInfoAndSayHello .title1 {
-    opacity: .8;
-    line-height: 1.3
+    opacity: 0.8;
+    line-height: 1.3;
 }
 
 #about-page .myInfoAndSayHello .title2 {
     font-size: 36px;
     font-weight: 700;
     line-height: 1.1;
-    margin: .5rem 0
+    margin: 0.5rem 0px;
 }
 
 .author-content-item-group.column.mapAndInfo {
-    width: 59%
+    width: 59%;
 }
 
 .author-content-item.map {
-    background: url(../../img.zhheo.com/i/2022/08/31/630ef8e827401.webp) no-repeat center;
+    background: url("https://img.zhheo.com/i/2022/08/31/630ef8e827401.webp") center center / 100% no-repeat;
     min-height: 160px;
     max-height: 400px;
     position: relative;
     overflow: hidden;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     height: 60%;
-    background-size: 100%;
-    transition: 1s ease-in-out
+    transition: all 1s ease-in-out 0s;
 }
 
-[data-theme=dark] .author-content-item.map {
-    background: url(../../img.zhheo.com/i/2022/08/31/630ef8db0fefe.webp) no-repeat center;
-    background-size: 100%
+[data-theme="dark"] .author-content-item.map {
+    background: url("https://img.zhheo.com/i/2022/08/31/630ef8db0fefe.webp") center center / 100% no-repeat;
 }
 
 .author-content-item.map:hover {
     background-size: 120%;
-    transition: 4s ease-in-out;
-    background-position-x: 0;
-    background-position-y: 36%
+    transition: all 4s ease-in-out 0s;
+    background-position: 0px 36%;
 }
 
 .author-content-item.map .map-title {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: 0px;
+    left: 0px;
     width: 100%;
     background: var(--heo-maskbg);
-    padding: .5rem 2rem;
+    padding: 0.5rem 2rem;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    transition: 1s ease-in-out;
-    font-size: 20px
+    transition: all 1s ease-in-out 0s;
+    font-size: 20px;
 }
 
 .author-content-item.map:hover .map-title {
-    bottom: -100%
+    bottom: -100%;
 }
 
 .author-content-item.map .map-title b {
-    color: var(--font-color)
+    color: var(--font-color);
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item.map.myphoto {
-        background-size: cover !important
+        background-size: cover !important;
     }
 
     .author-content-item.map .map-title {
-        padding: 1rem
+        padding: 1rem;
     }
 }
 
@@ -13270,33 +13179,32 @@ span.hexo-douban-pagenum {
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    height: -webkit-fill-available;
-    height: 40%
+    height: 40%;
 }
 
 @media screen and (max-width: 1300px) {
     .author-content-item.selfInfo {
-        height: 70%
+        height: 70%;
     }
 }
 
 .author-content-item.selfInfo div {
     display: flex;
     flex-direction: column;
-    margin: .5rem 2rem .5rem 0
+    margin: 0.5rem 2rem 0.5rem 0px;
 }
 
 .author-content-item.selfInfo .selfInfo-title {
-    opacity: .8;
-    font-size: .6rem;
+    opacity: 0.8;
+    font-size: 0.6rem;
     line-height: 1;
-    margin-bottom: 8px
+    margin-bottom: 8px;
 }
 
 .author-content-item.selfInfo .selfInfo-content {
     font-weight: 700;
     font-size: 34px;
-    line-height: 1
+    line-height: 1;
 }
 
 .author-content-item.myphoto {
@@ -13307,7 +13215,7 @@ span.hexo-douban-pagenum {
     width: 39%;
     display: flex;
     align-items: center;
-    justify-content: center
+    justify-content: center;
 }
 
 .author-content-item.myphoto img {
@@ -13315,87 +13223,86 @@ span.hexo-douban-pagenum {
     height: 100%;
     min-width: 100%;
     object-fit: cover;
-    transition: .6s
+    transition: all 0.6s ease 0s;
 }
 
 .author-content-item.myphoto:hover img {
     min-width: 105%;
-    transition: 2s
+    transition: all 2s ease 0s;
 }
 
 .author-content-item.myphoto .myphoto-title {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: 0px;
+    left: 0px;
     width: 100%;
     background: var(--heo-maskbgdeep);
-    padding: .5rem 2rem;
+    padding: 0.5rem 2rem;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 .author-content-item.careers {
-    min-height: 400px
+    min-height: 400px;
 }
 
 .author-content-item.careers img {
     position: absolute;
-    left: 0;
+    left: 0px;
     bottom: 20px;
     width: 100%;
-    transition: .6s
+    transition: all 0.6s ease 0s;
 }
 
 .author-content-item.careers .careers-group {
-    margin-top: 12px
+    margin-top: 12px;
 }
 
 .author-content-item.careers .careers-item {
     display: flex;
-    align-items: center
+    align-items: center;
 }
 
 .author-content-item.careers .careers-item .circle {
     width: 16px;
     height: 16px;
     margin-right: 8px;
-    border-radius: 16px
+    border-radius: 16px;
 }
 
 .author-content-item.careers .careers-item .name {
-    color: var(--heo-secondtext)
+    color: var(--heo-secondtext);
 }
 
 .author-content-item.personalities {
     overflow: hidden;
     position: relative;
-    width: 59%
+    width: 59%;
 }
 
 .author-content-item.personalities .title2 {
     font-size: 36px;
     font-weight: 700;
-    line-height: 1.1
+    line-height: 1.1;
 }
 
 .author-content-item.personalities .image {
     position: absolute;
     right: -40px;
     bottom: -10rem;
-    transition: transform 2s cubic-bezier(.13, .45, .21, 1.02)
+    transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02) 0s;
 }
 
 .author-content-item.personalities:hover .image {
-    transform: rotate(-10deg)
+    transform: rotate(-10deg);
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item.personalities {
-        min-height: 360px
+        min-height: 360px;
     }
 
     .author-content-item.personalities .image {
-        right: -70px
+        right: -70px;
     }
 }
 
@@ -13407,22 +13314,21 @@ span.hexo-douban-pagenum {
     align-items: flex-start;
     flex-direction: column;
     justify-content: center;
-    width: 39%
+    width: 39%;
 }
 
 .author-content-item.maxim .maxim-title {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .author-content-item.maxim .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+    opacity: 0.8;
+    font-size: 0.6rem;
+    margin-bottom: 0.5rem;
 }
 
 .author-content-item.buff {
-    height: 200px;
     font-size: 36px;
     font-weight: 700;
     line-height: 1.1;
@@ -13430,30 +13336,29 @@ span.hexo-douban-pagenum {
     align-items: flex-start;
     flex-direction: column;
     justify-content: center;
-    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);
+    background: linear-gradient(120deg, rgb(255, 39, 232) 0px, rgb(255, 128, 0) 100%) 0% 0% / 200%;
     color: var(--heo-white);
-    background-size: 200%;
-    animation: gradient 15s ease infinite;
+    animation: 15s ease 0s infinite normal none running gradient;
     min-height: 200px;
     height: fit-content;
-    width: 59%
+    width: 59%;
 }
 
 .author-content-item.buff .card-content {
     display: flex;
     flex-direction: column;
-    justify-content: center
+    justify-content: center;
 }
 
 .author-content-item.buff .buff-title {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .author-content-item.buff .title1 {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+    opacity: 0.8;
+    font-size: 0.6rem;
+    margin-bottom: 0.5rem;
 }
 
 .author-content-item.skills {
@@ -13462,45 +13367,44 @@ span.hexo-douban-pagenum {
     align-items: flex-start;
     flex-direction: column;
     width: 50%;
-    min-height: 450px
+    min-height: 450px;
 }
 
 .author-content-item.skills .tags-group-all {
     display: flex;
-    transform: rotate(0);
-    transition: .3s
+    transform: rotate(0deg);
+    transition: all 0.3s ease 0s;
 }
 
 .author-content-item.skills .tags-group-wrapper {
     margin-top: 40px;
     display: flex;
     flex-wrap: nowrap;
-    animation: rowup 60s linear infinite
+    animation: 60s linear 0s infinite normal none running rowup;
 }
 
 .author-content-item.skills .skills-style-group {
-    position: relative
+    position: relative;
 }
 
 .author-content-item.skills .skills-list {
     display: flex;
     opacity: 0;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     position: absolute;
     width: 100%;
-    top: 0;
-    left: 0;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin-top: 10px
+    top: 0px;
+    left: 0px;
+    flex-flow: row wrap;
+    margin-top: 10px;
 }
 
 .author-content-item.skills:hover .skills-style-group .tags-group-all {
-    opacity: 0
+    opacity: 0;
 }
 
 .author-content-item.skills:hover .skills-style-group .skills-list {
-    opacity: 1
+    opacity: 1;
 }
 
 .author-content-item.skills .skill-info {
@@ -13512,12 +13416,12 @@ span.hexo-douban-pagenum {
     border-radius: 40px;
     padding: 4px 12px 4px 8px;
     border: var(--style-border);
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 .author-content-item.skills .etc {
     margin-right: 10px;
-    margin-top: 10px
+    margin-top: 10px;
 }
 
 .author-content-item.skills .skill-icon {
@@ -13527,16 +13431,16 @@ span.hexo-douban-pagenum {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 8px
+    margin-right: 8px;
 }
 
 .author-content-item.skills .skill-icon img {
     width: 18px;
-    height: 18px
+    height: 18px;
 }
 
 .author-content-item.skills .skill-name {
-    font-weight: 700
+    font-weight: 700;
 }
 
 .author-content-item.aboutsiteTips {
@@ -13544,7 +13448,7 @@ span.hexo-douban-pagenum {
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
-    width: 39%
+    width: 39%;
 }
 
 .aboutsiteTips h2 {
@@ -13552,16 +13456,16 @@ span.hexo-douban-pagenum {
     font-size: 36px;
     font-family: Helvetica;
     line-height: 1.06;
-    letter-spacing: -.02em;
+    letter-spacing: -0.02em;
     color: var(--font-color);
-    margin-top: 0
+    margin-top: 0px;
 }
 
 .aboutsiteTips .mask {
     height: 36px;
     position: relative;
     overflow: hidden;
-    margin-top: 4px
+    margin-top: 4px;
 }
 
 .aboutsiteTips .mask span {
@@ -13571,61 +13475,59 @@ span.hexo-douban-pagenum {
     top: 36px;
     padding-bottom: var(--offset);
     background-size: 100% 100%;
-    -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    background-repeat: no-repeat
+    background-repeat: no-repeat;
 }
 
 .aboutsiteTips .mask span[data-show] {
     transform: translateY(-100%);
-    transition: .5s transform ease-in-out
+    transition: transform 0.5s ease-in-out 0s;
 }
 
 .aboutsiteTips .mask span[data-up] {
     transform: translateY(-200%);
-    transition: .5s transform ease-in-out
+    transition: transform 0.5s ease-in-out 0s;
 }
 
 .aboutsiteTips .mask span:nth-child(1) {
-    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+    background-image: linear-gradient(45deg, rgb(14, 207, 254) 50%, rgb(7, 166, 241));
 }
 
 .aboutsiteTips .mask span:nth-child(2) {
-    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)
+    background-image: linear-gradient(45deg, rgb(24, 225, 152) 50%, rgb(14, 193, 93));
 }
 
 .aboutsiteTips .mask span:nth-child(3) {
-    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+    background-image: linear-gradient(45deg, rgb(138, 124, 251) 50%, rgb(99, 62, 156));
 }
 
 .aboutsiteTips .mask span:nth-child(4) {
-    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)
+    background-image: linear-gradient(45deg, rgb(250, 118, 113) 50%, rgb(244, 95, 127));
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item.map {
-        margin-bottom: 0
+        margin-bottom: 0px;
     }
 }
 
 #about-page .about-statistic {
     min-height: 380px;
     width: 39%;
-    background: url(../../img.zhheo.com/i/2022/09/23/632d5d8f37e90.webp) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/09/23/632d5d8f37e90.webp") center top / cover no-repeat;
     color: var(--heo-white);
-    overflow: hidden
+    overflow: hidden;
 }
 
 #about-page .about-statistic::after {
-    box-shadow: 0 -159px 173px 71px #0f1114 inset;
+    box-shadow: rgb(15, 17, 20) 0px -159px 173px 71px inset;
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 #statistic {
@@ -13635,10 +13537,9 @@ span.hexo-douban-pagenum {
     color: var(--heo-white);
     display: flex;
     justify-content: space-between;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     margin-top: 1rem;
-    margin-bottom: 2rem
+    margin-bottom: 2rem;
 }
 
 #statistic div {
@@ -13646,83 +13547,79 @@ span.hexo-douban-pagenum {
     justify-content: space-between;
     flex-direction: column;
     width: 50%;
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 #statistic div span:first-child {
-    opacity: .8;
-    font-size: .6rem
+    opacity: 0.8;
+    font-size: 0.6rem;
 }
 
 #statistic div span:last-child {
     font-weight: 700;
     font-size: 34px;
     line-height: 1;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover {
-    background: #998c5a;
-    color: var(--heo-white)
+    background: rgb(153, 140, 90);
+    color: var(--heo-white);
 }
 
 .author-content-item.single.reward .author-content-item .author-content-item-title {
-    color: var(--heo-red)
+    color: var(--heo-red);
 }
 
 .author-content-item.single.reward .reward-list-all {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin-top: 1rem;
-    margin-bottom: .5rem;
-    margin-left: -.25rem;
-    margin-right: -.25rem
+    flex-flow: row wrap;
+    margin: 1rem -0.25rem 0.5rem;
 }
 
 .author-content-item.single.reward .reward-list-all .reward-list-item {
     padding: 1rem;
     border-radius: 12px;
     border: var(--style-border-always);
-    width: calc((100% / 6) - .5rem);
-    margin: 0 .25rem .5rem .25rem;
-    box-shadow: var(--heo-shadow-border)
+    width: calc(16.6667% - 0.5rem);
+    margin: 0px 0.25rem 0.5rem;
+    box-shadow: var(--heo-shadow-border);
 }
 
 @media screen and (max-width: 1200px) {
     .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 4) - .5rem)
+        width: calc(25% - 0.5rem);
     }
 }
 
 @media screen and (max-width: 900px) {
     .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: calc((100% / 2) - .5rem)
+        width: calc(50% - 0.5rem);
     }
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item.single.reward .reward-list-all .reward-list-item {
-        width: 100%
+        width: 100%;
     }
 }
 
 .author-content-item.single.reward .author-content-item-description {
     font-size: 16px;
-    margin-top: .5rem
+    margin-top: 0.5rem;
 }
 
 .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name {
     font-size: 1rem;
     font-weight: 700;
     line-height: 1;
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-bottom-group {
     display: flex;
     align-items: center;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money {
@@ -13733,24 +13630,24 @@ span.hexo-douban-pagenum {
     line-height: 1;
     border-radius: 4px;
     margin-right: 4px;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-time {
     font-size: 12px;
     color: var(--heo-secondtext);
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 .author-content-item.single.reward .reward-list-updateDate {
     color: var(--heo-gray);
-    font-size: 14px
+    font-size: 14px;
 }
 
 .author-content-item.single.reward .post-reward {
     position: absolute;
     right: 2rem;
-    top: 2rem
+    top: 2rem;
 }
 
 .author-content-item.single.reward .post-reward .reward-button {
@@ -13761,158 +13658,151 @@ span.hexo-douban-pagenum {
     display: flex;
     align-items: center;
     z-index: 1;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     cursor: pointer;
     box-shadow: none;
     width: fit-content;
     height: fit-content;
-    line-height: 2
+    line-height: 2;
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item.single.reward .post-reward .reward-button {
-        display: none
+        display: none;
     }
 }
 
 .author-content-item.single.reward .post-reward .reward-button i {
     margin-right: 8px;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 .author-content-item.single.reward .post-reward .reward-main {
-    top: 60px;
-    right: 0;
-    left: auto;
-    bottom: auto;
+    inset: 60px 0px auto auto;
     width: fit-content;
-    box-shadow: var(--heo-shadow-border)
+    box-shadow: var(--heo-shadow-border);
 }
 
 .author-content-item.single.reward .post-reward .reward-main .reward-all::before {
     bottom: auto;
-    top: -16px
+    top: -16px;
 }
 
 .author-content-item.single.reward a.reward-main-btn {
-    display: none
+    display: none;
 }
 
 .author-content-item.game-lol {
-    background: url(../../img.zhheo.com/i/2022/08/31/630efa7ae39fe.webp) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/31/630efa7ae39fe.webp") center top / cover no-repeat;
     min-height: 300px;
     overflow: hidden;
     color: var(--heo-white);
-    width: 59%
+    width: 59%;
 }
 
 .author-content-item .card-content {
     position: absolute;
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     z-index: 2;
     display: flex;
     flex-direction: column;
-    padding: 1rem 2rem
+    padding: 1rem 2rem;
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item .card-content {
-        padding: 1rem
+        padding: 1rem;
     }
 }
 
 .author-content-item.game-lol::after {
-    box-shadow: 0 -69px 203px 11px #04120f inset;
+    box-shadow: rgb(4, 18, 15) 0px -69px 203px 11px inset;
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 .author-content-item .content-bottom {
     margin-top: auto;
     display: flex;
     align-items: center;
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .author-content-item .content-bottom .icon-group {
-    display: flex
+    display: flex;
 }
 
 .author-content-item .content-bottom .icon-group i {
     display: inline-block;
     width: 22px;
     height: 18px;
-    margin-right: .5rem
+    margin-right: 0.5rem;
 }
 
 .icon-pos-sup {
-    background: url(../../img.zhheo.com/i/2022/08/25/63074b68d9f4c.png)
+    background: url("https://img.zhheo.com/i/2022/08/25/63074b68d9f4c.png");
 }
 
 .icon-pos-mid {
-    background: url(../../img.zhheo.com/i/2022/08/25/63074b54d2731.png)
+    background: url("https://img.zhheo.com/i/2022/08/25/63074b54d2731.png");
 }
 
 .author-content-item.game-wolf {
     width: 39%;
-    background: url(../../img.zhheo.com/i/2022/08/31/630efa916a851.webp) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/31/630efa916a851.webp") center top / cover no-repeat;
     min-height: 300px;
     overflow: hidden;
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .author-content-item.game-wolf::after {
-    box-shadow: 0 -69px 203px 11px #415dc9 inset;
+    box-shadow: rgb(65, 93, 201) 0px -69px 203px 11px inset;
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 .author-content-item.like-technology {
-    background: url(../../img.zhheo.com/i/2022/08/31/630efac3ecef3.webp) no-repeat;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/31/630efac3ecef3.webp") 0% 0% / cover no-repeat;
     min-height: 230px;
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .author-content-item.like-music {
-    background: url(../../img.zhheo.com/i/2022/08/31/630efae141e9a.webp) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/31/630efae141e9a.webp") center top / cover no-repeat;
     min-height: 400px;
     color: var(--heo-white);
-    overflow: hidden
+    overflow: hidden;
 }
 
 .author-content-item.like-music::after {
-    box-shadow: 0 -69px 203px 11px #736896 inset;
+    box-shadow: rgb(115, 104, 150) 0px -69px 203px 11px inset;
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 .author-content-item .card-content .author-content-item-title {
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 .author-content-item .card-content .banner-button-group {
     position: absolute;
     bottom: 1.5rem;
-    right: 2rem
+    right: 2rem;
 }
 
 .author-content-item .card-content .banner-button-group .banner-button {
@@ -13920,63 +13810,64 @@ span.hexo-douban-pagenum {
     width: 124px;
     border-radius: 20px;
     justify-content: center;
-    background: var(--heo-card-bg);
-    color: var(--font-color);
+    background: var(--heo-black-op);
+    color: var(--heo-white);
     display: flex;
     align-items: center;
     z-index: 1;
-    transition: .3s;
-    cursor: pointer
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+    backdrop-filter: saturate(180%) blur(20px);
 }
 
 .author-content-item .card-content .banner-button-group .banner-button:hover {
-    background: #736896;
-    color: var(--heo-white)
+    background: var(--heo-main);
+    color: var(--heo-white);
 }
 
 .author-content-item .card-content .banner-button-group .banner-button i {
     margin-right: 8px;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 @media screen and (max-width: 768px) {
     .author-content-item .card-content .banner-button-group {
         right: 1rem;
-        bottom: 1rem
+        bottom: 1rem;
     }
 
     .author-content-item .card-content .banner-button-group .banner-button {
-        background: 0 0;
+        background: 0px 0px;
         color: var(--heo-white);
-        padding: 0
+        padding: 0px;
+        width: fit-content;
     }
 
     .author-content-item .card-content .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
+        margin-right: 0px;
+        font-size: 1.5rem;
     }
 
     .author-content-item .card-content .banner-button-group .banner-button-text {
-        display: none
+        display: none;
     }
 }
 
 .author-content-item.single.like-movie {
     height: 19rem;
-    background: url(../../img.zhheo.com/i/2022/09/27/633289920d1c7.webp) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/09/27/633289920d1c7.webp") center top / cover no-repeat;
     color: var(--heo-white);
-    overflow: hidden
+    overflow: hidden;
 }
 
 .author-content-item.single.like-movie::after {
-    box-shadow: 0 21px 133px 81px #1c1c1c inset;
+    box-shadow: rgb(28, 28, 28) 0px 21px 133px 81px inset;
     position: absolute;
-    content: '';
+    content: "";
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0
+    top: 0px;
+    left: 0px;
 }
 
 #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
@@ -13987,68 +13878,65 @@ span.hexo-douban-pagenum {
     display: flex;
     align-items: center;
     z-index: 1;
-    transition: .3s;
+    transition: all 0.3s ease 0s;
     cursor: pointer;
-    border: none
+    border: none;
 }
 
 #article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
-    background: #d0b247;
-    color: var(--heo-white)
+    background: rgb(208, 178, 71);
+    color: var(--heo-white);
 }
 
 #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
     margin-right: 8px;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 @media screen and (max-width: 768px) {
     #article-container .author-content-item.single.like-movie .banner-button-group {
         right: 1rem;
-        bottom: 1rem
+        bottom: 1rem;
     }
 
     #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
-        background: 0 0;
+        background: 0px 0px;
         color: var(--heo-white);
-        padding: 0
+        padding: 0px;
     }
 
     #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
-        margin-right: 0;
-        font-size: 1.5rem
+        margin-right: 0px;
+        font-size: 1.5rem;
     }
 
     #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
-        display: none
+        display: none;
     }
 }
 
 .author-content.author-content-item.toolPage {
     height: 19rem;
-    background: url(../../img.zhheo.com/i/2022/08/26/6308d5778ba3c.jpg) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/26/6308d5778ba3c.jpg") center top / cover no-repeat;
     color: var(--heo-white);
     overflow: hidden;
-    margin-top: 0
+    margin-top: 0px;
 }
 
 .author-content.author-content-item.momentsPage {
     height: 19rem;
-    background: url(../../img.zhheo.com/i/2022/08/26/6308d5b137881.jpg) no-repeat top;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/26/6308d5b137881.jpg") center top / cover no-repeat;
     color: var(--heo-white);
     overflow: hidden;
-    margin-top: 0
+    margin-top: 0px;
 }
 
 .author-content.author-content-item.essayPage {
     height: 19rem;
-    background: url(../../img.zhheo.com/i/2022/08/27/6309587509a02.jpg) no-repeat center;
-    background-size: cover;
+    background: url("https://img.zhheo.com/i/2022/08/27/6309587509a02.jpg") center center / cover no-repeat;
     color: var(--heo-white);
     overflow: hidden;
-    margin-top: 0
+    margin-top: 0px;
 }
 
 #console {
@@ -14056,37 +13944,55 @@ span.hexo-douban-pagenum {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     z-index: 9999;
     justify-content: center;
     opacity: 0;
-    transition: .3s ease-out;
+    transition: all 0.3s ease-out 0s;
     flex-direction: column;
     align-items: center;
-    pointer-events: none
+    pointer-events: none;
 }
 
 #console.show {
     opacity: 1;
-    pointer-events: all
+    pointer-events: all;
 }
 
 #console .console-card-group {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0 30px;
-    max-width: 2000px
+    margin: 0px 30px;
+    max-width: 2000px;
 }
 
 @media screen and (max-width: 1300px) {
     #console .console-card-group {
-        display: none
+        display: none;
     }
 
     #consoleMusic {
-        display: none
+        display: none;
+    }
+
+    #consoleCommentBarrage {
+        display: none;
+    }
+}
+
+@media screen and (max-height: 800px) {
+    #console .console-card-group {
+        display: none;
+    }
+
+    #consoleMusic {
+        display: none;
+    }
+
+    #consoleCommentBarrage {
+        display: none;
     }
 }
 
@@ -14096,17 +14002,17 @@ span.hexo-douban-pagenum {
     overflow: hidden;
     border: var(--style-border);
     box-shadow: var(--heo-shadow-border);
-    padding: 40px
+    padding: 40px;
 }
 
 #console .console-card.tags {
-    height: calc(100% - 172px)
+    height: calc(100% - 172px);
 }
 
 #console .console-card-group-left {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     width: 40%;
-    height: 100%
+    height: 100%;
 }
 
 #console .console-card-group-right {
@@ -14115,34 +14021,32 @@ span.hexo-douban-pagenum {
     justify-content: center;
     height: 100%;
     width: 60%;
-    overflow: hidden
+    overflow: hidden;
 }
 
 #console .console-mask {
     background: var(--heo-maskbgdeep);
-    backdrop-filter: saturate(100%) blur(0);
-    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: saturate(100%) blur(0px);
     width: 100vw;
     height: 100vh;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     position: absolute;
     z-index: -1;
-    transition: .3s;
-    -webkit-backface-visibility: hidden;
-    -webkit-transform-style: preserve-3d
+    transition: all 0.3s ease 0s;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
 #console.show .console-mask {
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px)
 }
 
 #card-newest-comments .aside-list-item .thumbnail img {
     width: 20px;
     height: 20px;
     margin-right: 8px;
-    border-radius: 20px
+    border-radius: 20px;
 }
 
 #card-newest-comments .aside-list-item {
@@ -14153,42 +14057,42 @@ span.hexo-douban-pagenum {
     width: 49%;
     display: flex;
     flex-direction: column;
-    height: 150px
+    height: 150px;
 }
 
 #card-newest-comments .aside-list-item:not(:last-child) {
-    margin-bottom: .5rem
+    margin-bottom: 0.5rem;
 }
 
 #card-newest-comments .aside-list-item .name {
     text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 #console .author-content-item-tips {
-    opacity: .8;
-    font-size: .6rem;
-    margin-bottom: .5rem
+    opacity: 0.8;
+    font-size: 0.6rem;
+    margin-bottom: 0.5rem;
 }
 
 #console .author-content-item-title {
     font-size: 36px;
     font-weight: 700;
-    line-height: 1
+    line-height: 1;
 }
 
 #console .aside-list-item .thumbnail {
     display: flex;
     align-items: center;
-    width: fit-content
+    width: fit-content;
 }
 
 #console .aside-list-item .content {
     display: flex;
     flex-direction: column;
     height: 100%;
-    margin-top: .5rem
+    margin-top: 0.5rem;
 }
 
 #console .aside-list-item .content .comment {
@@ -14196,43 +14100,43 @@ span.hexo-douban-pagenum {
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
-    line-height: 24px
+    line-height: 24px;
+    width: fit-content;
 }
 
 #console .aside-list-item .content time {
     font-size: 12px;
     color: var(--heo-secondtext);
-    margin-top: auto
+    margin-top: auto;
 }
 
 #console .aside-list {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
 }
 
 #console .button-group {
     display: flex;
-    margin: 1rem auto 0 auto;
+    margin: 1rem auto 0px;
     justify-content: center;
-    width: fit-content
+    width: fit-content;
 }
 
 #console .button-group .console-btn-item {
     width: 60px;
     height: 60px;
-    transition: .3s;
-    cursor: pointer
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
 }
 
 #console .button-group .console-btn-item:not(:last-child) {
-    margin-right: .5rem
+    margin-right: 0.5rem;
 }
 
 #console .button-group .console-btn-item:hover a {
-    background: var(--heo-main)
+    background: var(--heo-main);
 }
 
 #console .button-group .console-btn-item a {
@@ -14244,46 +14148,47 @@ span.hexo-douban-pagenum {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--font-color)
+    color: var(--font-color);
 }
 
 #console .button-group .console-btn-item.on a {
     background: var(--heo-orange);
-    color: var(--heo-white)
+    color: var(--heo-white);
+    transition: all 0.3s ease 0s;
 }
 
 #console .button-group .console-btn-item a:hover {
-    background: var(--heo-main)
+    background: var(--heo-main) !important;
 }
 
 #console .button-group .console-btn-item:hover a {
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 .console-card.tags .card-tag-cloud {
     margin-top: 1.5rem;
     display: flex;
-    flex-wrap: wrap
+    flex-wrap: wrap;
 }
 
 .console-card.tags .card-tag-cloud a {
-    color: var(--font-color) !important;
     margin: 6px 4px;
     padding: 2px 8px;
     border-radius: 8px;
     background: var(--heo-secondbg);
     border: var(--style-border);
+    font-weight: 700;
+    color: var(--font-color) !important;
     font-size: 14px !important;
-    font-weight: 700
 }
 
 .console-card.tags .card-tag-cloud a:hover {
     background: var(--heo-main);
-    color: var(--heo-white) !important
+    color: var(--heo-white) !important;
 }
 
 .console-card.tags .card-tag-cloud a sup {
-    opacity: .6
+    opacity: 0.6;
 }
 
 #console .close-btn {
@@ -14295,58 +14200,57 @@ span.hexo-douban-pagenum {
     font-size: 40px;
     color: var(--font-color);
     cursor: pointer;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #console .close-btn:hover {
-    color: var(--heo-hovertext)
+    color: var(--heo-hovertext);
 }
 
 #console .console-card.history {
     margin-top: 8px;
-    padding: 0;
-    background: 0 0;
+    padding: 0px;
+    background: 0px 0px;
     box-shadow: none;
-    border: none
+    border: none;
 }
 
 #console .console-card.history .item-headline {
-    display: none
+    display: none;
 }
 
 #console .console-card.history .card-archive-list {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     justify-content: space-between;
-    flex-wrap: wrap
 }
 
 #console .console-card.history .card-archive-list li.card-archive-list-item {
-    flex: 0 0 24%
+    flex: 0 0 24%;
 }
 
 #console .console-card.history .card-archive-list .card-archive-list-link {
     border-radius: 8px;
-    margin: 4px 0;
+    margin: 4px 0px;
     display: flex;
     flex-direction: column;
     align-content: space-between;
     border: var(--style-border);
     background: var(--card-bg);
-    padding: 8px
+    padding: 8px;
 }
 
 #console .console-card.history .card-archive-list .card-archive-list-link:hover {
     background: var(--heo-main);
-    color: var(--heo-white)
+    color: var(--heo-white);
 }
 
 #console #card-newest-comments {
-    height: 100%
+    height: 100%;
 }
 
 #console .button-group i {
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 #keyboard-tips {
@@ -14361,57 +14265,106 @@ span.hexo-douban-pagenum {
     display: flex;
     flex-direction: column;
     backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
     pointer-events: none;
     box-shadow: var(--heo-shadow-border);
     opacity: 0;
-    transition: .3s
+    transition: all 0.3s ease 0s;
 }
 
 #keyboard-tips.show {
     opacity: 1;
-    transition: .1s
+    transition: all 0.1s ease 0s;
 }
 
 #keyboard-tips .keybordList {
     display: flex;
     flex-direction: column;
-    margin-top: 8px
+    margin-top: 8px;
 }
 
 #keyboard-tips .keyboardTitle {
     font-size: 12px;
     color: var(--heo-secondtext);
-    line-height: 1
+    line-height: 1;
 }
 
 #keyboard-tips .keybordItem {
     display: flex;
-    margin-top: 4px
+    margin-top: 4px;
 }
 
 #keyboard-tips .keyGroup {
     display: flex;
     align-items: center;
-    width: 90px
+    width: 90px;
 }
 
 #keyboard-tips .keyGroup .key {
-    padding: .2em .4em;
+    padding: 0.2em 0.4em;
     font-family: inherit;
     background-color: var(--card-bg);
     color: var(--font-color);
-    border: var(--style-border);
-    border-color: var(--heo-secondtext);
     border-bottom: 2px solid var(--heo-secondtext);
     box-shadow: var(--heo-shadow-border);
-    border-radius: .25rem;
+    border-radius: 0.25rem;
     overflow-wrap: break-word;
     overflow-x: auto;
     font-weight: 500;
-    font-size: .875em;
+    font-size: 0.875em;
     margin-right: 4px;
     vertical-align: baseline;
     line-height: 1;
-    height: 24px
+    height: 24px;
+}
+
+:root {
+    --heo-main: var(--heo-theme) !important;
+}
+
+:root {
+    --heo-main-op: var(--heo-theme-op) !important;
+}
+
+:root {
+    --heo-main-op-deep: var(--heo-theme-op-deep) !important;
+}
+
+:root {
+    --heo-main-none: var(--heo-theme-none) !important;
+}
+
+:root {
+    --heo-main: #000000 !important;
+}
+
+:root {
+    --heo-main-op: #00000023 !important;
+}
+
+:root {
+    --heo-main-op-deep: #000000dd !important;
+}
+
+:root {
+    --heo-main-none: #00000000 !important;
+}
+
+:root {
+    --heo-main: var(--heo-theme) !important;
+}
+
+:root {
+    --heo-main-op: var(--heo-theme-op) !important;
+}
+
+:root {
+    --heo-main-op-deep: var(--heo-theme-op-deep) !important;
+}
+
+:root {
+    --heo-main-none: var(--heo-theme-none) !important;
+}
+
+:root {
+    --heo-snackbar-time: 3000ms !important;
 }
\ No newline at end of file
diff --git a/templates/modules/head.html b/templates/modules/head.html
index 61710a0c..bbc4c2cd 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -63,6 +63,7 @@
                     css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css"
                 },
                 fancybox: {
+                    //  https://fancyapps.com/docs/ui/installation
                     js: "https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js",
                     css: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css"
                 }
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index e4059893..11feea25 100644
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@@ -8,7 +8,7 @@
     <!-- card，需要添加在没有图片时使用随机图片 -->
     <div class="recent-post-item" th:each="post : ${postItems}" th:classappend="${theme.config.layout.cols}">
         <div class="post_cover left_radius">
-            <a data-pjax-state th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
+            <a th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
                 <img class="post_bg entered loaded"
                      th:alt="${post.status.excerpt}"
                      th:attr="data-lazy-src=${post.spec.cover}"
@@ -76,7 +76,7 @@
             </a>
 
             <!-- th:href="${PostFinder.list(index, posts.size)}" -->
-            <a class="page-number" data-pjax-state
+            <a class="page-number"
                th:classappend="${index eq pageIndex} ? 'current'"
                th:each="index : ${#numbers.sequence(1, totalPages)}"
                th:text="${index}">
@@ -102,26 +102,26 @@
             </a>
 
             <!-- 首页 -->
-            <a class="page-number" data-pjax-state href="/">1</a>
+            <a class="page-number" href="/">1</a>
 
 
             <!-- 当前页面小于等于4 -->
             <!-- TODO 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state
+            <a class="page-number"
                th:classappend="${index eq pageIndex} ? 'current'"
                th:each="index:${#numbers.sequence(2,5)}"
                th:if="${pageIndex le 4}"
                th:text="${index}">
             </a>
             <!-- TODO 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state th:if="${pageIndex le 4}">...</a>
+            <a class="page-number" th:if="${pageIndex le 4}">...</a>
 
 
             <!-- 最后一页与当前页面之差小于等于3 -->
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state th:if="${totalPages - pageIndex le 3}">...</a>
+            <a class="page-number" th:if="${totalPages - pageIndex le 3}">...</a>
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state
+            <a class="page-number"
                th:classappend="${index eq pageIndex} ? 'current'"
                th:each="index : ${#numbers.sequence(totalPages - 4, totalPages - 1)}"
                th:if="${totalPages - pageIndex le 3}"
@@ -131,19 +131,19 @@
 
             <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
+            <a class="page-number" th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state
+            <a class="page-number"
                th:each="index : ${#numbers.sequence(pageIndex - 1,pageIndex + 1)}"
                th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}"
                th:text="${index}">
             </a>
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
+            <a class="page-number" th:if="${(pageIndex gt 4) && (totalPages - pageIndex gt 3)}">...</a>
 
             <!-- 尾页 -->
             <!-- 需要添加 th:href 跳转地址 -->
-            <a class="page-number" data-pjax-state
+            <a class="page-number"
                th:classappend="${index eq pageIndex} ? 'current'"
                th:text="${totalPages}">
             </a>