@charset "UTF-8";
/***************/
/* MEYER RESET */
/***************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul, dl {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --oc-gray-0: #f8f9fa;
  --oc-gray-1: #f1f3f5;
  --oc-gray-2: #e9ecef;
  --oc-gray-3: #dee2e6;
  --oc-gray-4: #ced4da;
  --oc-gray-5: #adb5bd;
  --oc-gray-6: #868e96;
  --oc-gray-7: #495057;
  --oc-gray-8: #343a40;
  --oc-gray-9: #212529;
  --oc-blue-0: #e8f7ff;
  --oc-blue-6: #228ae6;
  --oc-blue-8: #1b6ec2;
  --oc-indigo-9: #364fc7;
}

body.dark-mode {
  --oc-gray-0: #212529;
  --oc-gray-1: #343a40;
  --oc-gray-2: #495057;
  --oc-gray-3: #6c757d;
  --oc-gray-4: #adb5bd;
  --oc-gray-5: #ced4da;
  --oc-gray-6: #dee2e6;
  --oc-gray-7: #e9ecef;
  --oc-gray-8: #f1f3f5;
  --oc-gray-9: #f8f9fa;
  --oc-blue-0: #444d56;
  --oc-blue-6: #80acff;
  --oc-blue-8: #81a6ed;
  --oc-indigo-9: #9775fa;
}

/**************/
/* BASE RULES */
/**************/
html {
  font-size: 16px;
}

body {
  background-color: var(--oc-gray-0);
  font-family: "LXGW WenKai", "霞鹜文楷", "Noto Serif", "PT Serif", source-han-serif-sc, "Source Han Serif", "Songti SC", serif;
  color: var(--oc-gray-8);
  line-height: 1.7em;
}

.container {
  margin: 40px 0;
  max-width: 1000px;
  padding: 0 20px;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 2em;
  margin: 1em 0 16px;
  padding: 0;
}
@media screen and (max-width: 1200px) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.6em;
  }
}

h1, h2, h3, h5 {
  font-weight: bold;
}

h1 {
  font-size: 30px;
}
h1 a {
  color: inherit;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 20px;
  color: var(--oc-gray-6);
}

h6 {
  color: var(--oc-gray-6);
}

p {
  color: var(--oc-gray-8);
  margin: 1em 0;
}

