/* Setupwise — component stylesheet (Stepwise design system). Loaded after tokens.css.
   Class prefix: sw-. Every colour, length and radius is a token. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: var(--border-active) solid var(--accent); outline-offset: 2px; }
.sw-mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */
.sw-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.sw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: var(--space-12);
  padding-top: var(--space-12);
}
.sw-layout__main { min-width: 0; }
.sw-layout__side { border-left: var(--border-hairline) solid var(--line); padding-left: var(--space-8); }
.sw-sticky { position: sticky; top: calc(var(--header-height) + var(--space-6)); z-index: var(--z-sticky); }

/* ---------- Header ---------- */
.sw-header {
  height: var(--header-height);
  border-bottom: var(--border-hairline) solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-header);
}
.sw-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.sw-logo { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.sw-logo:hover { color: var(--ink); text-decoration: none; }
.sw-logo__mark { width: 14px; height: 14px; background: var(--ink); display: inline-block; }
.sw-nav { display: flex; gap: var(--space-1); }
.sw-nav a {
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-secondary);
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
}
.sw-nav a:hover { color: var(--ink); background: var(--bg-muted); text-decoration: none; }
.sw-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 calc(-1 * var(--border-active)) 0 var(--ink); border-radius: 0; }
.sw-header__tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.sw-search-trigger {
  display: flex; align-items: center; gap: var(--space-2);
  width: 220px; height: 32px; padding: 0 var(--space-2) 0 var(--space-3);
  border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink-muted); font: 400 13px/20px var(--font-sans); cursor: pointer;
}
.sw-search-trigger svg { width: 14px; height: 14px; flex: none; }
.sw-search-trigger:hover { border-color: var(--ink-secondary); }
.sw-search-trigger kbd { margin-left: auto; font: 500 11px/16px var(--font-mono); color: var(--ink-muted); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); padding: 0 5px; background: var(--bg-subtle); }
.sw-icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink-secondary); cursor: pointer;
}
.sw-icon-btn:hover { background: var(--bg-muted); color: var(--ink); }
.sw-icon-btn svg { width: 16px; height: 16px; }
.sw-menu-btn { display: none; }

/* Theme toggle: one button cycling Light -> Dark -> System.
   The icon follows <html data-theme-pref>, set before first paint. */
.sw-theme-toggle .icon { display: none; }
:root[data-theme-pref="light"] .sw-theme-toggle .is-light,
:root[data-theme-pref="dark"] .sw-theme-toggle .is-dark,
:root[data-theme-pref="system"] .sw-theme-toggle .is-system,
:root:not([data-theme-pref]) .sw-theme-toggle .is-system { display: inline-block; }

/* ---------- Buttons ---------- */
.sw-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  font: 500 14px/20px var(--font-sans);
  border-radius: var(--radius-sm); border: var(--border-hairline) solid transparent; cursor: pointer;
}
.sw-btn:hover { text-decoration: none; }
.sw-btn--primary { background: var(--accent); color: var(--on-accent); }
.sw-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.sw-btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-control); }
.sw-btn--secondary:hover { background: var(--bg-muted); color: var(--ink); }
.sw-btn--ghost { background: transparent; color: var(--ink-secondary); }
.sw-btn--ghost:hover { background: var(--bg-muted); color: var(--ink); }
.sw-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: 13px; }

/* ---------- Tag ---------- */
.sw-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sw-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: 500 12px/18px var(--font-mono); color: var(--ink-secondary);
  padding: 1px var(--space-2); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.sw-tag:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.sw-tag[aria-current="page"], .sw-tag--active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.sw-tag__count { color: var(--ink-muted); }
.sw-tag--tutorial { color: var(--accent); border-color: var(--accent); }

