/*!
 * zangxin Blog v1.8.2 (https://zangxin.top)
 * Copyright 2026 zangxin51
 */

@media (min-width: 1200px) {
  .post-container,
  .sidebar-container {
    padding-right: 5%;
  }
}
@media (min-width: 768px) {
  .post-container {
    padding-right: 5%;
  }
}
.sidebar-container {
  color: #bfbfbf;
  font-size: 14px;
}
.sidebar-container h5 {
  color: #a3a3a3;
  padding-bottom: 1em;
}
.sidebar-container h5 a {
  color: #a3a3a3 !important;
  text-decoration: none;
}
.sidebar-container a {
  color: #bfbfbf !important;
}
.sidebar-container a:hover,
.sidebar-container a:active {
  color: #0085a1 !important;
}
.sidebar-container .tags a {
  border-color: #bfbfbf;
}
.sidebar-container .tags a:hover,
.sidebar-container .tags a:active {
  border-color: #0085a1;
}
.sidebar-container .short-about img {
  width: 80%;
  display: block;
  border-radius: 5px;
  margin-bottom: 20px;
}
.sidebar-container .short-about p {
  margin-top: 0px;
  margin-bottom: 20px;
}
.sidebar-container .short-about .list-inline > li {
  padding-left: 0px;
}
.catalog-container {
  padding: 0px;
}
.side-catalog {
  display: block;
  overflow: auto;
  height: 100%;
  padding-bottom: 40px;
  width: 195px;
}
.side-catalog.fixed {
  position: fixed;
  top: -21px;
}
.side-catalog.fold .catalog-toggle::before {
  content: "+";
}
.side-catalog.fold .catalog-body {
  display: none;
}
.side-catalog .catalog-toggle::before {
  content: "−";
  position: relative;
  margin-right: 5px;
  bottom: 1px;
}
.side-catalog .catalog-body {
  position: relative;
  list-style: none;
  height: auto;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 5px;
  text-indent: 0;
}
.side-catalog .catalog-body li {
  position: relative;
  list-style: none;
}
.side-catalog .catalog-body li a {
  padding-left: 10px;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side-catalog .catalog-body .h1_nav,
.side-catalog .catalog-body .h2_nav {
  margin-left: 0;
  font-size: 13px;
  font-weight: bold;
}
.side-catalog .catalog-body .h3_nav {
  margin-left: 6px;
  font-size: 13px;
  font-weight: bold;
}
.side-catalog .catalog-body .h4_nav {
  margin-left: 12px;
  font-size: 12px;
}
.side-catalog .catalog-body .h4_nav a {
  max-width: 170px;
}
.side-catalog .catalog-body .h5_nav .h6_nav {
  margin-left: 18px;
  font-size: 12px;
}
.side-catalog .catalog-body .h5_nav .h6_nav a {
  max-width: 170px;
}
.side-catalog .catalog-body .active {
  border-radius: 4px;
  background-color: #f5f5f5;
}
.side-catalog .catalog-body .active a {
  color: #0085a1 !important;
}
@media (max-width: 1200px) {
  .side-catalog {
    display: none;
  }
}
/*
  Please note this CSS is currently in   prototype form. We'll implement a cleaned up version in Web Starter Kit.
*/
.paper-snackbar {
  transition-property: opacity, bottom, left, right, width, margin, border-radius;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  /*font-family: RobotoDraft;*/
  font-size: 14px;
  min-height: 14px;
  background-color: #323232;
  background-color: #0085a1;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  line-height: 22px;
  padding: 18px 24px;
  bottom: 0px;
  opacity: 0;
}
@media (min-width: 640px) {
  .paper-snackbar {
    /*
    Desktop:
      Single-line snackbar height: 48 dp tall
      Minimum width: 288 dp
      Maximum width: 568 dp
      2 dp rounded corner
      Text: Roboto Regular 14 sp
      Action button: Roboto Medium 14 sp, all-caps text
      Default background fill: #323232 100%
    */
    min-width: 288px;
    max-width: 568px;
    display: inline-flex;
    border-radius: 2px;
    margin: 24px;
    bottom: -100px;
  }
}
@media (max-width: 640px) {
  .paper-snackbar {
    /*
  Mobile:
    Single-line snackbar height: 48 dp
    Multi-line snackbar height: 80 dp
    Text: Roboto Regular 14 sp
    Action button: Roboto Medium 14 sp, all-caps text
    Default background fill: #323232 100%
  */
    left: 0px;
    right: 0px;
  }
}
.paper-snackbar .action {
  background: inherit;
  display: inline-block;
  border: none;
  font-size: inherit;
  text-transform: uppercase;
  color: #ffeb3b;
  margin: 0px 0px 0px 24px;
  padding: 0px;
  min-width: min-content;
  outline: 0px;
}
/* Everything from here down is actually just for the demo - the material buttons and card, and various other pieces of styling */
/* Variables */
/* Buttons */
.paper-button {
  position: relative;
  padding: 4px 0;
  margin: 1em;
  width: 160px;
  overflow: hidden;
  user-select: none;
  color: #000;
  text-transform: uppercase;
  border-radius: 3px;
  outline-color: #a3a3a3;
}
.paper-button:hover {
  cursor: pointer;
}
.paper-button button,
.paper-button input[type="submit"] {
  background: inherit;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  /*font-family: 'Roboto';*/
  font-size: 1em;
  color: #000;
  text-transform: uppercase;
}
.paper-button.colored,
.paper-button.colored button {
  color: #4285f4;
}
.paper-button.raised-button.colored {
  background-color: #4285f4;
}
.paper-button .raised-button {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.paper-button.raised-button.colored {
  background: #4285f4;
  color: #fff;
}
.paper-button[disabled] {
  background-color: #eaeaea !important;
  color: #a8a8a8 !important;
  cursor: auto;
}
.paper-button:hover {
  background-color: #eaeaea;
}
.paper-button.raised-button.colored:hover {
  background-color: #3367d6;
}
button.paper-button {
  border: 0;
  /*font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;*/
  font-size: 1em;
  line-height: 25px;
  background-color: #fff;
}
.paper-button input[type="submit"] {
  outline-color: #a3a3a3;
}
.paper-button.colored.raised-button input[type="submit"] {
  color: #fff;
}
/** Shadows **/
.paper-shadow-animated.paper-shadow {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.paper-shadow-top-z-1 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.paper-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.paper-shadow-top-z-2 {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.paper-shadow-bottom-z-2 {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.paper-shadow-top-z-3 {
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.paper-shadow-bottom-z-3 {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
.paper-shadow-top-z-4 {
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
/** Card **/
.card {
  background: white;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 16px;
  border-radius: 2px;
}
.highlight,
pre.highlight {
  background: #282c34;
  color: #abb2bf;
}
.highlight pre {
  background: #282c34;
}
.highlight .hll {
  background: #282c34;
}
.highlight .c {
  color: #5c6370;
  font-style: italic;
}
.highlight .err {
  color: #960050;
  background-color: #1e0010;
}
.language-coq .highlight .err {
  background-color: transparent;
}
.highlight .k,
.language-coq .highlight .err {
  color: #c678dd;
}
.highlight .l {
  color: #98c379;
}
.highlight .n {
  color: #abb2bf;
}
.highlight .o {
  color: #abb2bf;
}
.highlight .p {
  color: #abb2bf;
}
.highlight .cm {
  color: #5c6370;
  font-style: italic;
}
.highlight .cp {
  color: #5c6370;
  font-style: italic;
}
.highlight .c1 {
  color: #5c6370;
  font-style: italic;
}
.highlight .cs {
  color: #5c6370;
  font-style: italic;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gs {
  font-weight: 700;
}
.highlight .kc {
  color: #c678dd;
}
.highlight .kd {
  color: #c678dd;
}
.highlight .kn {
  color: #c678dd;
}
.highlight .kp {
  color: #c678dd;
}
.highlight .kr {
  color: #c678dd;
}
.highlight .kt {
  color: #c678dd;
}
.highlight .ld {
  color: #98c379;
}
.highlight .m {
  color: #d19a66;
}
.highlight .s {
  color: #98c379;
}
.highlight .na {
  color: #d19a66;
}
.highlight .nb {
  color: #e5c07b;
}
.highlight .nc {
  color: #e5c07b;
}
.highlight .no {
  color: #e5c07b;
}
.highlight .nd {
  color: #e5c07b;
}
.highlight .ni {
  color: #e5c07b;
}
.highlight .ne {
  color: #e5c07b;
}
.highlight .nf {
  color: #abb2bf;
}
.highlight .nl {
  color: #e5c07b;
}
.highlight .nn {
  color: #abb2bf;
}
.highlight .nx {
  color: #abb2bf;
}
.highlight .py {
  color: #e5c07b;
}
.highlight .nt {
  color: #e06c75;
}
.highlight .nv {
  color: #e5c07b;
}
.highlight .ow {
  font-weight: 700;
}
.highlight .w {
  color: #f8f8f2;
}
.highlight .mf {
  color: #d19a66;
}
.highlight .mh {
  color: #d19a66;
}
.highlight .mi {
  color: #d19a66;
}
.highlight .mo {
  color: #d19a66;
}
.highlight .sb {
  color: #98c379;
}
.highlight .sc {
  color: #98c379;
}
.highlight .sd {
  color: #98c379;
}
.highlight .s2 {
  color: #98c379;
}
.highlight .se {
  color: #98c379;
}
.highlight .sh {
  color: #98c379;
}
.highlight .si {
  color: #98c379;
}
.highlight .sx {
  color: #98c379;
}
.highlight .sr {
  color: #56b6c2;
}
.highlight .s1 {
  color: #98c379;
}
.highlight .ss {
  color: #56b6c2;
}
.highlight .bp {
  color: #e5c07b;
}
.highlight .vc {
  color: #e5c07b;
}
.highlight .vg {
  color: #e5c07b;
}
.highlight .vi {
  color: #e06c75;
}
.highlight .il {
  color: #d19a66;
}
.highlight .gu {
  color: #75715e;
}
.highlight .gd {
  color: #f92672;
}
.highlight .gi {
  color: #a6e22e;
}
.highlighter-rouge .highlight {
  margin-bottom: 10px;
  border-radius: 6px;
}
.highlighter-rouge .highlight pre {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  word-wrap: normal;
}
.highlighter-rouge .highlight .rouge-table .rouge-gutter,
.highlighter-rouge .highlight .rouge-table .rouge-code {
  border: 0 !important;
}
.highlighter-rouge .highlight .rouge-code pre {
  color: #abb2bf;
}
.highlighter-rouge .highlight .table-responsive {
  margin: 0px;
  border: 0px;
}
.highlighter-rouge .highlight .table {
  margin: 0px;
  table-layout: fixed;
}
.highlighter-rouge .highlight table > tbody > tr > td {
  margin: 0;
  border: 0;
  padding: 0;
}
.highlighter-rouge .highlight table > tbody > tr > td > pre {
  padding: 14px;
}
.highlighter-rouge .highlight td.rouge-gutter {
  width: 56px;
}
.highlighter-rouge .highlight .lineno {
  text-align: right;
  border-radius: 0px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
  .highlighter-rouge .highlight {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0px;
  }
  .highlighter-rouge .highlight td.rouge-gutter {
    width: 36px;
  }
  .highlighter-rouge .highlight table > tbody > tr > td > pre {
    padding: 14px 10px;
  }
}
.search-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 0;
}
.search-page.search-active {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1, 1);
  -ms-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
}
.search-page.search-active .search-main {
  opacity: 1;
}
.search-page .search-main {
  padding-top: 80px;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
}
.search-page .search-main .row,
.search-page .search-main .row > div {
  height: 100%;
}
.search-page .search-icon-close-container {
  position: absolute;
  z-index: 1;
  padding: 16px;
  top: 0;
  right: 2px;
}
.search-page .search-icon-close-container i {
  font-size: 20px;
}
.search-page #search-input {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 30px;
  font-weight: bold;
  color: #404040;
}
@media only screen and (min-width: 768px) {
  .search-page #search-input {
    margin-left: 20px;
  }
}
.search-page #search-results {
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}
.search-icon a,
.search-icon-close {
  cursor: pointer;
  font-size: 30px;
  color: #311e3e;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.search-icon a:hover,
.search-icon-close:hover {
  opacity: 0.8;
}
.search-icon,
.search-icon-close {
  font-size: 16px;
}
body {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  color: #404040;
  overflow-x: hidden;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p {
  margin: 30px 0;
}
@media screen and (max-width: 768px) {
  p {
    margin: 25px 0;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  line-height: 1.1;
  font-weight: bold;
}
h4 {
  font-size: 21px;
}
a {
  color: #404040;
}
a:hover,
a:focus {
  color: #0085a1;
}
a img:hover,
a img:focus {
  cursor: zoom-in;
}
article {
  overflow: hidden;
}
blockquote {
  color: gray;
  font-style: italic;
  font-size: 0.95em;
  margin: 20px 0 20px;
}
blockquote p {
  margin: 0;
}
small.img-hint {
  display: block;
  margin-top: -20px;
  text-align: center;
}
br + small.img-hint {
  margin-top: -40px;
}
img.shadow {
  box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
}
select {
  -webkit-appearance: none;
  margin-top: 15px;
  color: #337ab7;
  border-color: #337ab7;
  padding: 0em 0.4em;
  background: white;
}
select.sel-lang {
  min-height: 28px;
  font-size: 14px;
}
table {
  margin-top: 10px;
}
table.table > tbody th,
table.table > thead th,
table.table > tbody td,
table.table > thead td {
  border: 1px solid #eee !important;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    border: 0;
  }
}
hr.small {
  max-width: 100px;
  margin: 15px auto;
  border-width: 4px;
  border-color: white;
}
pre,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}
pre code {
  display: block;
  width: auto;
  white-space: pre;
  word-wrap: normal;
}
code,
kbd,
pre,
samp {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
}
.postlist-container {
  margin-bottom: 15px;
}
.post-container a {
  color: #337ab7;
}
.post-container a:hover,
.post-container a:focus {
  color: #0085a1;
}
.post-container h1,
.post-container h2,
.post-container h3,
.post-container h4,
.post-container h5,
.post-container h6 {
  margin: 50px 0 20px;
  line-height: 1.4;
}
.post-container h1 + p,
.post-container h2 + p,
.post-container h3 + p,
.post-container h4 + p,
.post-container h5 + p,
.post-container h6 + p {
  margin-top: 20px;
}
.post-container h2::before {
  content: " ";
  display: block;
  border-bottom: 1px solid #ececec;
  margin-top: 44px;
  margin-bottom: 30px;
}
.post-container h4 {
  font-size: 22px;
  font-weight: 600;
  color: gray;
}
.post-container h4 + p {
  margin-top: 10px;
}
.post-container h5,
.post-container h6 {
  font-size: 20px;
  font-weight: 600;
  color: gray;
}
.post-container h5 + p,
.post-container h6 + p {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .post-container h1 {
    font-size: 30px;
  }
  .post-container h2 {
    font-size: 22px;
  }
  .post-container h3 {
    font-size: 20px;
  }
  .post-container h4 {
    font-size: 19px;
  }
  .post-container h5,
  .post-container h6 {
    font-size: 18px;
  }
}
.post-container ul,
.post-container ol {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .post-container ul,
  .post-container ol {
    padding-left: 30px;
  }
}
@media screen and (max-width: 500px) {
  .post-container ul,
  .post-container ol {
    padding-left: 20px;
  }
}
.post-container ol ol,
.post-container ol ul,
.post-container ul ol,
.post-container ul ul {
  margin-bottom: 5px;
}
.post-container li p {
  margin: 0;
  margin-bottom: 5px;
}
.post-container li h1,
.post-container li h2,
.post-container li h3,
.post-container li h4,
.post-container li h5,
.post-container li h6 {
  line-height: 2;
  margin-top: 20px;
}
.post-container .pager li {
  width: 48%;
}
.post-container .pager li.next {
  float: right;
}
.post-container .pager li.previous {
  float: left;
}
.post-container .pager li > a {
  width: 100%;
}
.post-container .pager li > a > span {
  color: #a3a3a3;
  font-weight: normal;
  letter-spacing: 0.5px;
}
.post-container .anchorjs-link {
  position: absolute;
  text-decoration: none !important;
}
@media only screen and (max-width: 767px) {
  /**
   * Layout
   * Since V1.6 we use absolute positioning to prevent to expand container-fluid
   * which would cover tags. A absolute positioning make a new layer.
   */
  .navbar-default .navbar-collapse {
    position: absolute;
    right: 0;
    border: none;
    background: white;
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
    border-radius: 2px;
    width: 170px;
  }
  /**
   * Animation
   * Navbar animation inspired by Material Design.
   */
  #site_navbar {
    /**
     * Sharable code and 'out' function
     */
    opacity: 0;
    transform: scaleX(0);
    transform-origin: top right;
    transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: top right;
    -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    /**
     *'In' Animation
     */
  }
  #site_navbar a {
    font-size: 13px;
    line-height: 28px;
  }
  #site_navbar .navbar-collapse {
    height: 0px;
    transform: scaleY(0);
    transform-origin: top right;
    transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
    -webkit-transform: scaleY(0);
    -webkit-transform-origin: top right;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
  }
  #site_navbar li {
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #site_navbar.in {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: 1;
    transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #site_navbar.in .navbar-collapse {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #site_navbar.in li {
    opacity: 1;
    transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
    -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
  }
}
.navbar-custom {
  background: none;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.navbar-custom .navbar-brand {
  font-weight: 800;
  color: white;
  height: 56px;
  line-height: 25px;
}
.navbar-custom .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.8);
}
.navbar-custom .nav li a {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.navbar-custom .nav li a:active {
  background: rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .navbar-custom {
    background: transparent;
    border-bottom: 1px solid transparent;
  }
  .navbar-custom body {
    font-size: 20px;
  }
  .navbar-custom .navbar-brand {
    color: white;
    padding: 20px;
    line-height: 20px;
  }
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a {
    color: white;
    padding: 20px;
  }
  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a:active {
    background: none;
  }
}
.navbar-custom.invert .navbar-toggle:active {
  background-color: rgba(0, 0, 0, 0.05);
}
.navbar-custom.invert .navbar-toggle .icon-bar {
  background-color: #404040;
}
.navbar-custom.invert .navbar-brand {
  color: #404040;
}
.navbar-custom.invert .navbar-brand:hover,
.navbar-custom.invert .navbar-brand:focus {
  color: #0085a1;
}
.navbar-custom.invert .nav li a {
  color: #404040;
}
.navbar-custom.invert .nav li a:hover,
.navbar-custom.invert .nav li a:focus {
  color: #0085a1;
}
@media only screen and (min-width: 1170px) {
  .navbar-custom {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -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);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .navbar-custom.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: -61px;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #f2f2f2;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .navbar-custom.is-fixed .navbar-brand {
    color: #404040;
  }
  .navbar-custom.is-fixed .navbar-brand:hover,
  .navbar-custom.is-fixed .navbar-brand:focus {
    color: #0085a1;
  }
  .navbar-custom.is-fixed .nav li a {
    color: #404040;
  }
  .navbar-custom.is-fixed .nav li a:hover,
  .navbar-custom.is-fixed .nav li a:focus {
    color: #0085a1;
  }
  .navbar-custom.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.intro-header {
  background: no-repeat center center;
  background-color: #a3a3a3;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-bottom: 0px;
}
.intro-header.style-text {
  background: none;
}
.intro-header.style-text .site-heading,
.intro-header.style-text .post-heading,
.intro-header.style-text .page-heading {
  padding: 85px 0 20px;
  color: #404040;
}
.intro-header.style-text .site-heading .subheading,
.intro-header.style-text .post-heading .subheading,
.intro-header.style-text .page-heading .subheading {
  margin-bottom: 15px;
}
.intro-header.style-text .tags a,
.intro-header.style-text .tags .tag {
  border-color: #404040;
  color: #404040;
}
.intro-header.style-text .tags a:hover,
.intro-header.style-text .tags .tag:hover,
.intro-header.style-text .tags a:active,
.intro-header.style-text .tags .tag:active {
  background-color: rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 768px) {
  .intro-header {
    margin-bottom: 20px;
    /* response on desktop */
  }
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
  padding: 85px 0 55px;
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading,
  .intro-header .post-heading,
  .intro-header .page-heading {
    padding: 150px 0;
  }
}
.intro-header .site-heading {
  padding: 95px 0 70px;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading {
    padding: 150px 0;
  }
}
.intro-header .site-heading,
.intro-header .page-heading {
  text-align: center;
}
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 50px;
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 18px;
  line-height: 1.1;
  display: block;
  font-weight: 300;
  margin: 10px 0 0;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading h1,
  .intro-header .page-heading h1 {
    font-size: 80px;
  }
}
.intro-header .post-heading h1 {
  font-size: 30px;
  margin-bottom: 24px;
}
.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
  line-height: 1.1;
  display: block;
}
.intro-header .post-heading .subheading {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 17px;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 30px;
  margin-top: -5px;
}
.intro-header .post-heading .meta {
  font-family: 'Lora', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
}
.intro-header .post-heading .meta a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .post-heading h1 {
    font-size: 55px;
  }
  .intro-header .post-heading .subheading {
    font-size: 30px;
  }
  .intro-header .post-heading .meta {
    font-size: 20px;
  }
}
.intro-header .header-img-credit {
  position: absolute;
  bottom: 6px;
  right: 9px;
  color: white;
  opacity: 0.3;
  font-size: 10px;
  z-index: 1;
}
.intro-header .header-img-credit a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .header-img-credit {
    font-size: 12px;
    bottom: 10px;
    right: 15px;
  }
}
.post-preview > a {
  color: #404040;
}
.post-preview > a:hover,
.post-preview > a:focus {
  text-decoration: none;
  color: #0085a1;
}
.post-preview > a > .post-title {
  font-size: 21px;
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 8px;
}
.post-preview > a > .post-subtitle {
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  margin-bottom: 10px;
}
.post-preview > .post-meta {
  font-family: 'Lora', 'Times New Roman', serif;
  color: #a3a3a3;
  font-size: 16px;
  font-style: italic;
  margin-top: 0;
}
.post-preview > .post-meta > a {
  text-decoration: none;
  color: #404040;
}
.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
  color: #0085a1;
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .post-preview > a > .post-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .post-preview > a > .post-subtitle {
    font-size: 16px;
  }
  .post-preview .post-meta {
    font-size: 18px;
  }
}
.post-content-preview {
  font-size: 13px;
  font-style: italic;
  color: #a3a3a3;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post-content-preview:hover {
  color: #0085a1;
}
@media only screen and (min-width: 768px) {
  .post-content-preview {
    font-size: 14px;
  }
}
.section-heading {
  font-size: 36px;
  margin-top: 60px;
  font-weight: 700;
}
.caption {
  text-align: center;
  font-size: 14px;
  padding: 10px;
  font-style: italic;
  margin: 0;
  display: block;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
footer {
  font-size: 20px;
  padding: 50px 0 65px;
}
footer .list-inline {
  margin: 0;
  padding: 0;
}
footer .copyright {
  font-size: 14px;
  text-align: center;
  margin-bottom: 0;
}
footer .copyright a {
  color: #337ab7;
}
footer .copyright a:hover,
footer .copyright a:focus {
  color: #0085a1;
}
.btn {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 15px 25px;
}
.btn-lg {
  font-size: 16px;
  padding: 25px 35px;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #0085a1;
  border: 1px solid #0085a1;
  color: white;
}
.pager {
  margin: 20px 0 0 !important;
  padding: 0px !important;
}
.pager li > a,
.pager li > span {
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px;
  background-color: white;
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .pager li > a,
  .pager li > span {
    font-size: 14px;
    padding: 15px 25px;
  }
}
.pager li > a {
  color: #404040;
}
.pager li > a:hover,
.pager li > a:focus {
  color: white;
  background-color: #0085a1;
  border: 1px solid #0085a1;
}
.pager li > a:hover > span,
.pager li > a:focus > span {
  color: white;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #a3a3a3;
  background-color: #404040;
  cursor: not-allowed;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #0085a1;
}
::selection {
  color: white;
  text-shadow: none;
  background: #0085a1;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
/* Tag styles. */
.d-none {
  display: none !important;
}
.tags {
  margin-bottom: -5px;
}
.tags.tags-sup a,
.tags.tags-sup .tag {
  padding: 0 10px 0 12px;
}
.tags a,
.tags .tag {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999em;
  padding: 0 10px 0 10px;
  color: #ffffff;
  line-height: 24px;
  font-size: 12px;
  text-decoration: none;
  margin: 0 1px;
  margin-bottom: 6px;
  cursor: pointer;
}
.tags a > sup,
.tags .tag > sup {
  margin-left: -2px;
  font-weight: 700;
}
.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
  color: white;
  border-color: white;
  background-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .tags a,
  .tags .tag {
    margin-right: 5px;
  }
}
#tag-heading {
  padding: 70px 0 60px;
}
@media only screen and (min-width: 768px) {
  #tag-heading {
    padding: 55px 0;
  }
}
#tag_cloud {
  margin: 20px 0 15px 0;
}
#tag_cloud a,
#tag_cloud .tag {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  font-size: 14px;
  border: none;
  line-height: 28px;
  margin: 0 2px;
  margin-bottom: 8px;
  background: #f3f5f5;
}
#tag_cloud a:hover,
#tag_cloud .tag:hover,
#tag_cloud a:active,
#tag_cloud .tag:active,
#tag_cloud a.focus,
#tag_cloud .tag.focus {
  background-color: #0085a1 !important;
}
#tag_cloud a.focus,
#tag_cloud .tag.focus {
  box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.239216) 0 1px 4px;
}
#tag_cloud a.tag-button--all,
#tag_cloud .tag.tag-button--all {
  font-weight: 700;
  color: #0085a1 !important;
}
#tag_cloud a.tag-button--all:hover,
#tag_cloud .tag.tag-button--all:hover,
#tag_cloud a.tag-button--all:active,
#tag_cloud .tag.tag-button--all:active,
#tag_cloud a.tag-button--all.focus,
#tag_cloud .tag.tag-button--all.focus {
  background-color: #e4e4e4 !important;
}
@media only screen and (min-width: 768px) {
  #tag_cloud {
    margin-bottom: 25px;
  }
}
.tag-comments {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .tag-comments {
    font-size: 14px;
  }
}
.t:first-child {
  margin-top: 0px;
}
.listing-seperator {
  color: #0085a1;
  font-size: 21px !important;
}
.listing-seperator::before {
  margin-right: 5px;
}
@media only screen and (min-width: 768px) {
  .listing-seperator {
    font-size: 20px !important;
    line-height: 2 !important;
  }
}
.mini-post-list {
  margin: 20px 0 15px 0;
}
.mini-post-list .tag-text {
  font-weight: 200;
  /* Adapted from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.mini-post-list .post-preview {
  position: relative;
}
.mini-post-list .post-preview > a .post-title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}
.mini-post-list .post-preview > a .post-subtitle {
  font-size: 13px;
}
.mini-post-list .post-preview > .post-meta {
  position: absolute;
  right: 5px;
  bottom: 0px;
  margin: 0px;
  font-size: 12px;
  line-height: 12px;
}
@media only screen and (min-width: 768px) {
  .mini-post-list .post-preview {
    margin-left: 20px;
  }
  .mini-post-list .post-preview > a > .post-title {
    font-size: 18px;
    line-height: 1.3;
  }
  .mini-post-list .post-preview > a > .post-subtitle {
    font-size: 14px;
  }
  .mini-post-list .post-preview .post-meta {
    font-size: 18px;
  }
}
/* Tags support End*/
/* Responsive images in post content. */
.post-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto 1.6em auto;
}
/* Interaction refinements. */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: inherit;
}
.navbar-default .navbar-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
/* Navbar button styles. */
.navbar-default .navbar-toggle {
  border-color: transparent;
  padding: 19px 16px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  border-radius: 50%;
}
.navbar-default .navbar-toggle .icon-bar {
  width: 18px;
  border-radius: 0px;
  background-color: white;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 3px;
}
.page-fullscreen .intro-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-fullscreen #tag-heading {
  position: fixed;
  left: 0;
  top: 0;
  padding-bottom: 150px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.page-fullscreen footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 20px;
  opacity: 0.6;
  color: #fff;
}
.page-fullscreen footer .copyright {
  color: #fff;
}
.page-fullscreen footer .copyright a {
  color: #fff;
}
.page-fullscreen footer .copyright a:hover {
  color: #ddd;
}
.MathJax_SVG_Display {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.no-scroll {
  overflow-y: hidden;
}
:root {
  --page-bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #f8f9fd;
  --text-strong: #182035;
  --text-body: #4d5870;
  --text-muted: #8791a7;
  --line: #e6eaf2;
  --accent: #6558d9;
  --accent-dark: #5045bb;
  --accent-soft: #eeecff;
  --shadow-sm: 0 8px 24px rgba(31, 40, 75, 0.07);
  --shadow-lg: 0 24px 70px rgba(31, 40, 75, 0.13);
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--page-bg);
  color: var(--text-body);
  line-height: 1.8;
  overflow-x: hidden;
}
a {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(101, 88, 217, 0.3);
  outline-offset: 3px;
}
.navbar-custom {
  top: 14px;
  left: 16px;
  width: calc(100% - 32px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(16, 25, 48, 0.22);
  box-shadow: 0 12px 32px rgba(8, 14, 35, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar-custom .container-fluid {
  max-width: 1180px;
  margin: 0 auto;
}
.navbar-custom .navbar-brand {
  font-size: 18px;
  letter-spacing: -0.02em;
}
.navbar-custom .nav li a {
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}
.navbar-custom.is-fixed {
  top: -76px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(230, 234, 242, 0.9) !important;
  box-shadow: var(--shadow-sm);
}
.navbar-custom.is-visible {
  transform: translate3d(0, 90px, 0) !important;
}
.intro-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0 0 36px 36px;
  box-shadow: 0 18px 55px rgba(20, 28, 55, 0.14);
  background-position: center 52%;
}
.intro-header .header-mask {
  z-index: 0;
  background: linear-gradient(135deg, rgba(13, 24, 55, 0.5), rgba(57, 32, 82, 0.28)) !important;
}
.intro-header .container,
.intro-header .header-img-credit {
  position: relative;
  z-index: 1;
}
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  letter-spacing: -0.045em;
  text-shadow: 0 6px 28px rgba(10, 17, 38, 0.28);
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.intro-header .post-heading h1 {
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-shadow: 0 6px 28px rgba(10, 17, 38, 0.26);
}
.intro-header .post-heading .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-style: normal;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}
.home-page .intro-header .site-heading {
  padding: 155px 0 145px;
}
.hero-kicker,
.feed-kicker {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.hero-kicker {
  margin-bottom: 18px;
  padding: 9px 13px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-page > .container {
  position: relative;
  z-index: 2;
  margin-top: -50px;
}
.home-page .postlist-container {
  margin-bottom: 0;
}
.home-feed {
  padding-bottom: 30px;
}
.feed-heading {
  margin-bottom: 22px;
  padding: 30px 34px;
  border: 1px solid rgba(230, 234, 242, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.feed-heading .feed-kicker {
  color: var(--accent);
}
.feed-heading h2 {
  margin: 12px 0 6px;
  color: var(--text-strong);
  font-size: 30px;
  letter-spacing: -0.03em;
}
.feed-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}
.home-feed .post-preview {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.home-feed .post-preview:hover {
  border-color: rgba(101, 88, 217, 0.28);
  box-shadow: 0 18px 44px rgba(31, 40, 75, 0.12);
  transform: translateY(-3px);
}
.home-feed .post-preview .post-card-link {
  display: block;
  padding: 28px 32px 25px;
  color: inherit;
  text-decoration: none;
}
.home-feed .post-preview .post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-feed .post-preview .post-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.home-feed .post-preview .post-title {
  margin: 15px 0 8px;
  color: var(--text-strong);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.home-feed .post-preview .post-subtitle {
  margin: 0 0 10px;
  color: #667087;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.home-feed .post-preview .post-content-preview {
  color: var(--text-muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.75;
}
.home-feed .post-preview .post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
}
.home-feed .post-preview .post-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 18px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.home-feed .post-preview:hover .post-card-arrow {
  background: #e1ddff;
  transform: translateX(3px);
}
article {
  overflow: visible;
}
.layout-post article {
  position: relative;
  z-index: 2;
  margin-top: -52px;
}
.layout-post .post-container {
  padding: 52px 62px 58px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.layout-post .post-container p,
.layout-post .post-container li {
  color: var(--text-body);
}
.layout-post .post-container p {
  margin: 24px 0;
  line-height: 1.9;
}
.layout-post .post-container h1,
.layout-post .post-container h2,
.layout-post .post-container h3,
.layout-post .post-container h4,
.layout-post .post-container h5,
.layout-post .post-container h6 {
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.layout-post .post-container h2 {
  margin-top: 58px;
  padding-top: 2px;
  font-size: 30px;
}
.layout-post .post-container h2::before {
  width: 38px;
  margin: 0 0 18px;
  border-bottom: 4px solid var(--accent);
  border-radius: 999px;
}
.layout-post .post-container h3 {
  margin-top: 42px;
  font-size: 24px;
}
.layout-post .post-container a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(101, 88, 217, 0.25);
  text-underline-offset: 3px;
}
.layout-post .post-container a:hover,
.layout-post .post-container a:focus {
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
}
.layout-post .post-container blockquote {
  margin: 30px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: var(--accent-soft);
  color: #5d5785;
  font-style: normal;
}
.layout-post .post-container img {
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(31, 40, 75, 0.12);
}
.layout-post .post-container code:not(pre code) {
  padding: 0.18em 0.4em;
  border: 1px solid #e4e0ff;
  border-radius: 6px;
  background: #f3f1ff;
  color: #5549bf;
  font-size: 0.88em;
}
.layout-post .post-container pre {
  margin: 28px 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(17, 23, 44, 0.13);
}
.layout-post .post-container table {
  border-radius: 12px;
  overflow: hidden;
}
.layout-post .side-catalog {
  width: 220px;
  max-height: calc(100vh - 120px);
  margin-left: 18px;
  padding: 18px 14px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.layout-post .side-catalog.fixed {
  top: 90px;
}
.layout-post .side-catalog > hr {
  display: none;
}
.layout-post .side-catalog h5 {
  margin: 0 8px 12px;
}
.layout-post .side-catalog .catalog-toggle {
  color: var(--text-strong);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.layout-post .side-catalog .catalog-body li a {
  color: var(--text-muted);
  border-radius: 8px;
  font-weight: 500;
}
.layout-post .side-catalog .catalog-body .active {
  background: var(--accent-soft);
}
.layout-post .side-catalog .catalog-body .active a {
  color: var(--accent) !important;
}
body.layout-page:not(.home-page) > .container {
  position: relative;
  z-index: 2;
  margin-top: -42px;
}
body.layout-page:not(.home-page) .postlist-container {
  padding: 38px 44px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.pager {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 26px !important;
}
.pager::before,
.pager::after {
  display: none;
}
.pager li {
  float: none;
}
.pager li > a,
.pager li > span {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  text-transform: none;
}
.pager li > a:hover,
.pager li > a:focus {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}
footer {
  margin-top: 45px;
  padding: 42px 0 46px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
}
footer .copyright {
  color: var(--text-muted);
  line-height: 1.8;
}
footer .footer-separator {
  margin: 0 7px;
  color: #c1c7d5;
}
footer .fa-stack {
  transition: transform 0.2s ease;
}
footer .fa-stack:hover {
  transform: translateY(-2px);
}
@media only screen and (max-width: 767px) {
  .navbar-custom {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    border-radius: 14px;
  }
  .navbar-custom .navbar-brand {
    padding-left: 14px;
  }
  .intro-header {
    border-radius: 0 0 24px 24px;
  }
  .intro-header .site-heading,
  .intro-header .post-heading,
  .intro-header .page-heading {
    padding: 105px 0 74px;
  }
  .intro-header .site-heading h1,
  .intro-header .page-heading h1 {
    font-size: 43px;
    line-height: 1.08;
  }
  .intro-header .site-heading .subheading,
  .intro-header .page-heading .subheading {
    margin-top: 12px;
    font-size: 16px;
  }
  .intro-header .post-heading h1 {
    font-size: 32px;
    line-height: 1.18;
  }
  .intro-header .post-heading .meta {
    font-size: 14px;
  }
  .home-page .intro-header .site-heading {
    padding: 112px 0 96px;
  }
  .hero-kicker {
    margin-bottom: 14px;
    padding: 8px 11px;
    font-size: 10px;
  }
  .home-page > .container {
    margin-top: -28px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .home-page > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .home-page .postlist-container,
  .home-page .sidebar-container {
    float: none;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .feed-heading {
    padding: 24px 22px;
    border-radius: 20px;
  }
  .feed-heading h2 {
    font-size: 26px;
  }
  .home-feed .post-preview {
    border-radius: 18px;
  }
  .home-feed .post-preview .post-card-link {
    padding: 23px 21px 20px;
  }
  .home-feed .post-preview .post-title {
    font-size: 22px;
  }
  .layout-post article {
    margin-top: -24px;
    padding: 0 12px;
  }
  .layout-post article > .container {
    padding-left: 0;
    padding-right: 0;
  }
  .layout-post article .row {
    margin-left: 0;
    margin-right: 0;
  }
  .layout-post .post-container {
    float: none;
    width: 100%;
    margin-left: 0;
    padding: 30px 21px 38px;
    border-radius: 20px;
  }
  .layout-post .post-container h2 {
    margin-top: 45px;
    font-size: 25px;
  }
  .layout-post .post-container h3 {
    font-size: 21px;
  }
  .layout-post .post-container table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layout-post .post-container :not(pre) > code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.layout-page:not(.home-page) > .container {
    margin-top: -24px;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.layout-page:not(.home-page) .postlist-container {
    padding: 28px 21px;
    border-radius: 20px;
  }
  .pager {
    flex-direction: column;
  }
  .pager li > a {
    width: 100%;
    text-align: left;
  }
  footer {
    margin-top: 28px;
    padding: 34px 15px 38px;
  }
  footer .footer-separator {
    display: none;
  }
  footer .copyright span + * {
    display: block;
  }
}