a {
  color: var(--oc-blue-8);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
a:hover, a:active {
  color: var(--oc-blue-6);
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

hr {
  border: 0;
  border-top: 1px solid var(--oc-gray-2);
  margin: 1.5em auto;
}

ol > li:before, ul > li:before {
  position: absolute;
  width: 1.4em;
  margin-left: -1.4em;
  display: inline-block;
  box-sizing: border-box;
  text-align: right;
}

ul > li:before {
  content: "\2022";
  padding-right: 0.3em;
  font-family: inherit;
  font-size: 1.5em;
  line-height: 1.2;
}
ul > li > ul > li:before {
  content: "\25E6";
  font-size: 1.2em;
}
ul > li > ul > li > ul > li:before {
  content: "\25AA";
}

ol {
  counter-reset: section;
}
ol > li:before {
  counter-increment: section;
  content: counter(section) ".";
  padding-right: 0.3em;
  font-family: inherit;
  font-size: 1em;
  line-height: inherit;
}

ol > li, ul > li {
  margin: 0 auto 0.4em 1.4em;
  line-height: 1.55;
}
ol > li > ol,
ol > li > ul, ul > li > ol,
ul > li > ul {
  margin-top: 0.4em;
}

li > ol > li,
li > ul > li {
  font-size: 0.95em;
  margin: 0 auto 0.38em 1.33em;
}

dt {
  float: left;
  width: 180px;
  overflow: auto;
  clear: left;
  text-align: right;
  white-space: nowrap;
  font-weight: bold;
  margin-bottom: 0.4em;
}
@media screen and (max-width: 1200px) {
  dt {
    width: 120px;
  }
}

dd {
  margin-left: 200px;
  margin-bottom: 0.4em;
}
@media screen and (max-width: 1200px) {
  dd {
    margin-left: 140px;
  }
}

table {
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid var(--oc-gray-2);
  border-collapse: collapse;
}

td, th {
  padding: .25rem .5rem;
  border: 1px solid var(--oc-gray-2);
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: var(--oc-gray-1);
}

blockquote {
  font-weight: 300;
  padding: 0 0 0 1.4rem;
  margin: 0 2rem 1rem 0;
  border-left: 0.2em solid var(--oc-gray-3);
}
blockquote p {
  color: var(--oc-gray-6);
}
blockquote p:last-child {
  margin-bottom: 0;
}

a.footnote, .post p a.footnote, .post ol a.footnote, .post ul a.footnote {
  margin: 0 3px;
  padding: 0 2px;
  font-size: 14px;
  text-align: center;
  border: 1px solid var(--oc-gray-1);
  border-radius: 2px;
  -webkit-text-stroke: 0.25px;
  -webkit-transition: 0.2s ease-out all;
  text-decoration: none;
}
a.footnote:hover, .post p a.footnote:hover, .post ol a.footnote:hover, .post ul a.footnote:hover {
  background: var(--oc-gray-1);
}

.footnotes {
  border-top: 1px solid var(--oc-gray-2);
  font-size: 14px;
}

img {
  display: block;
  max-width: 100%;
  margin: 0 0 1em;
  border-radius: 5px;
}

.gmnoprint img {
  max-width: none;
}

::-moz-selection {
  background: var(--oc-gray-3);
}

::selection {
  background: var(--oc-gray-3);
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.center {
  text-align: center;
}
.center-image {
  margin: 0 auto;
  display: block;
}

.right {
  text-align: right;
}

/*********************/
/* LAYOUT / SECTIONS */
/*********************/
.wrapper-sidebar {
  width: 25%;
  -webkit-background-size: cover;
  background-size: cover;
  background-color: var(--oc-gray-0);
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 4;
  border-right: 1px solid var(--oc-gray-2);
}
@media screen and (max-width: 1200px) {
  .wrapper-sidebar {
    width: 100%;
    height: auto;
    padding-bottom: 24px;
    position: relative;
    border-bottom: 1px solid var(--oc-gray-2);
    border-right: 0;
  }
}

.sidebar {
  padding: 20px 0;
}
@media screen and (max-width: 1200px) {
  .sidebar {
    text-align: center;
  }
}

.site-info {
  text-align: center;
  margin: 100px auto 0;
}
@media screen and (max-width: 1200px) {
  .site-info {
    float: none;
    display: block;
    margin: 0 auto;
  }
}
.site-info .site-avatar {
  margin: 0 auto;
  display: block;
  max-width: 200px;
  max-height: 200px;
}
@media screen and (max-width: 1200px) {
  .site-info .site-avatar {
    max-width: 120px;
    max-height: 120px;
  }
}
.site-info .site-avatar img {
  display: inline-block;
  border-radius: 2px;
}

.site-name {
  margin: 0 auto;
  color: var(--oc-gray-8);
  cursor: pointer;
  font-family: "LXGW WenKai", "霞鹜文楷", "Noto Serif", "PT Serif", source-han-serif-sc, "Source Han Serif", "Songti SC", serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 1px;
}

.site-description {
  margin: 15px auto;
  color: var(--oc-gray-6);
  font-size: 16px;
}
@media screen and (max-width: 1200px) {
  .site-description {
    margin: 10px auto;
  }
}

.navlist {
  text-align: center;
}

nav {
  display: block;
  margin-top: 23px;
  font-family: "LXGW WenKai", "霞鹜文楷", "Noto Serif", "PT Serif", source-han-serif-sc, "Source Han Serif", "Songti SC", serif;
  font-weight: 500;
  font-size: 18px;
}
@media screen and (max-width: 1200px) {
  nav {
    margin-top: 9px;
    font-size: 16px;
  }
}
nav a {
  margin: 0 10px;
  text-align: right;
  font-weight: 300;
  letter-spacing: 1px;
}
@media screen and (max-width: 1200px) {
  nav a {
    margin: 0 10px;
    color: var(--oc-blue-8);
  }
}

.wrapper-content {
  float: right;
  width: 70%;
}
@media screen and (max-width: 1200px) {
  .wrapper-content {
    float: none;
    width: 100%;
  }
}

.posts .tag {
  display: inline;
  font-weight: 300;
  font-size: 14px;
}
.posts .tag li:before {
  content: '';
}
.posts .tag li {
  display: inline;
  margin: 0;
}
.posts .tag li > a {
  margin: 3px 3px 3px 0;
  padding: .5px 4px;
  color: var(--oc-gray-8);
  background-color: var(--oc-gray-2);
  border-radius: 3px;
}
.posts .tag li > a:hover {
  color: var(--oc-blue-8);
  background-color: var(--oc-blue-0);
}

.posts > .post {
  padding-bottom: 2em;
  border-bottom: 1px solid var(--oc-gray-2);
}

.posts > .post:last-child {
  padding-bottom: 1em;
  border-bottom: none;
}

.home-section {
  margin-bottom: 1.8em;
}

.home-section-title {
  margin: 0.2em 0 0.7em;
  font-size: 22px;
  font-weight: 600;
  color: var(--oc-gray-8);
  border-bottom: 1px solid var(--oc-gray-2);
  padding-bottom: 0.3em;
}

.date {
  font-weight: 300;
  font-size: 14px;
  color: var(--oc-gray-6);
  margin-right: 4px;
}

.post h1 {
  margin-bottom: .1em;
}
.post .comments {
  margin-top: 10px;
}
.post .read-more {
  font-size: 15px;
}

.toc {
  width: 320px;
  height: 100%;
  overflow-y: auto;
  right: 0%;
  position: fixed;
  z-index: 4;
  padding: 20px;
}
.toc:before {
  content: "目录";
  margin: 0 0 1em 1em;
  font-weight: 700;
  font-size: 1.2em;
  display: block;
  padding-bottom: 0.6em;
  border-bottom: 3px double var(--oc-gray-2);
}
.toc li:before {
  content: "";
}
@media screen and (max-width: 1200px) {
  .toc {
    display: none;
  }
}

@media screen and (max-width: 2200px) and (min-width: 1200px) {
  .withtoc {
    padding-right: 350px;
  }
}
.pagination {
  border-top: 1px solid var(--oc-gray-2);
  font-weight: 300;
  padding: 40px 0;
  width: 100%;
  display: inline-block;
}
@media screen and (max-width: 1200px) {
  .pagination {
    font-size: 14px;
    padding: 24px 0;
  }
}
.pagination > .prev {
  float: left;
  width: 50%;
}
.pagination > .prev a {
  color: var(--oc-gray-6);
  border: 1px solid var(--oc-gray-2);
  padding: 10px 20px;
  background: var(--oc-gray-0);
}
.pagination > .prev a:hover, .pagination > .prev a:focus {
  color: var(--oc-blue-6);
  border: 1px solid var(--oc-blue-6);
  background-color: var(--oc-blue-0);
}
.pagination > .next {
  float: right;
  text-align: right;
  width: 50%;
}
.pagination > .next a {
  color: var(--oc-gray-6);
  border: 1px solid var(--oc-gray-2);
  padding: 10px 20px;
  background: var(--oc-gray-0);
}
.pagination > .next a:hover, .pagination > .next a:focus {
  color: var(--oc-blue-6);
  border: 1px solid var(--oc-blue-6);
  background-color: var(--oc-blue-0);
}

.tags > .label > li:before {
  content: "";
}
.tags > .label > li {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  display: inline;
}
.tags > .label > li > a {
  display: inline-block;
  margin: 1px;
  color: var(--oc-gray-8);
  background-color: var(--oc-gray-2);
  border-radius: 3px;
}
.tags > .label > li > a:hover {
  background-color: var(--oc-blue-0);
}
.tags > .label > li > a span {
  float: left;
  padding: .5px 5px;
}
.tags > .label > li > a span.count {
  background-color: #868e961a;
  border-radius: 0 3px 3px 0;
}

.tags > .tag a {
  color: var(--oc-gray-8);
}
.tags > .tag time {
  color: var(--oc-gray-6);
  font-size: 14px;
  font-weight: 300;
  margin-left: 3px;
}

.wrapper-footer-desktop {
  margin-top: 50px;
  border-top: 1px solid var(--oc-gray-2);
  background-color: var(--oc-gray-0);
  position: absolute;
  clear: both;
  width: 100%;
  bottom: 0;
}
@media screen and (max-width: 1200px) {
  .wrapper-footer-desktop {
    display: none;
  }
}

.wrapper-footer-mobile {
  display: none;
}
@media screen and (max-width: 1200px) {
  .wrapper-footer-mobile {
    display: block;
    width: 100%;
    border-top: 1px solid var(--oc-gray-2);
    background-color: var(--oc-gray-0);
  }
}

footer {
  padding: 20px 0;
  text-align: center;
}
footer p {
  font-size: 14px;
  color: var(--oc-gray-6);
}
footer .svg-icon {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  text-align: center;
}
footer .svg-icon li {
  display: inline-block;
  margin: 10px;
}
footer .svg-icon svg {
  height: 20px;
  width: 20px;
  fill: var(--oc-gray-6);
}
footer .svg-icon svg:hover {
  fill: var(--oc-blue-6);
}
footer .svg-icon em {
  font-size: 18px;
  line-height: 1.5;
  margin-top: -.75em;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
}

.theme-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--oc-gray-0);
  border: 1px solid var(--oc-gray-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.theme-toggle:hover {
  background-color: var(--oc-blue-0);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--oc-gray-8);
}

/* 主题菜单样式 */
.theme-menu {
  position: fixed;
  bottom: 70px;
  left: 20px;
  z-index: 9998;
  background-color: var(--oc-gray-0);
  opacity: 0.7;
  border: 1px solid var(--divider-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

/* 选项样式 */
.theme-option {
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.theme-option:hover {
  background-color: var(--oc-blue-0);
}

.theme-option.active {
  background-color: var(--oc-blue-0);
  font-weight: bold;
}

body.dark-mode {
  --text-color: #e0e0e0;
  --divider-color: #333;
  background-color: var(--oc-gray-0);
  color: var(--oc-gray-8);
}
body.dark-mode a {
  color: var(--oc-blue-6);
}
body.dark-mode a:hover {
  color: var(--oc-blue-8);
}
body.dark-mode .wrapper-sidebar {
  background-color: var(--oc-gray-0);
  border-right-color: var(--oc-gray-2);
}
body.dark-mode .post, body.dark-mode .sidebar, body.dark-mode .search-container input {
  color: var(--text-color);
  border-color: var(--divider-color);
}
body.dark-mode table {
  border-color: var(--oc-gray-3);
}
body.dark-mode table tbody tr:nth-child(odd) td {
  background-color: var(--oc-gray-2);
}
body.dark-mode .gt-container {
  --gt-bg-color: var(--oc-gray-1);
  --gt-text-color: var(--oc-gray-8);
  color: var(--oc-gray-8);
}
body.dark-mode .gt-container .gt-header-textarea,
body.dark-mode .gt-container .gt-header-preview {
  background-color: var(--oc-gray-2);
  border-color: var(--oc-gray-3);
  color: var(--oc-gray-8);
}
body.dark-mode .gt-container .gt-comment-content {
  background-color: var(--oc-gray-2);
  border-color: var(--oc-gray-3);
  color: var(--oc-gray-8);
}
body.dark-mode .gt-container .gt-comment-content:hover {
  -webkit-box-shadow: 0 0.425em 1.75em 0 #949494;
  box-shadow: 0 0.425em 1.75em 0 #949494;
}
body.dark-mode .gt-container .gt-popup {
  background-color: var(--oc-gray-1);
  border-color: var(--oc-gray-3);
}
body.dark-mode .gt-container a.is--active {
  color: #ddd;
  cursor: default !important;
}
body.dark-mode .gt-container a.is--active:hover {
  color: #ddd;
}
body.dark-mode .gt-container .highlight pre,
body.dark-mode .gt-container pre {
  background-color: var(--oc-gray-1);
  color: var(--oc-gray-9);
}
body.dark-mode .highlight {
  background: var(--oc-gray-1) !important;
}
body.dark-mode .highlight .c, body.dark-mode .highlight .cm, body.dark-mode .highlight .c1, body.dark-mode .highlight .cs {
  color: #8a9199 !important;
}
body.dark-mode .highlight .k, body.dark-mode .highlight .o, body.dark-mode .highlight .kc, body.dark-mode .highlight .kd, body.dark-mode .highlight .kp, body.dark-mode .highlight .kr, body.dark-mode .highlight .kt {
  color: #ff7b72 !important;
}
body.dark-mode .highlight .s, body.dark-mode .highlight .sb, body.dark-mode .highlight .sc, body.dark-mode .highlight .sd, body.dark-mode .highlight .s2, body.dark-mode .highlight .se, body.dark-mode .highlight .sh, body.dark-mode .highlight .si, body.dark-mode .highlight .sx, body.dark-mode .highlight .s1, body.dark-mode .highlight .ss {
  color: #a5d6ff !important;
}
body.dark-mode .highlight .m, body.dark-mode .highlight .mf, body.dark-mode .highlight .mh, body.dark-mode .highlight .mi, body.dark-mode .highlight .mo, body.dark-mode .highlight .il {
  color: #79d3b3 !important;
}
body.dark-mode .highlight .na, body.dark-mode .highlight .nb, body.dark-mode .highlight .nc, body.dark-mode .highlight .no, body.dark-mode .highlight .ni, body.dark-mode .highlight .ne, body.dark-mode .highlight .nf, body.dark-mode .highlight .nn, body.dark-mode .highlight .nt, body.dark-mode .highlight .nv, body.dark-mode .highlight .vc, body.dark-mode .highlight .vg, body.dark-mode .highlight .vi {
  color: #d2a8ff !important;
}
body.dark-mode .highlight .err {
  color: #ffffff !important;
  background-color: #f87171 !important;
}
body.dark-mode .highlight .gd {
  color: #f87171 !important;
  background-color: #fee2e2 !important;
}
body.dark-mode .highlight .gi {
  color: #4ade80 !important;
  background-color: #dcfce7 !important;
}
body.dark-mode .markdown-body code {
  color: var(--oc-gray-0) !important;
}
body.dark-mode .markdown-body pre {
  color: var(--oc-gray-0) !important;
  border-color: var(--oc-gray-3) !important;
}
body.dark-mode .markdown-body .pl-c {
  color: #8a9199 !important;
}
body.dark-mode .markdown-body .pl-c1, body.dark-mode .markdown-body .pl-s .pl-v {
  color: #7dd3fc !important;
}
body.dark-mode .markdown-body .pl-e, body.dark-mode .markdown-body .pl-en {
  color: #d2a8ff !important;
}
body.dark-mode .markdown-body .pl-smi, body.dark-mode .markdown-body .pl-s .pl-s1 {
  color: #e5e7eb !important;
}
body.dark-mode .markdown-body .pl-ent {
  color: #a7f3d0 !important;
}
body.dark-mode .markdown-body .pl-k {
  color: #ff7b72 !important;
}
body.dark-mode .markdown-body .pl-s, body.dark-mode .markdown-body .pl-pds {
  color: #a5d6ff !important;
}
body.dark-mode .markdown-body .pl-v, body.dark-mode .markdown-body .pl-smw {
  color: #fcd34d !important;
}
body.dark-mode .markdown-body .pl-bu {
  color: #f87171 !important;
}
body.dark-mode .markdown-body .pl-ii {
  color: #111827 !important;
  background-color: #f87171 !important;
}
body.dark-mode .markdown-body .pl-c2 {
  color: #111827 !important;
  background-color: #f87171 !important;
}
body.dark-mode .markdown-body .pl-sr .pl-cce {
  color: #a7f3d0 !important;
}
body.dark-mode .markdown-body .pl-ml {
  color: #fbbf24 !important;
}
body.dark-mode .markdown-body .pl-mh, body.dark-mode .markdown-body .pl-mh .pl-en, body.dark-mode .markdown-body .pl-ms {
  color: #7dd3fc !important;
}
body.dark-mode .markdown-body .pl-mi {
  color: #e5e7eb !important;
}
body.dark-mode code.highlighter-rouge {
  background-color: var(--oc-gray-2) !important;
  color: #e5e7eb !important;
  border: 1px solid var(--oc-gray-3) !important;
}

pre, code {
  font-family: "Menlo", "Courier New", "Monaco", monospace;
}

code.highlighter-rouge {
  font-size: 90%;
  color: #364fc7;
  background-color: #f1f3f5;
  padding: .1em .2em;
  border-radius: 3px;
}

pre.highlight {
  font-size: 14px;
  padding: .45em .45em .45em .625em;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  margin: 1em 0;
  overflow: scroll;
}

.highlight {
  background: #f8f9fa;
}

.highlight .c {
  color: #999988;
  font-style: italic;
}

/* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

/* Error */
.highlight .k {
  font-weight: bold;
}

/* Keyword */
.highlight .o {
  font-weight: bold;
}

/* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic;
}

/* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: bold;
}

/* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic;
}

/* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}

/* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}

/* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa;
}

/* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic;
}

/* Generic.Emph */
.highlight .gr {
  color: #aa0000;
}

/* Generic.Error */
.highlight .gh {
  color: #999999;
}

/* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}

/* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa;
}

/* Generic.Inserted.Specific */
.highlight .go {
  color: #888888;
}

/* Generic.Output */
.highlight .gp {
  color: #555555;
}

/* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
}

/* Generic.Strong */
.highlight .gu {
  color: #aaaaaa;
}

/* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
}

/* Generic.Traceback */
.highlight .kc {
  font-weight: bold;
}

/* Keyword.Constant */
.highlight .kd {
  font-weight: bold;
}

/* Keyword.Declaration */
.highlight .kp {
  font-weight: bold;
}

/* Keyword.Pseudo */
.highlight .kr {
  font-weight: bold;
}

/* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: bold;
}

/* Keyword.Type */
.highlight .m {
  color: #009999;
}

/* Literal.Number */
.highlight .s {
  color: #d14;
}

/* Literal.String */
.highlight .na {
  color: #008080;
}

/* Name.Attribute */
.highlight .nb {
  color: #0086B3;
}

/* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: bold;
}

/* Name.Class */
.highlight .no {
  color: #008080;
}

/* Name.Constant */
.highlight .ni {
  color: #800080;
}

/* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: bold;
}

/* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: bold;
}

/* Name.Function */
.highlight .nn {
  color: #555555;
}

/* Name.Namespace */
.highlight .nt {
  color: #000080;
}

/* Name.Tag */
.highlight .nv {
  color: #008080;
}

/* Name.Variable */
.highlight .ow {
  font-weight: bold;
}

/* Operator.Word */
.highlight .w {
  color: #bbbbbb;
}

/* Text.Whitespace */
.highlight .mf {
  color: #009999;
}

/* Literal.Number.Float */
.highlight .mh {
  color: #009999;
}

/* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
}

/* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
}

/* Literal.Number.Oct */
.highlight .sb {
  color: #d14;
}

/* Literal.String.Backtick */
.highlight .sc {
  color: #d14;
}

/* Literal.String.Char */
.highlight .sd {
  color: #d14;
}

/* Literal.String.Doc */
.highlight .s2 {
  color: #d14;
}

/* Literal.String.Double */
.highlight .se {
  color: #d14;
}

/* Literal.String.Escape */
.highlight .sh {
  color: #d14;
}

/* Literal.String.Heredoc */
.highlight .si {
  color: #d14;
}

/* Literal.String.Interpol */
.highlight .sx {
  color: #d14;
}

/* Literal.String.Other */
.highlight .sr {
  color: #009926;
}

/* Literal.String.Regex */
.highlight .s1 {
  color: #d14;
}

/* Literal.String.Single */
.highlight .ss {
  color: #990073;
}

/* Literal.String.Symbol */
.highlight .bp {
  color: #999999;
}

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080;
}

/* Name.Variable.Class */
.highlight .vg {
  color: #008080;
}

/* Name.Variable.Global */
.highlight .vi {
  color: #008080;
}

/* Name.Variable.Instance */
.highlight .il {
  color: #009999;
}

/* Literal.Number.Integer.Long */
.right-rail {
  width: 330px;
  height: 100%;
  overflow-y: auto;
  right: 0;
  top: 0;
  position: fixed;
  z-index: 3;
  padding: 20px 18px;
  box-sizing: border-box;
  background-color: var(--oc-gray-0);
  border-left: 1px solid var(--oc-gray-2);
}
@media screen and (max-width: 1200px) {
  .right-rail {
    display: none;
  }
}

.blog-directory,
.post-toc {
  margin-bottom: 28px;
  font-size: 13px;
  line-height: 1.45em;
}
.blog-directory h2,
.post-toc h2 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--oc-gray-2);
  font-size: 18px;
  line-height: 1.4em;
}
.blog-directory details,
.post-toc details {
  margin: 6px 0 6px 10px;
}
.blog-directory summary,
.post-toc summary {
  cursor: pointer;
  color: var(--oc-gray-8);
  font-weight: 600;
  list-style-position: outside;
}
.blog-directory ul,
.post-toc ul {
  margin: 6px 0 10px 10px;
  padding: 0;
}
.blog-directory li,
.post-toc li {
  margin: 7px 0;
  padding-left: 0;
}
.blog-directory li:before,
.post-toc li:before {
  content: "";
}
.blog-directory a,
.post-toc a {
  color: var(--oc-gray-8);
}
.blog-directory time,
.post-toc time {
  display: block;
  color: var(--oc-gray-6);
  font-size: 11px;
  line-height: 1.3em;
}

.directory-count {
  color: var(--oc-gray-6);
  font-size: 11px;
  font-weight: 300;
  margin-left: 4px;
}

.directory-series li.active > a {
  color: var(--oc-blue-8);
  font-weight: 700;
}

.post-toc {
  border-top: 1px solid var(--oc-gray-2);
  padding-top: 20px;
}

.categories-page .blog-directory {
  font-size: 15px;
  padding: 26px 30px 30px;
  border: 1px solid rgba(73, 80, 87, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 8px 24px rgba(33, 37, 41, 0.06);
}
.categories-page .blog-directory details {
  margin-left: 0;
}

.blog-directory-heading {
  margin-top: 0;
}

.blog-directory--categories .blog-directory-heading {
  font-size: 26px;
}

@media screen and (min-width: 1400px) {
  .with-right-rail {
    padding-right: 360px;
    padding-left: 36px;
    box-sizing: border-box;
    transition: padding 0.26s ease;
  }

  body.rail-collapsed .with-right-rail {
    padding-right: 36px;
  }
}
@media screen and (max-width: 1399px) {
  .right-rail {
    display: none;
  }
}
.post-detail .tag {
  display: inline;
  font-weight: 300;
  font-size: 14px;
}
.post-detail .tag li:before {
  content: '';
}
.post-detail .tag li {
  display: inline;
  margin: 0;
}
.post-detail .tag li > a {
  margin: 3px 3px 3px 0;
  padding: .5px 4px;
  color: var(--oc-gray-8);
  background-color: var(--oc-gray-2);
  border-radius: 3px;
}
.post-detail .tag li > a:hover {
  color: var(--oc-blue-8);
  background-color: var(--oc-blue-0);
}

.post-header {
  margin: 32px 0 30px;
  padding: 24px 28px;
  border: 1px solid var(--oc-gray-2);
  border-radius: 12px;
  background-color: rgba(227, 231, 236, 0.12);
}

.post-detail,
.page {
  box-sizing: border-box;
  max-width: 1040px;
  padding: 0 24px;
}

.post-title {
  margin: 8px 0 16px;
  line-height: 1.35em;
}

.post-file {
  margin: 0;
  color: var(--oc-gray-6);
}
.post-file code {
  padding: 2px 6px;
  border-radius: 3px;
  background-color: var(--oc-gray-2);
  color: var(--oc-gray-8);
  font-size: 12px;
}

.post-meta {
  border-top: 1px solid var(--oc-gray-2);
  padding-top: 12px;
}

.post-meta-row,
.post-card-meta,
.post-card-tags {
  margin: 7px 0;
}

.meta-label {
  display: inline-block;
  min-width: 44px;
  margin-right: 8px;
  color: var(--oc-gray-6);
  font-size: 14px;
  font-weight: 700;
}

.category-path {
  color: var(--oc-gray-6);
  font-size: 14px;
}
.category-path span {
  margin-right: 4px;
}

.post-body {
  margin-top: 28px;
  padding: 26px 32px 32px;
  border: 1px solid rgba(73, 80, 87, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.content-heading {
  color: var(--oc-gray-6);
  font-size: 18px;
  line-height: 1.4em;
  margin-top: 0;
}

.post-card-meta {
  color: var(--oc-gray-6);
}

body,
.right-rail,
.tags,
.post-detail,
.posts {
  font-family: "LXGW WenKai", "霞鹜文楷", "Noto Serif", "PT Serif", source-han-serif-sc, "Source Han Serif", "Songti SC", serif;
}

.right-rail {
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.96), rgba(241, 243, 245, 0.92));
  border-left: 1px solid rgba(134, 142, 150, 0.18);
  box-shadow: -10px 0 28px rgba(33, 37, 41, 0.04);
}

.blog-directory {
  color: var(--oc-gray-8);
}
.blog-directory h2 {
  margin-bottom: 14px;
  color: var(--oc-gray-8);
  font-size: 20px;
  letter-spacing: 0.04em;
  border-bottom: 0;
}
.blog-directory h2:after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oc-blue-8), rgba(34, 138, 230, 0.12));
}
.blog-directory details {
  margin: 0;
}
.blog-directory summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.blog-directory summary:hover {
  background-color: rgba(34, 138, 230, 0.08);
  color: var(--oc-blue-8);
}
.blog-directory summary::-webkit-details-marker {
  color: rgba(134, 142, 150, 0.6);
}
.blog-directory .directory-primary {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(134, 142, 150, 0.16);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.55);
}
.blog-directory .directory-primary > summary {
  font-size: 15px;
  font-weight: 800;
}
.blog-directory .directory-secondary {
  margin: 5px 0 4px 10px;
  padding-left: 9px;
  border-left: 2px solid rgba(34, 138, 230, 0.16);
}
.blog-directory .directory-secondary > summary {
  font-size: 14px;
  font-weight: 700;
}
.blog-directory .directory-series {
  margin: 3px 0 2px 12px;
  padding-left: 9px;
  border-left: 1px dashed rgba(134, 142, 150, 0.28);
}
.blog-directory .directory-series > summary {
  color: var(--oc-gray-6);
  font-size: 13px;
  font-weight: 600;
}
.blog-directory .directory-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.blog-directory .directory-order {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--oc-blue-8);
  background-color: rgba(34, 138, 230, 0.1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.blog-directory .directory-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-directory .directory-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--oc-gray-6);
  background-color: rgba(134, 142, 150, 0.1);
  font-size: 11px;
  text-align: center;
}
.blog-directory ul {
  margin: 5px 0 9px 14px;
}
.blog-directory li {
  position: relative;
  margin: 4px 0;
  padding: 6px 7px 6px 10px;
  border-radius: 9px;
  transition: background-color 0.2s ease;
}
.blog-directory li:hover {
  background-color: rgba(34, 138, 230, 0.06);
}
.blog-directory li.active {
  background-color: rgba(34, 138, 230, 0.1);
}
.blog-directory li.active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background-color: var(--oc-blue-8);
}
.blog-directory .directory-post-link {
  display: block;
  color: var(--oc-gray-8);
  font-size: 12.5px;
  line-height: 1.45em;
}
.blog-directory li.active .directory-post-link {
  color: var(--oc-blue-8);
  font-weight: 700;
}
.blog-directory time {
  margin-top: 2px;
  color: rgba(134, 142, 150, 0.78);
  font-size: 10px;
}