/* ---------- Meta & breadcrumb ---------- */
.sw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.sw-meta a { color: var(--ink-muted); }
.sw-meta a:hover { color: var(--accent); }
.sw-meta__sep { color: var(--line-control); }
.sw-meta time { font-family: var(--font-mono); }
.sw-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); list-style: none; margin: 0; padding: 0; }
.sw-breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-control); }
.sw-breadcrumb a { color: var(--ink-muted); }
.sw-breadcrumb a:hover { color: var(--accent); }
.sw-breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Post list (document-list style) ---------- */
.sw-post-list { list-style: none; margin: 0; padding: 0; }
.sw-post-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: var(--border-hairline) solid var(--line); }
.sw-post-item:first-child { padding-top: 0; }
.sw-post-item:last-child { padding-bottom: 0; border-bottom: 0; }
.sw-post-item__title { margin: 0 0 var(--space-2); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.sw-post-item__title a { color: var(--ink); }
.sw-post-item__title a:hover { color: var(--accent); text-decoration: none; }
.sw-post-item__excerpt { margin: 0 0 var(--space-3); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.sw-post-item__cover { width: 160px; height: 90px; object-fit: cover; border: var(--border-hairline) solid var(--line); display: block; background: var(--bg-muted); }

/* ---------- Post header ---------- */
.sw-post-header { padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: var(--border-hairline) solid var(--line); }
.sw-post-header__title { margin: var(--space-4) 0 var(--space-4); font-size: 32px; line-height: 40px; font-weight: 650; letter-spacing: -0.02em; }
.sw-post-header .sw-tags { margin-top: var(--space-4); }

/* ---------- Prose ---------- */
.sw-prose { max-width: var(--prose-max); font-size: 16px; line-height: 28px; color: var(--ink); }
.sw-prose p { margin: 0 0 var(--space-4); }
.sw-prose h2 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-12) 0 var(--space-4); }
.sw-prose h3 { font-size: 17px; line-height: 26px; font-weight: 600; margin: var(--space-8) 0 var(--space-3); }
.sw-prose code:not(pre code) {
  font-family: var(--font-mono); font-size: 0.875em; padding: 1px 5px;
  background: var(--bg-muted); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm);
}
.sw-prose ul, .sw-prose ol { padding-left: var(--space-6); margin: 0 0 var(--space-4); }

/* ---------- Step ---------- */
.sw-step {
  position: relative;
  padding: var(--space-8) 0 var(--space-2) 28px;
  border-top: var(--border-hairline) solid var(--line);
}
.sw-step::before { /* rail */
  content: ""; position: absolute; left: 5px; top: calc(var(--space-8) + 16px); bottom: 0;
  width: var(--border-hairline); background: var(--line);
}
.sw-step__label {
  position: relative; display: block;
  font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.sw-step__label::before { /* node */
  content: ""; position: absolute; left: -28px; top: 2px; width: 11px; height: 11px;
  border: var(--border-hairline) solid var(--accent); background: var(--bg);
}
.sw-step .sw-step__title { margin: var(--space-2) 0 var(--space-4); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.sw-step__body > :last-child { margin-bottom: var(--space-4); }
.sw-step.is-active::before { background: var(--accent); }
.sw-step.is-active .sw-step__label::before, .sw-step.is-done .sw-step__label::before { background: var(--accent); }
.sw-step.is-done::before { background: var(--accent); }
.sw-steps-end { border-top: var(--border-hairline) solid var(--line); }

/* ---------- Code block ---------- */
.sw-code { margin: 0 0 var(--space-6); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--bg-subtle); overflow: hidden; }
.sw-code__bar {
  display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-2) 0 var(--space-3);
  border-bottom: var(--border-hairline) solid var(--line); font: 400 12px/16px var(--font-mono);
}
.sw-code__file { color: var(--ink); font-weight: 500; }
.sw-code__lang { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sw-code__copy {
  margin-left: auto; height: 24px; padding: 0 var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1);
  font: 500 12px/16px var(--font-mono); color: var(--ink-secondary); background: transparent;
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-sm); cursor: pointer;
}
.sw-code__copy:hover { color: var(--ink); background: var(--bg-muted); border-color: var(--line); }
.sw-code__copy.is-copied { color: var(--tip); }
.sw-code__copy .icon-done, .sw-code__copy.is-copied .icon-idle { display: none; }
.sw-code__copy.is-copied .icon-done { display: inline-block; }
.sw-code__copy svg { width: 13px; height: 13px; }
.sw-code pre { margin: 0; padding: var(--space-3) 0; overflow-x: auto; font: 400 13.5px/22px var(--font-mono); color: var(--code-ink); }
.sw-code .line { display: block; padding: 0 var(--space-4); min-height: 22px; }
.sw-code .line.hl { background: var(--code-highlight); box-shadow: inset var(--border-active) 0 0 var(--accent); }
.sw-code--numbered .line { display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--space-4); }
.sw-code .ln { color: var(--ink-muted); text-align: right; user-select: none; }
.sw-code .prompt { color: var(--syn-comment); user-select: none; }
/* syntax (also mapped to highlight.js classes) */
.tk-k, .hljs-keyword, .hljs-built_in, .hljs-selector-tag { color: var(--syn-keyword); }
.tk-s, .hljs-string, .hljs-regexp { color: var(--syn-string); }
.tk-n, .hljs-number, .hljs-literal { color: var(--syn-number); }
.tk-f, .hljs-title, .hljs-section { color: var(--syn-function); }
.tk-a, .hljs-attr, .hljs-variable, .hljs-property, .hljs-params { color: var(--syn-attr); }
.tk-c, .hljs-comment, .hljs-meta { color: var(--syn-comment); font-style: italic; }

