:root {
  color-scheme: dark;
  --accent: #7aa2f7;
  --accent-soft: #b7cbff;
  --accent-mid: #8bb8ff;
  --accent-strong: #5a7ecb;
  --accent-border-top: #94b6ff;
  --accent-border-mid: #6c8fd8;
  --accent-border-bottom: #4f6cb0;
  --text-primary: #c0caf5;
  --text-secondary: #a9b1d6;
  --text-muted: #7f89b0;
  --text-link: #7aa2f7;
  --text-link-hover: #bb9af7;
  --panel-border: #2f3b54;
  --panel-background: #1f2335;
  --main-background: #1a1b26;
  --content-background: #1f2335;
  --sidebar-background: #181b2b;
  --sidebar-gradient-start: #1d2235;
  --sidebar-divider: #29344f;
  --sidebar-link-hover: #24283b;
  --sidebar-bullet: #7aa2f7;
  --sidebar-active-glow: rgba(122, 162, 247, 0.18);
  --sidebar-pill-background: #2a3550;
  --wrap-background-top: #16161e;
  --wrap-background-bottom: #0f111a;
  --body-glow: rgba(122, 162, 247, 0.08);
  --main-shadow: rgba(1, 4, 12, 0.55);
  --tag-background: #24283b;
  --tag-border: #3b4261;
  --tag-hover-background: #2d3250;
  --active: #9ece6a;
  --active-text: #0f131d;
  --search-border: #36415f;
  --search-focus: #7aa2f7;
  --search-background: #151925;
  --search-focus-background: #1f2335;
  --search-inset-shadow: rgba(0, 0, 0, 0.28);
  --code-background: #24283b;
  --pre-background: #161925;
  --button-dark: #2d334d;
  --button-text: #eff4ff;
  --article-text: #c0caf5;
  --article-header-border: #303b57;
  --hr-color: #36415f;
  --heading-shadow: rgba(5, 8, 18, 0.55);
}

html[data-theme="classic"] {
  color-scheme: light;
  --accent: #ae432e;
  --accent-soft: #faa796;
  --accent-mid: #d06c57;
  --accent-strong: #943a28;
  --accent-border-top: #cb6652;
  --accent-border-mid: #b74d39;
  --accent-border-bottom: #803121;
  --text-primary: #444;
  --text-secondary: #555;
  --text-muted: #666;
  --text-link: #ae432e;
  --text-link-hover: #036;
  --panel-border: #bfbfbf;
  --panel-background: #f0f0f0;
  --main-background: #e6e6e6;
  --content-background: #fff;
  --sidebar-background: #ececec;
  --sidebar-gradient-start: #f4f4f4;
  --sidebar-divider: #d9d9d9;
  --sidebar-link-hover: #f7f7f7;
  --sidebar-bullet: #b86d58;
  --sidebar-active-glow: rgba(174, 67, 46, 0.14);
  --sidebar-pill-background: #d1d1d1;
  --wrap-background-top: #faf8f5;
  --wrap-background-bottom: #efe9e3;
  --body-glow: rgba(255, 255, 255, 0.85);
  --main-shadow: #787878;
  --tag-background: #eee;
  --tag-border: #ccc;
  --tag-hover-background: #e5e5e5;
  --active: #57a957;
  --active-text: #fff;
  --search-border: #ddd;
  --search-focus: #a6a6a6;
  --search-background: #fcfcfc;
  --search-focus-background: #ededed;
  --search-inset-shadow: #d9d9d9;
  --code-background: #f7f7f9;
  --pre-background: #f5f5f5;
  --button-dark: #4c4c4c;
  --button-text: #fce8e3;
  --article-text: #404040;
  --article-header-border: #e5e5e5;
  --hr-color: #ccc;
  --heading-shadow: #b3b3b3;
}

* { box-sizing: border-box; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, footer, header, nav, section { display: block; }
html { overflow-y: scroll; }
body {
  background:
    radial-gradient(circle at top, var(--body-glow), transparent 45%),
    linear-gradient(180deg, var(--wrap-background-top) 0%, var(--wrap-background-bottom) 100%);
  color: var(--text-primary);
  font-family: Verdana, Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; text-shadow: 0 1px 1px var(--heading-shadow); }
strong { font-weight: 700; }
small { font-size: 85%; }
ol, ul { margin: 0 0 1em 2.5em; }
nav ul, nav li { list-style: none; margin: 0; }
code, pre {
  font-family: "Courier New", Consolas, monospace;
  font-size: 13px;
}
code {
  padding: 1px 3px;
  margin: 0 2px;
  border-radius: 3px;
  background: var(--code-background);
}
pre {
  display: block;
  padding: 9.5px;
  margin-bottom: 15px;
  line-height: 20px;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: var(--pre-background);
}
input, select {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--search-border);
  border-radius: 3px;
  background: var(--search-background);
  color: var(--text-primary);
  box-shadow: 0 0 4px var(--search-inset-shadow) inset;
}
button,
.button-link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--accent-border-mid);
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--accent-soft), var(--accent-mid) 5%, var(--accent) 100%);
  color: var(--button-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}