.post-toc {
  margin-top: 22px;
  padding: 18px 10px 0;
  border-top: 1px solid rgba(134, 142, 150, 0.18);
}
.post-toc h2 {
  color: var(--oc-gray-8);
  font-size: 17px;
}

.tags-page .tag-cloud {
  margin: 24px 0 34px;
  padding: 22px;
  border: 1px solid rgba(134, 142, 150, 0.16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.92), rgba(241, 243, 245, 0.72));
}
.tags-page .tag-cloud h2 {
  margin: 0 0 16px;
  font-size: 22px;
}
.tags-page > .tag-cloud > .label,
.tags-page .label {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.tags-page > .tag-cloud > .label li,
.tags-page .label li {
  margin: 0;
}
.tags-page > .tag-cloud > .label li:before,
.tags-page .label li:before {
  content: "";
}
.tags-page > .tag-cloud > .label a,
.tags-page .label a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(134, 142, 150, 0.18);
  border-radius: 999px;
  color: var(--oc-gray-8);
  background-color: rgba(255, 255, 255, 0.68);
  box-shadow: 0 6px 18px rgba(33, 37, 41, 0.04);
}
.tags-page > .tag-cloud > .label a:hover,
.tags-page .label a:hover {
  border-color: rgba(34, 138, 230, 0.28);
  color: var(--oc-blue-8);
  background-color: rgba(34, 138, 230, 0.08);
}
.tags-page > .tag-cloud > .label .tag-name,
.tags-page .label .tag-name {
  font-weight: 700;
}
.tags-page > .tag-cloud > .label .count,
.tags-page .label .count {
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--oc-blue-8);
  background-color: rgba(34, 138, 230, 0.1);
  font-size: 12px;
  text-align: center;
}
.tags-page .tag-group {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid rgba(134, 142, 150, 0.14);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.5);
}
.tags-page .tag-group > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5em;
}
.tags-page .tag-group > h2 .count {
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--oc-blue-8);
  background-color: rgba(34, 138, 230, 0.1);
  font-size: 12px;
}
.tags-page .tag-group > .tag {
  margin: 0;
  padding: 0;
}
.tags-page .tag-group > .tag li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 9px 0;
  border-top: 1px dashed rgba(134, 142, 150, 0.2);
}
.tags-page .tag-group > .tag li:before {
  content: "";
}
.tags-page .tag-group > .tag a {
  color: var(--oc-gray-8);
  font-weight: 600;
}
.tags-page .tag-group > .tag time {
  flex: 0 0 auto;
  color: var(--oc-gray-6);
  font-size: 12px;
}