/* ---------- Callout ---------- */
.sw-callout { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4) var(--space-4); border: var(--border-hairline) solid var(--c-line, var(--note)); background: var(--c-bg, var(--note-soft)); border-radius: var(--radius-0); }
.sw-callout__label { display: flex; align-items: center; gap: var(--space-2); font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-line, var(--note)); margin-bottom: var(--space-2); }
.sw-callout__label svg { width: 14px; height: 14px; }
.sw-callout__body { font-size: 15px; line-height: 26px; color: var(--ink); }
.sw-callout__body > :last-child { margin-bottom: 0; }
.sw-callout--note    { --c-line: var(--note);    --c-bg: var(--note-soft); }
.sw-callout--info    { --c-line: var(--info);    --c-bg: var(--info-soft); }
.sw-callout--tip     { --c-line: var(--tip);     --c-bg: var(--tip-soft); }
.sw-callout--warning { --c-line: var(--warning); --c-bg: var(--warning-soft); }
.sw-callout--danger  { --c-line: var(--danger);  --c-bg: var(--danger-soft); }

/* ---------- TOC ---------- */
.sw-toc__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.sw-widget__title, .sw-toc__title { font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.sw-toc__count { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.sw-toc__progress { height: var(--border-active); background: var(--line); margin-bottom: var(--space-4); }
.sw-toc__progress > span { display: block; height: 100%; background: var(--accent); }
.sw-toc ol { list-style: none; margin: 0; padding: 0; }
.sw-toc li a {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: 5px var(--space-3); margin-left: calc(-1 * var(--border-hairline));
  border-left: var(--border-active) solid transparent;
  font-size: 14px; line-height: 22px; color: var(--ink-secondary);
}
.sw-toc li a:hover { color: var(--ink); text-decoration: none; }
.sw-toc li a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.sw-toc li.is-done a { color: var(--ink); }
.sw-toc > ol { border-left: var(--border-hairline) solid var(--line); }
.sw-toc ol ol a { padding-left: calc(var(--space-3) + var(--space-4)); font-size: 13px; }
.sw-toc__num { font: 500 12px/22px var(--font-mono); color: var(--ink-muted); }
.sw-toc li a.is-active .sw-toc__num { color: var(--accent); }
.sw-toc--plain li a { grid-template-columns: 1fr; }
.sw-toc-mobile { border: var(--border-hairline) solid var(--line); }
.sw-toc-mobile > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); font: 500 14px/20px var(--font-sans);
}
.sw-toc-mobile > summary::-webkit-details-marker { display: none; }
.sw-toc-mobile > summary .icon { width: 16px; height: 16px; color: var(--ink-muted); transition: transform .15s; }
.sw-toc-mobile[open] > summary .icon { transform: rotate(180deg); }
.sw-toc-mobile[open] > summary { border-bottom: var(--border-hairline) solid var(--line); }
.sw-toc-mobile .sw-toc { padding: var(--space-3) var(--space-4); }