.button-link:hover,
button:hover {
  text-decoration: none;
  background: linear-gradient(to bottom, var(--accent-soft), var(--accent-mid) 5%, var(--accent-strong) 100%);
}

#wrap {
  width: 1000px;
  margin: 20px auto;
}
#top {
  width: 100%;
  float: left;
}
.mobile-sidebar-toggle,
.mobile-sidebar-close,
.mobile-sidebar-header {
  display: none;
}
#logo {
  float: left;
  margin-top: 16px;
  color: var(--text-primary);
}
#logo:hover { color: var(--accent); text-decoration: none; }
.site-logo {
  display: block;
  width: 200px;
  max-width: min(42vw, 200px);
  height: auto;
  overflow: visible;
}
.site-logo__shadow,
.site-logo__wordmark { fill: currentColor; }
.site-logo__shadow { opacity: 0.18; transform: translate(0, 14px); }
.site-logo__underline { fill: url(#site-logo-accent); }
#navbar {
  float: right;
  margin-top: 40px;
}
#navbar li {
  position: relative;
  float: left;
  padding: 0 12px;
  font-size: 120%;
  font-weight: bold;
}
#navbar li a {
  display: inline-block;
  padding: 5px 0;
  color: var(--text-muted);
}
#navbar li.active a,
#navbar li a:hover {
  color: var(--accent);
  border-bottom: 4px solid var(--accent);
  text-decoration: none;
}
#main {
  width: 100%;
  float: left;
  margin: 20px 0;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 2px 2px 12px var(--main-shadow);
  background:
    linear-gradient(90deg, var(--sidebar-background) 0, var(--sidebar-background) 260px, var(--content-background) 260px, var(--content-background) 100%);
}
#sidebar {
  float: left;
  width: 260px;
  background: linear-gradient(180deg, var(--sidebar-gradient-start) 0%, var(--sidebar-background) 100%);
  border-right: 1px solid var(--sidebar-divider);
  font-size: 116%;
}
#sidebar section {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
#sidebar section > a,
#sidebar .sidebar-title {
  display: block;
  padding: 14px 18px 0;
  min-height: 27px;
  color: var(--text-primary);
  font-weight: bold;
}
#sidebar section.active > a,
#sidebar section.active .sidebar-title {
  color: var(--accent);
  background: linear-gradient(90deg, var(--sidebar-active-glow), transparent 72%);
  box-shadow: inset 3px 0 0 var(--accent);
}
#sidebar ul {
  margin: 0 30px 12px 40px;
}
#sidebar li {
  position: relative;
  margin: 4px 0;
  padding-left: 14px;
  list-style: none;
}
#sidebar li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--sidebar-bullet);
}
#sidebar li a {
  display: inline-block;
  padding: 3px 0;
  color: var(--text-primary);
  font-size: 86%;
}
#main-inner {
  min-height: 720px;
  margin-left: 260px;
  padding: 40px;
  background: var(--content-background);
}
#search-results[hidden] {
  display: none !important;
}
#content {
  margin-bottom: 35px;
}
#bottom {
  clear: both;
  padding-bottom: 28px;
}
#bottom p {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
#search-box {
  padding: 34px 24px;
}
.search-hint {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}
#search-form {
  display: grid;
  gap: 8px;
}
#query {
  min-height: 36px;
}
#search-form button {
  min-height: 36px;
  width: 100%;
  padding: 0 12px;
}
.search-highlight {
  padding: 0 2px;
  border-radius: 2px;
  background: rgba(122, 162, 247, 0.18);
  color: inherit;
}
.search-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.search-active-filters .tag-box {
  margin: 0;
}
.search-load-more {
  margin-top: 18px;
}
.theme-switcher {
  display: grid;
  gap: 6px;
  padding: 0 24px 24px;
}
.theme-switcher-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