.post-title,
.posts > .post h1,
.tags-page h1,
.tags-page h2 {
  letter-spacing: 0.01em;
}

body.dark-mode .right-rail {
  background: linear-gradient(180deg, rgba(33, 37, 41, 0.98), rgba(52, 58, 64, 0.94));
  border-left-color: rgba(173, 181, 189, 0.16);
}
body.dark-mode .blog-directory .directory-primary,
body.dark-mode .tags-page .tag-cloud,
body.dark-mode .tags-page .tag-group {
  background-color: rgba(52, 58, 64, 0.52);
  border-color: rgba(173, 181, 189, 0.16);
}
body.dark-mode .blog-directory summary:hover,
body.dark-mode .blog-directory li:hover,
body.dark-mode .blog-directory li.active,
body.dark-mode .tags-page .label a:hover {
  background-color: rgba(128, 172, 255, 0.12);
}
body.dark-mode .blog-directory .directory-order,
body.dark-mode .tags-page .count,
body.dark-mode .tags-page .label .count,
body.dark-mode .tags-page .tag-group > h2 .count {
  background-color: rgba(128, 172, 255, 0.16);
}
body.dark-mode .tags-page .label a {
  background-color: rgba(52, 58, 64, 0.76);
  border-color: rgba(173, 181, 189, 0.16);
}