/* ---------- Sidebar widgets ---------- */
.sw-widget { padding: var(--space-6) 0; }
.sw-widget:first-child { padding-top: 0; }
.sw-widget + .sw-widget { border-top: var(--border-hairline) solid var(--line); }
.sw-widget__title { margin-bottom: var(--space-4); }
.sw-widget p { margin: 0 0 var(--space-3); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.sw-site__name { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: var(--space-1); }
.sw-links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; }
.sw-links a { color: var(--ink-secondary); display: inline-flex; align-items: center; gap: var(--space-1); }
.sw-links a:hover { color: var(--accent); }
.sw-links svg { width: 14px; height: 14px; }
.sw-recent { list-style: none; margin: 0; padding: 0; }
.sw-recent li + li { margin-top: var(--space-3); }
.sw-recent a { display: block; font-size: 14px; line-height: 22px; color: var(--ink); }
.sw-recent a:hover { color: var(--accent); text-decoration: none; }
.sw-recent time { display: block; font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
.sw-ad { display: flex; flex-direction: column; gap: var(--space-1); }
.sw-ad__label { font: 500 11px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sw-ad__slot {
  width: 300px; max-width: 100%; aspect-ratio: 300 / 250; display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: var(--border-hairline) dashed var(--line-control); background: var(--bg-subtle); color: var(--ink-muted); font: 400 13px/20px var(--font-mono);
}

/* ---------- Archive (category / tag pages) ---------- */
.sw-archive__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.sw-archive__name { margin: 0; font-size: 22px; line-height: 30px; font-weight: 600; }
.sw-archive__count { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }
.sw-archive ul { list-style: none; margin: 0 0 var(--space-8); padding: 0; border-top: var(--border-hairline) solid var(--line); }
.sw-archive li { display: grid; grid-template-columns: 11ch 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line); }
.sw-archive time { font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }
.sw-archive li a { color: var(--ink); font-size: 15px; line-height: 24px; }
.sw-archive li a:hover { color: var(--accent); text-decoration: none; }

/* ---------- Search ---------- */
.sw-search { width: 100%; max-width: 600px; background: var(--bg); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); overflow: hidden; }
.sw-search__input { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-4); border-bottom: var(--border-hairline) solid var(--line); color: var(--ink-muted); }
.sw-search__input input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 15px/22px var(--font-sans); color: var(--ink); }
.sw-search__input svg { width: 16px; height: 16px; }
.sw-search__results { list-style: none; margin: 0; padding: var(--space-2); max-height: 420px; overflow: auto; }
.sw-search__result a { display: block; padding: var(--space-3); border-radius: var(--radius-sm); color: inherit; }
.sw-search__result a:hover, .sw-search__result.is-selected a { background: var(--bg-muted); text-decoration: none; }
.sw-search__title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.sw-search__excerpt { margin: 2px 0 var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-secondary); }
.sw-search mark { background: var(--accent-soft); color: var(--accent); padding: 0 1px; }
.sw-search__foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: var(--border-hairline) solid var(--line); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); background: var(--bg-subtle); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .sw-layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-width-tablet); gap: var(--space-8); }
  .sw-layout__side { padding-left: var(--space-6); }
  .sw-search-trigger { width: 160px; }
}
@media (max-width: 767px) {
  .sw-container { padding: 0 var(--space-4); }
  .sw-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); }
  .sw-layout__side { border-left: 0; padding-left: 0; border-top: var(--border-hairline) solid var(--line); padding-top: var(--space-6); }
  .sw-sticky { position: static; }
  .sw-nav, .sw-search-trigger { display: none; }
  .sw-menu-btn { display: inline-flex; }
  .sw-post-header__title { font-size: 26px; line-height: 34px; }
  .sw-post-item { grid-template-columns: minmax(0, 1fr); }
  .sw-post-item__cover { display: none; }
  .sw-archive li { grid-template-columns: 1fr; gap: 0; }
}