article {
  color: var(--article-text);
  font-family: "Open Sans", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
}
article header {
  overflow: hidden;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--article-header-border);
}
article header h1,
article header h2 {
  float: left;
}
article header h1 { font-size: 198%; }
article header h2 { font-size: 168%; }
article section h2,
article section h3,
article section h4 {
  margin-top: 1em;
  margin-bottom: 0.8em;
}
article section p {
  margin-bottom: 0.67em;
  font-size: 107%;
  line-height: 160%;
}
article section ul li,
article section ol li { line-height: 180%; }
.page-header h1 { float: none; }
.page-header__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.page-header__title-row h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.page-header__count {
  color: var(--text-muted);
  font-size: 58%;
  font-weight: normal;
  text-shadow: none;
  white-space: nowrap;
}
.page-header p {
  margin-top: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}
.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 92%;
  line-height: 1.6;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  background: var(--tag-background);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nested {
  margin-bottom: 12px;
  padding: 15px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  background: var(--panel-background);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.28);
}
.nested header {
  margin-bottom: 10px;
  border-bottom-color: var(--panel-border);
}
.nested header h2,
.nested header h3 {
  color: var(--accent);
  float: none;
}
.post-list {
  margin: 0;
  list-style: none;
}
.post-list li {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--panel-border);
}
.post-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.post-card-stack {
  display: grid;
  gap: 12px;
}
.post-card-shell {
  margin-bottom: 0;
}
.post-card-shell header h2 {
  float: none;
}
.post-card-shell section p {
  margin-bottom: 0;
}
.post-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
.post-card-footer p {
  color: var(--text-muted);
  font-size: 93%;
}
.post-card-footer .tag-box {
  margin-top: 8px;
}
.tag-box--cloud a span {
  color: var(--text-muted);
}
.archive-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.terms-list__item,
.taxonomy-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.post-card__meta {
  color: var(--text-muted);
  font-size: 92%;
  line-height: 1.7;
}
.post-card__summary {
  margin-top: 8px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.tag-box {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.tag-box--single-row {
  align-items: center;
  gap: 8px;
}
.tag-box li {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.tag-box a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  background: var(--tag-background);
}
.tag-box a:hover {
  background: var(--tag-hover-background);
  text-decoration: none;
}
.pagination {
  margin: 24px 0;
}
.pagination-centered {
  display: flex;
  justify-content: center;
}
.pagination ul {
  display: inline-flex;
  margin: 0;
  list-style: none;
}
.pagination li {
  margin: 0;
}
.pagination a,
.pagination span {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--panel-border);
  border-left-width: 0;
  background: var(--panel-background);
}
.pagination li:first-child a,
.pagination li:first-child span {
  border-left-width: 1px;
}
#comments {
  margin-top: 16px;
}
#comments #giscus-container {
  min-height: 140px;
}

@media (max-width: 999px) {
  body.mobile-sidebar-open { overflow: hidden; }
  #wrap { width: 100%; margin: 0; }
  #top {
    float: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 14px 16px 2px;
  }
  .mobile-sidebar-toggle {
    position: absolute;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--code-background);
    color: var(--text-primary);
  }
  #logo {
    float: none;
    display: flex;
    justify-content: center;
    margin-top: 0;
  }
  .site-logo {
    width: min(148px, 52vw);
    max-width: 148px;
  }
  #navbar {
    float: none;
    margin-top: 0;
  }
  #navbar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px;
  }
  #navbar li {
    flex: 1 1 auto;
    float: none;
    min-width: max-content;
    padding: 0;
    font-size: 86%;
  }
  #navbar li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--code-background);
  }
  #navbar li.active a,
  #navbar li a:hover {
    border-bottom-width: 1px;
    background: var(--sidebar-link-hover);
  }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(82vw, 320px);
    height: 100vh;
    padding: 14px 0 24px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.34);
  }
  body.mobile-sidebar-open #sidebar { transform: translateX(0); }
  .mobile-sidebar-header {
    display: block;
    position: relative;
    margin: 0 12px 14px;
    padding: 16px 18px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    background: var(--panel-background);
  }
  .mobile-sidebar-close {
    display: inline-flex;
    position: absolute;
    top: 14px;
    right: 14px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--code-background);
    color: var(--text-primary);
  }
  #sidebar section {
    margin: 0 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    overflow: hidden;
  }
  #main {
    margin: 0;
    background: none;
    box-shadow: none;
  }
  #main-inner {
    margin-left: 0;
    padding: 20px;
    min-height: auto;
  }
  #search-form {
    display: grid;
  }
  .terms-list__item,
  .taxonomy-list li {
    display: block;
  }
  .archive-summary {
    align-items: flex-start;
  }
  .page-header__title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-header__title-row .button-link {
    align-self: flex-start;
  }
  #mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(9, 12, 20, 0.58);
    backdrop-filter: blur(2px);
  }
}