.hero-section {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.08), rgba(0, 242, 254, 0.05));
  border: 1px solid rgba(79, 172, 254, 0.2);
  border-radius: 12px;
  padding: 48px 40px;
  margin-bottom: 48px;
}
.hero-section h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #222;
}
.hero-section .hero-intro {
  font-size: 1.15em;
  line-height: 1.8;
  color: #666;
  margin-bottom: 32px;
}
.hero-section .tech-stack {
  margin-bottom: 32px;
}
.hero-section .tech-stack h3 {
  font-size: 1.3em;
  margin-bottom: 16px;
  color: #333;
}
.hero-section .tech-stack ul {
  list-style: none;
  padding: 0;
}
.hero-section .tech-stack ul li {
  padding: 8px 0;
  font-size: 1.05em;
  color: #666;
}
.hero-section .btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.1em;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-section .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
}

.featured-section {
  border-top: 2px solid rgba(134, 142, 150, 0.15);
  padding-top: 48px;
}
.featured-section > h2 {
  font-size: 2em;
  margin-bottom: 32px;
  color: #222;
  text-align: center;
}
.featured-section .featured-posts {
  display: grid;
  gap: 20px;
}
.featured-section .featured-post-card {
  background: rgba(248, 249, 250, 0.5);
  border: 1px solid rgba(134, 142, 150, 0.15);
  border-radius: 8px;
  padding: 24px 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.featured-section .featured-post-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(33, 37, 41, 0.08);
  border-color: rgba(79, 172, 254, 0.4);
}
.featured-section .featured-post-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.3em;
}
.featured-section .featured-post-card h3 a {
  color: #222;
  text-decoration: none;
}
.featured-section .featured-post-card h3 a:hover {
  color: #4facfe;
}
.featured-section .featured-post-card .post-meta .category-path {
  font-size: 0.95em;
  color: #666;
}
.featured-section .featured-post-card .post-meta .category-path span:not(:first-child) {
  margin-left: 4px;
}
.featured-section .featured-post-card .featured-post-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.2em;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2);
}
.featured-section .featured-post-card .featured-post-button:hover, .featured-section .featured-post-card .featured-post-button:active, .featured-section .featured-post-card .featured-post-button:focus {
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.3);
}
.featured-section .featured-post-card .featured-post-button:focus {
  outline: 2px solid rgba(79, 172, 254, 0.5);
  outline-offset: 2px;
}