/* ======================================================================
   Theme layer: pieces the Hexo templates need beyond the component set.
   Same rules: tokens only, hairlines, no gradients, shadow only on overlays.
   ====================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}
body { min-height: 100vh; display: flex; flex-direction: column; }
.sw-page { flex: 1; }
.icon { display: inline-block; flex: none; vertical-align: middle; }
::selection { background: var(--accent-soft); color: var(--ink); }
button { font: inherit; color: inherit; }
.sw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sw-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--ink);
  border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-sm);
}
.sw-skip:focus { top: var(--space-2); }

.sw-layout--full { grid-template-columns: minmax(0, 1fr); }
.sw-layout--full .sw-prose { margin: 0 auto; }

/* ---------- Header extras ---------- */
.sw-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sw-nav a { white-space: nowrap; }
.sw-mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--header-height); z-index: var(--z-overlay);
  background: var(--bg); box-shadow: var(--shadow-popover); padding: var(--space-2) var(--space-4) var(--space-4);
}
.sw-mobile-menu[hidden] { display: none; }
.sw-mobile-menu nav { display: flex; flex-direction: column; }
.sw-mobile-menu nav a {
  display: block; padding: var(--space-3) 0; font: 500 15px/22px var(--font-sans); color: var(--ink-secondary);
  border-bottom: var(--border-hairline) solid var(--line);
}
.sw-mobile-menu nav a[aria-current="page"] { color: var(--ink); }
.sw-mobile-menu nav a:hover { color: var(--ink); text-decoration: none; }
.sw-mobile-menu .sw-btn { margin-top: var(--space-4); width: 100%; justify-content: flex-start; }
.sw-menu-btn .icon-x, .sw-menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.sw-menu-btn[aria-expanded="true"] .icon-x { display: inline-block; }