body.dark-mode .hero-section {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.12), rgba(0, 242, 254, 0.08));
  border-color: rgba(79, 172, 254, 0.3);
}
body.dark-mode .hero-section h1 {
  color: #eee;
}
body.dark-mode .hero-section .hero-intro,
body.dark-mode .hero-section .tech-stack ul li {
  color: var(--oc-gray-8);
}
body.dark-mode .hero-section .tech-stack h3 {
  color: #eee;
}
body.dark-mode .featured-section {
  border-top-color: rgba(173, 181, 189, 0.2);
}
body.dark-mode .featured-section > h2 {
  color: #eee;
}
body.dark-mode .featured-section .featured-post-card {
  background: rgba(52, 58, 64, 0.5);
  border-color: rgba(173, 181, 189, 0.16);
}
body.dark-mode .featured-section .featured-post-card:hover {
  border-color: rgba(79, 172, 254, 0.5);
}
body.dark-mode .featured-section .featured-post-card h3 a {
  color: #eee;
}
body.dark-mode .featured-section .featured-post-card h3 a:hover {
  color: #80acff;
}
body.dark-mode .featured-section .featured-post-card .post-meta .category-path {
  color: var(--oc-gray-8);
}

body {
  background-image: radial-gradient(circle at 18% 16%, rgba(34, 138, 230, 0.16), transparent 28%), radial-gradient(circle at 86% 12%, rgba(112, 72, 232, 0.14), transparent 26%), linear-gradient(135deg, rgba(34, 138, 230, 0.065) 0 1px, transparent 1px 18px);
}

.site-bg-decoration {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background: linear-gradient(90deg, rgba(34, 138, 230, 0.085) 1px, transparent 1px), linear-gradient(0deg, rgba(34, 138, 230, 0.065) 1px, transparent 1px), radial-gradient(circle at 72% 78%, rgba(54, 79, 199, 0.13), transparent 34%);
  background-size: 56px 56px, 56px 56px, auto;
}

.wrapper-sidebar,
.wrapper-content,
.wrapper-footer-mobile,
.theme-toggle,
.theme-menu,
.back-to-top {
  z-index: 1;
}

hr,
.entry hr {
  height: 0;
  border: 0;
  border-top: 2px solid rgba(73, 80, 87, 0.34);
  margin: 2rem 0;
}

.entry table {
  display: block;
  width: max-content;
  min-width: min(68%, 100%);
  max-width: 100%;
  overflow-x: auto;
  margin: 1.4rem auto;
  border: 1px solid rgba(73, 80, 87, 0.42);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 26px rgba(33, 37, 41, 0.07);
}

.entry th,
.entry td {
  min-width: 90px;
  padding: 10px 12px;
  border-right: 1px solid rgba(73, 80, 87, 0.26);
  border-bottom: 1px solid rgba(73, 80, 87, 0.26);
  vertical-align: top;
}

.entry th {
  color: var(--oc-gray-8);
  background: rgba(34, 138, 230, 0.1);
  font-weight: 800;
}

.entry tr:nth-child(even) td {
  background: rgba(233, 236, 239, 0.42);
}

.entry .highlight,
.entry pre {
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(73, 80, 87, 0.34);
  border-radius: 12px;
}

.entry .highlight pre {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.entry pre {
  padding: 14px 16px;
  background: rgba(248, 249, 250, 0.94);
}

.entry code {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.entry pre code {
  white-space: pre;
  word-break: normal;
}

.post-header,
.post-body,
.page,
.hero-section,
.featured-section,
.tags-page .tag-cloud,
.tags-page .tag-group,
.categories-page .blog-directory-shell {
  border-color: rgba(73, 80, 87, 0.28) !important;
  box-shadow: 0 8px 24px rgba(33, 37, 41, 0.06);
}

.blog-directory-shell {
  display: block;
  margin-bottom: 28px;
}

.blog-directory-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(73, 80, 87, 0.24);
  border-radius: 12px;
  color: var(--oc-gray-8);
  background: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  font-weight: 800;
}

.blog-directory-toggle .toggle-hint {
  color: var(--oc-gray-6);
  font-size: 12px;
  font-weight: 400;
}

.blog-directory-shell:not([open]) .blog-directory {
  display: none;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 26px rgba(33, 37, 41, 0.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, right 0.26s ease, filter 0.2s ease;
  z-index: 20;
}
.back-to-top img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(33, 37, 41, 0.18));
}
.back-to-top:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top.visible:hover {
  transform: translateY(-2px);
}

@media screen and (min-width: 1400px) {
  .with-right-rail ~ .back-to-top {
    right: 378px;
  }

  body.rail-collapsed .with-right-rail ~ .back-to-top {
    right: 24px;
  }
}
.tag-cloud-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.tag-cloud-header h2 {
  color: var(--oc-gray-8);
}

.tag-cloud-header p {
  margin: 4px 0 0;
  color: var(--oc-gray-6);
}

.tag-search-label {
  color: var(--oc-gray-6);
  font-size: 12px;
  font-weight: 800;
}

.tag-search-input {
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(73, 80, 87, 0.32);
  border-radius: 12px;
  color: var(--oc-gray-8);
  background: rgba(255, 255, 255, 0.86);
  outline: none;
  box-sizing: border-box;
}

.tag-search-input:focus {
  border-color: rgba(34, 138, 230, 0.62);
  box-shadow: 0 0 0 3px rgba(34, 138, 230, 0.12);
}