/* ---------- Prose extras ---------- */
.sw-prose a { text-underline-offset: 3px; }
.sw-prose h4 { font-size: 15px; line-height: 24px; font-weight: 600; margin: var(--space-6) 0 var(--space-2); }
.sw-prose h2:first-child, .sw-prose h3:first-child { margin-top: 0; }
.sw-prose .headerlink { display: none; }
.sw-prose li { margin: var(--space-1) 0; }
.sw-prose li > ul, .sw-prose li > ol { margin-bottom: 0; }
.sw-prose li::marker { color: var(--ink-muted); }
.sw-prose strong { font-weight: 600; }
.sw-prose hr { border: 0; border-top: var(--border-hairline) solid var(--line); margin: var(--space-8) 0; }
.sw-prose img, .sw-prose video { max-width: 100%; height: auto; display: block; margin: var(--space-6) auto; border: var(--border-hairline) solid var(--line); }
.sw-prose figure:not(.sw-code) { margin: 0 0 var(--space-6); }
.sw-prose figcaption:not(.sw-code__bar) { font-size: 13px; line-height: 20px; color: var(--ink-muted); text-align: center; margin-top: calc(-1 * var(--space-4)); }
.sw-prose blockquote {
  margin: 0 0 var(--space-6); padding: 0 0 0 var(--space-4);
  border-left: var(--border-hairline) solid var(--line-control); color: var(--ink-secondary);
}
.sw-prose blockquote > :last-child { margin-bottom: 0; }
.sw-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: 14px; line-height: 22px; display: block; overflow-x: auto; }
.sw-prose th, .sw-prose td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); text-align: left; vertical-align: top; }
.sw-prose th { font-weight: 600; border-bottom-color: var(--line-control); white-space: nowrap; }
.sw-prose kbd {
  font: 500 0.8em/1 var(--font-mono); padding: 2px 5px; color: var(--ink);
  border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-sm); background: var(--bg-subtle);
}
.sw-prose mark { background: var(--accent-soft); color: var(--ink); padding: 0 2px; }
.sw-prose dl dt { font-weight: 600; }
.sw-prose dl dd { margin: 0 0 var(--space-3) var(--space-6); }
.sw-prose details { margin: 0 0 var(--space-6); border: var(--border-hairline) solid var(--line); padding: var(--space-3) var(--space-4); }
.sw-prose details > summary { cursor: pointer; font-weight: 500; }
.sw-prose details[open] > summary { margin-bottom: var(--space-3); }
.sw-prose .sw-callout__body p:last-child { margin-bottom: 0; }
.sw-prose .sw-callout__body code:not(pre code) { background: var(--bg); }
.sw-prose .footnotes { font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.sw-code--bare pre { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.sw-code .line:empty::after { content: " "; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
.hljs-deletion { color: var(--danger); }
.hljs-addition { color: var(--tip); }
.hljs-name, .hljs-tag { color: var(--syn-keyword); }
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-type, .hljs-selector-class, .hljs-selector-id { color: var(--syn-number); }

/* Fallback for Hexo's {% codeblock %} tag output */
figure.highlight { margin: 0 0 var(--space-6); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--bg-subtle); overflow-x: auto; font: 400 13.5px/22px var(--font-mono); color: var(--code-ink); }
figure.highlight table { display: table; margin: 0; border: 0; width: auto; font: inherit; }
figure.highlight td { border: 0; padding: var(--space-3) var(--space-4); }
figure.highlight pre { margin: 0; }
figure.highlight .gutter { color: var(--ink-muted); text-align: right; user-select: none; padding-right: 0; }
figure.highlight figcaption { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); font: 400 12px/16px var(--font-mono); text-align: left; margin: 0; }

/* Steps: keep the anchor below the sticky header */
.sw-step, .sw-prose [id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.sw-step__label::before, .sw-step::before { transition: background-color .15s; }

.sw-breadcrumb { min-width: 0; }
.sw-breadcrumb [aria-current="page"] { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-breadcrumb li:last-child { flex: 1 1 0; display: flex; min-width: 0; }

/* ---------- Post footer ---------- */
.sw-post-footer { max-width: var(--prose-max); margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
.sw-post-footer__updated { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0 0 var(--space-6); }
.sw-post-footer__updated time { font-family: var(--font-mono); }
.sw-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.sw-post-nav a {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--line-control); border-radius: var(--radius-sm); color: var(--ink);
}
.sw-post-nav a:hover { background: var(--bg-muted); text-decoration: none; }
.sw-post-nav__dir { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sw-post-nav__dir .icon { width: 14px; height: 14px; }
.sw-post-nav__title { font-size: 14px; line-height: 22px; font-weight: 500; }
.sw-post-nav__next { text-align: right; grid-column: 2; }
.sw-post-nav__next .sw-post-nav__dir { justify-content: flex-end; }

/* ---------- Listing pages ---------- */
.sw-page-head { margin-bottom: var(--space-8); }
.sw-page-head__label { font: 600 12px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.sw-page-head__title { margin: 0; font-size: 32px; line-height: 40px; font-weight: 650; letter-spacing: -0.02em; }
.sw-page-head__desc { margin: var(--space-2) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.sw-post-item__title .sw-sticky-mark { font: 600 11px/16px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); vertical-align: middle; margin-right: var(--space-2); }
.sw-post-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-post-item__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-empty { padding: var(--space-12) 0; color: var(--ink-muted); font-size: 14px; }
.sw-archive li > span:empty { display: none; }
.sw-cat-tree { list-style: none; margin: 0 0 var(--space-8); padding: 0; border-top: var(--border-hairline) solid var(--line); }
.sw-cat-tree li { border-bottom: var(--border-hairline) solid var(--line); }
.sw-cat-tree a { display: flex; justify-content: space-between; padding: var(--space-3) 0; color: var(--ink); font-size: 15px; line-height: 24px; }
.sw-cat-tree a:hover { color: var(--accent); text-decoration: none; }
.sw-cat-tree .sw-tag__count { font: 500 13px/24px var(--font-mono); }
.sw-cat-tree ul { list-style: none; padding: 0 0 0 var(--space-6); margin: 0; }
.sw-cat-tree ul li:last-child { border-bottom: 0; }
.sw-cat-tree ul { border-top: var(--border-hairline) solid var(--line); }

/* ---------- Pagination ---------- */
.sw-pagination { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-6); }
.sw-pagination__info { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.sw-pagination .sw-btn .icon { width: 14px; height: 14px; }
.sw-pagination .sw-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.sw-pagination__more[hidden] { display: none; }

/* ---------- Sidebar extras ---------- */
.sw-sticky { max-height: calc(100vh - var(--header-height) - var(--space-6) * 2); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sw-widget--toc[hidden] { display: none; }
/* Post sidebar: the whole column sticks (ad pinned on top); only the TOC list
   shrinks and scrolls, with its scrollbar hidden. */
.sw-sticky--fit { display: flex; flex-direction: column; scrollbar-width: none; }
.sw-sticky--fit::-webkit-scrollbar { display: none; }
.sw-sticky--fit > .sw-widget { flex: none; }
.sw-sticky--fit > .sw-widget--toc { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sw-widget--toc .sw-toc { display: flex; flex-direction: column; min-height: 0; }
.sw-widget--toc .sw-toc > ol {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  border-left: 0; box-shadow: inset var(--border-hairline) 0 0 var(--line);
}
.sw-widget--toc .sw-toc > ol::-webkit-scrollbar { display: none; }
.sw-widget--toc .sw-toc li a { margin-left: 0; }
.sw-widget .sw-tags { gap: var(--space-2); }
.sw-cat-list { list-style: none; margin: 0; padding: 0; }
.sw-cat-list a { display: flex; justify-content: space-between; font-size: 14px; line-height: 22px; color: var(--ink-secondary); padding: 3px 0; }
.sw-cat-list a:hover { color: var(--accent); text-decoration: none; }
.sw-cat-list span { font: 500 12px/22px var(--font-mono); color: var(--ink-muted); }
.sw-ad__slot img { max-width: 100%; height: auto; display: block; }
.sw-ad__slot:has(img), .sw-ad__slot:has(ins), .sw-ad__slot--filled { border-style: solid; border-color: var(--line); background: transparent; aspect-ratio: auto; min-height: 0; }
.sw-toc-mobile { display: none; margin-bottom: var(--space-8); }

/* ---------- Search overlay ---------- */
.sw-search-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--space-4) var(--space-4);
  background: rgba(9, 9, 11, 0.4);
}
.sw-search-overlay[hidden] { display: none; }
.sw-search__input kbd { font: 500 11px/16px var(--font-mono); color: var(--ink-muted); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); padding: 0 5px; background: var(--bg-subtle); }
.sw-search__input input::-webkit-search-cancel-button { display: none; }
.sw-search__input button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.sw-search__empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: 14px; color: var(--ink-muted); }
.sw-search__results:empty { display: none; }
.sw-search__result .sw-meta { gap: var(--space-2); font-size: 12px; }

/* ---------- Footer ---------- */
.sw-footer { margin-top: var(--space-16); border-top: var(--border-hairline) solid var(--line); }
.sw-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.sw-footer a { color: var(--ink-muted); }
.sw-footer a:hover { color: var(--accent); }
.sw-footer__links { display: flex; gap: var(--space-4); }
.sw-footer__links a { display: inline-flex; align-items: center; gap: var(--space-1); }
.sw-footer__links .icon { width: 14px; height: 14px; }

.sw-back-top {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-sticky);
  background: var(--bg); border-color: var(--line-control);
}
.sw-back-top[hidden] { display: none; }

@media (max-width: 1023px) {
  .sw-header__inner { gap: var(--space-4); }
}
@media (max-width: 767px) {
  .sw-sticky { max-height: none; overflow: visible; }
  .sw-toc-mobile { display: block; }
  .sw-widget--toc { display: none; }
  .sw-page-head__title { font-size: 26px; line-height: 34px; }
  .sw-post-nav { grid-template-columns: 1fr; }
  .sw-post-nav__next { grid-column: 1; }
  .sw-step { padding-left: 24px; }
  .sw-step__label::before { left: -24px; }
  .sw-back-top { right: var(--space-4); bottom: var(--space-4); }
}
@media (min-width: 768px) {
  .sw-mobile-menu { display: none !important; }
}