body.dark-mode .site-bg-decoration {
  opacity: 0.46;
  background: linear-gradient(90deg, rgba(128, 172, 255, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(128, 172, 255, 0.065) 1px, transparent 1px), radial-gradient(circle at 72% 78%, rgba(128, 172, 255, 0.12), transparent 34%);
  background-size: 56px 56px, 56px 56px, auto;
}
body.dark-mode hr,
body.dark-mode .entry hr {
  border-top-color: rgba(173, 181, 189, 0.46);
}
body.dark-mode .entry table {
  border-color: rgba(173, 181, 189, 0.36);
  background: rgba(33, 37, 41, 0.86);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
body.dark-mode .entry th,
body.dark-mode .entry td {
  border-color: rgba(173, 181, 189, 0.24);
}
body.dark-mode .entry th {
  background: rgba(128, 172, 255, 0.16);
}
body.dark-mode .entry tr:nth-child(even) td {
  background: rgba(73, 80, 87, 0.42);
}
body.dark-mode .entry .highlight,
body.dark-mode .entry pre {
  border-color: rgba(173, 181, 189, 0.28);
}
body.dark-mode .entry pre {
  background: rgba(33, 37, 41, 0.94);
}
body.dark-mode .entry mark,
body.dark-mode .entry [style*="background-color"],
body.dark-mode .entry [style*="background"] {
  color: #212529 !important;
  background-color: #ffe066 !important;
}
body.dark-mode .blog-directory-toggle,
body.dark-mode .tag-search-input {
  border-color: rgba(173, 181, 189, 0.28);
  background: rgba(52, 58, 64, 0.78);
}
body.dark-mode .tags-page .tag-cloud,
body.dark-mode .tags-page .tag-group,
body.dark-mode .blog-directory .directory-primary {
  background-color: rgba(52, 58, 64, 0.74) !important;
  border-color: rgba(173, 181, 189, 0.28) !important;
}
body.dark-mode .tags-page .label a {
  color: var(--oc-gray-8);
  background-color: rgba(73, 80, 87, 0.82) !important;
  border-color: rgba(173, 181, 189, 0.28) !important;
}
body.dark-mode .tags-page .label a:hover {
  color: #80acff;
  background-color: rgba(128, 172, 255, 0.18) !important;
}
body.dark-mode .tag-cloud-header h2,
body.dark-mode .tags-page .tag-group > h2 {
  color: var(--oc-gray-8);
}
body.dark-mode .tag-search-input::placeholder {
  color: rgba(233, 236, 239, 0.62);
}

.rail-collapse-button {
  position: fixed;
  top: 50%;
  right: 330px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 7px;
  border: 1px solid rgba(73, 80, 87, 0.28);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  color: var(--oc-blue-8);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: -4px 6px 18px rgba(33, 37, 41, 0.14);
  cursor: pointer;
  z-index: 6;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  transition: right 0.26s ease, background-color 0.2s ease, color 0.2s ease;
}

.rail-collapse-button:hover {
  color: white;
  background: var(--oc-blue-8);
}

.right-rail {
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}

.right-rail.collapsed {
  transform: translateX(100%);
  box-shadow: none;
}

body.rail-collapsed .rail-collapse-button {
  right: 0;
}

@media screen and (max-width: 1399px) {
  .rail-collapse-button {
    display: none;
  }
}
.blog-directory li.active {
  scroll-margin: 80px;
}

.blog-directory-toggle:hover,
.tag-search-input:hover,
.featured-post-card:hover,
.post-detail .tag a:hover,
.navlist nav a:hover,
.back-to-top:hover {
  filter: brightness(1.03);
}

.navlist nav a {
  display: inline-block;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}

.navlist nav a:hover {
  border-bottom-color: rgba(34, 138, 230, 0.5);
  transform: translateY(-1px);
}

.back-to-top {
  font-size: 21px;
  line-height: 1;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(33, 37, 41, 0.24);
}

.tags-page .tag-cloud,
.tags-page .tag-group {
  border-color: rgba(73, 80, 87, 0.34) !important;
}

body.dark-mode .tag-cloud-header h2 {
  color: #f1f3f5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
body.dark-mode .tag-cloud-header p,
body.dark-mode .tag-search-label {
  color: rgba(233, 236, 239, 0.82);
}
body.dark-mode .tags-page .tag-cloud,
body.dark-mode .tags-page .tag-group {
  background: linear-gradient(135deg, rgba(33, 37, 41, 0.94), rgba(52, 58, 64, 0.88)) !important;
  border-color: rgba(173, 181, 189, 0.34) !important;
}
body.dark-mode .tag-search-input {
  color: #f1f3f5;
  background: rgba(33, 37, 41, 0.86);
}
body.dark-mode .rail-collapse-button {
  color: #80acff;
  background: rgba(33, 37, 41, 0.96);
  border-color: rgba(173, 181, 189, 0.28);
}
body.dark-mode .rail-collapse-button:hover {
  color: #212529;
  background: #80acff;
}

.zoomable-image {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zoomable-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(33, 37, 41, 0.16);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
}

.image-lightbox.visible {
  display: flex;
}

.image-lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  margin: 0;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  cursor: zoom-out;
}

.image-lightbox-close {
  position: fixed;
  right: 26px;
  top: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(33, 37, 41, 0.76);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.image-lightbox-close:hover {
  transform: rotate(8deg) scale(1.05);
  background: rgba(34, 138, 230, 0.88);
}

.post-toc-card {
  margin: 26px 0 0;
  padding: 18px 24px 20px;
  border: 1px solid rgba(73, 80, 87, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 24px rgba(33, 37, 41, 0.06);
}

.post-toc-card-title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5em;
}

.post-toc-card-body {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 14px;
  line-height: 1.55em;
}

.post-toc-card-body ul {
  margin: 4px 0 4px 16px;
  padding: 0;
}

.post-toc-card-body > ul {
  margin-left: 0;
}

.post-toc-card-body li {
  margin: 5px 0;
  padding-left: 0;
}

.post-toc-card-body li:before {
  content: "";
}

.post-toc-card-body a {
  color: var(--oc-gray-8);
}
.post-toc-card-body a:hover {
  color: var(--oc-blue-8);
}

@keyframes tocHeadingFlash {
  0% {
    background-color: rgba(34, 138, 230, 0.34);
  }
  60% {
    background-color: rgba(34, 138, 230, 0.16);
  }
  100% {
    background-color: transparent;
  }
}
.toc-flash {
  animation: tocHeadingFlash 1.5s ease-out;
  border-radius: 6px;
}

body.dark-mode .post-body,
body.dark-mode .post-toc-card {
  background: rgba(33, 37, 41, 0.6);
}
body.dark-mode .categories-page .blog-directory {
  background: rgba(33, 37, 41, 0.6);
  border-color: rgba(173, 181, 189, 0.28);
}