/* ============================================================
   exdoubled's blog — redesign v0
   Terminal × 立绘点缀
   ============================================================ */

:root {
  /* dark (default) */
  --bg:           #0e0e11;
  --bg-2:         #15151a;
  --bg-3:         #1c1c22;
  --bg-4:         #25252c;
  --text:         #d4d4dc;
  --text-2:       #bebec6;
  --text-mute:    #8b8b95;
  --text-faint:   #5e5e68;
  --border:       rgba(255,255,255,.08);
  --border-2:     rgba(255,255,255,.04);
  --accent:       #BB6688;
  --accent-2:     #d27ba0;
  --accent-soft:  rgba(187,102,136,.12);
  --accent-line:  rgba(187,102,136,.30);
  --success:      #6FA48A;
  --warn:         #C7A86B;
  --info:         #6E8FB3;
  --danger:       #C56F7B;

  /* syntax (terminal palette) */
  --s-keyword:    #BB6688;
  --s-string:     #C7A86B;
  --s-number:     #6E8FB3;
  --s-comment:    #5e5e68;
  --s-fn:         #6FA48A;
  --s-type:       #d27ba0;

  --font-sans:    'Inter', 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  /* mono — put Chinese fallback EARLY so 中文 chars in mono use Source Han / PingFang, not the system mono */
  --font-mono:    'JetBrains Mono', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Inter', 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;

  --radius:      8px;
  --radius-sm:   2px;
  --content-w:   720px;
  --toc-w:       260px;
  --gap:         64px;

  --shadow-flat: 0 0 0 1px var(--border), 0 1px 0 rgba(255,255,255,.04);
}

/* ----- theme switch view-transition (circular reveal from toggle button) ----- */
@supports (view-transition-name: root) {
  html.theme-transitioning::view-transition-old(root),
  html.theme-transitioning::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  html.theme-transitioning::view-transition-old(root) {
    z-index: 1;
  }
  html.theme-transitioning::view-transition-new(root) {
    z-index: 2;
    animation: theme-reveal-clip .55s cubic-bezier(.4, 0, .2, 1) both;
  }
}
@keyframes theme-reveal-clip {
  from {
    clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 50%));
  }
  to {
    clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 50%) var(--theme-y, 50%));
  }
}
::view-transition-group(root) { animation-duration: .55s; }

html[data-theme="light"] {
  --bg:           #fafafa;
  --bg-2:         #f3f3f4;
  --bg-3:         #ebebec;
  --bg-4:         #e1e1e3;
  --text:         #1c1c20;
  --text-2:       #3a3a40;
  --text-mute:    #6a6a72;
  --text-faint:   #a8a8b0;
  --border:       rgba(0,0,0,.08);
  --border-2:     rgba(0,0,0,.04);
  --accent:       #BB6688;
  --accent-2:     #a04f72;
  --accent-soft:  rgba(187,102,136,.10);
  --accent-line:  rgba(187,102,136,.28);
  --shadow-flat:  0 0 0 1px var(--border), 0 1px 0 rgba(0,0,0,.02);
}

/* density */
html[data-density="compact"]      { --row-pad: .5rem; --section-pad: 2rem; }
html[data-density="comfortable"]  { --row-pad: .8rem; --section-pad: 3rem; }
html[data-density="spacious"]     { --row-pad: 1.1rem; --section-pad: 4rem; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter cv features + JetBrains Mono NL effect (no ligatures) */
  font-feature-settings: 'cv11', 'ss01', 'liga' 0, 'calt' 0;
  text-wrap: pretty;
}
/* explicitly enforce no-ligature on every mono usage */
.navbar-inner, .path-bar, .frontmatter, .cover-frame .cover-head,
.code-head, .code-body, .lines pre, .toc, .post-meta-foot,
.markdown code:not(pre code), .pn-card .label,
.home-banner .greeting, .home-banner .stats, .list-head,
.post-row .date, .post-row .meta-right, .post-row .tags,
.pagination, .archive-tabs, .archive-row .md, .archive-row .cat,
.tag-cloud a, .about-card .head, .about-card .info, .about-card .links a,
.about-content h2, .about-content .skills, .timeline,
.site-footer, .tweaks, .callout .tag-mono, .icon-btn,
.hero-anime .meta, .hero-anime .stat-line {
  font-feature-settings: 'liga' 0, 'calt' 0, 'zero' 1;
  font-variant-ligatures: none;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--accent-2); }

/* ----- noise overlay (very subtle film grain) ----- */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
html[data-theme="light"] body::before { opacity: .025; mix-blend-mode: multiply; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              background .25s ease, border-color .25s ease,
              box-shadow .25s ease, padding .25s ease;
  will-change: transform;
}
html[data-nav-hidden] .navbar { transform: translateY(-105%); }

/* anime hero: navbar fully transparent on top of image, becomes solid as user scrolls past hero */
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .brand .path,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .brand .prompt,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .nav-links a,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .nav-link-button,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .icon-btn {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .nav-links a[aria-current]::before,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .nav-link-group[data-active="true"] > .nav-link-button::before,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar .brand .cursor {
  background: var(--accent-2);
  color: var(--accent-2);
}
html[data-scrolled] .navbar {
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  border-bottom-color: var(--accent-line);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,.45);
}
html[data-theme="light"][data-scrolled] .navbar {
  box-shadow: 0 4px 24px -10px rgba(0,0,0,.10);
}
.navbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 13.5px;
  transition: padding .25s ease;
}
html[data-scrolled] .navbar-inner { padding: .55rem 1.5rem; }

/* mobile navbar: hide nav-links inline, use hamburger drawer */
.nav-burger {
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 14px;
}
.nav-burger:hover { color: var(--text); background: var(--bg-2); border-color: var(--border); }
@media (max-width: 720px) {
  .navbar-inner { padding: .7rem .9rem; gap: .5rem; }
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1rem 1rem;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  html[data-nav-open] .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links > a,
  .nav-links > .nav-link-group > .nav-link-button {
    width: 100%;
    justify-content: flex-start;
    padding: .65rem 0;
    border-bottom: 1px dashed var(--border);
  }
  .nav-links > a:last-child,
  .nav-links > .nav-link-group:last-child > .nav-link-button { border-bottom: none; }
  .nav-links > a[aria-current]::before,
  .nav-link-group[data-active="true"] > .nav-link-button::before { content: '> '; }
  .nav-actions { gap: 0; }
}

/* mini avatar — only revealed when scrolled, only when img is provided */
.nav-avatar {
  width: 0; height: 24px;
  border-radius: 50%;
  margin-right: 0;
  background: transparent;
  border: 1px solid transparent;
  flex-shrink: 0;
  opacity: 0;
  transition: width .3s ease, margin .3s ease, opacity .25s ease .05s, border-color .25s ease;
  position: relative; overflow: hidden;
}
.nav-avatar:has(img) { border-color: var(--accent-line); }
.nav-avatar:empty { display: none !important; }
html[data-scrolled] .nav-avatar:has(img) { width: 24px; margin-right: .55rem; opacity: 1; }

/* nav progress bar */
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .12s linear;
  opacity: 0;
}
html[data-scrolled] .nav-progress { opacity: 1; }
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--text); font-weight: 500;
}
.brand .prompt { color: var(--accent); }
.brand .path { color: var(--text-2); }
.brand .cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--accent); margin-left: 2px;
  animation: blink 1.05s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes blink { 50% { opacity: 0; } }

.nav-links { display: flex; gap: 1.4rem; align-items: center; color: var(--text-mute); }
.nav-links a,
.nav-link-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .15s;
}
.nav-link-button {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.nav-links > a:hover,
.nav-links > .nav-link-group > .nav-link-button:hover { color: var(--text); }
.nav-links > a[aria-current],
.nav-link-group[data-active="true"] > .nav-link-button { color: var(--text); }
.nav-links > a[aria-current]::before,
.nav-link-group[data-active="true"] > .nav-link-button::before {
  content: '> '; color: var(--accent); font-weight: 600;
}
.nav-submenu-toggle .fa-chevron-down { transition: transform .15s ease; }
.nav-link-group[data-open="true"] .nav-submenu-toggle .fa-chevron-down {
  transform: rotate(180deg);
}
.nav-actions { display: flex; gap: .5rem; align-items: center; }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute); cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: all .15s;
  font-family: var(--font-mono); font-size: 14px;
}
.icon-btn:hover { color: var(--text); background: var(--bg-2); border-color: var(--border); }

/* ============================================================
   PAGE LAYOUT — page swap
   ============================================================ */
.page { display: none; }
html[data-page="post"]      #page-post     { display: block; }
html[data-page="home"]      #page-home     { display: block; }
html[data-page="archive"]   #page-archive  { display: block; }
html[data-page="about"]     #page-about    { display: block; }
html[data-page="friends"]   #page-friends  { display: block; }
html[data-page="shuoshuo"]  #page-shuoshuo { display: block; }
html[data-page="404"]       #page-404      { display: block; }

.shell {
  max-width: calc(var(--content-w) + var(--toc-w) + var(--gap));
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}
@media (max-width: 720px) { .shell { padding: 1.5rem 1rem 4rem; } }

/* ============================================================
   POST PAGE
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--content-w)) var(--toc-w);
  gap: var(--gap);
}
@media (max-width: 1080px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-toc-col { display: none; }
}

/* file-path bar — terminal feel */
.path-bar {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  display: flex; align-items: center; gap: .35rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.path-bar .seg-prompt { color: var(--accent); }
.path-bar .seg-host { color: var(--text-2); }
.path-bar .seg-sep { color: var(--text-faint); margin: 0 1px; }
.path-bar .seg-path { color: var(--text); }
.path-bar .seg-meta { margin-left: auto; color: var(--text-mute); display: flex; gap: 1rem; flex-shrink: 0; }
@media (max-width: 720px) {
  .path-bar { flex-wrap: wrap; gap: .25rem; font-size: 12px; }
  .path-bar .seg-meta { display: none; }
}

/* cover — illustrated, terminal frame */
.cover-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--bg-2);
}
.cover-frame .cover-head {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-2);
}
.cover-frame .cover-head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint);
}
.cover-frame .cover-head .dot.r { background: #C56F7B; }
.cover-frame .cover-head .dot.y { background: #C7A86B; }
.cover-frame .cover-head .dot.g { background: #6FA48A; }
.cover-frame .cover-head .label { margin-left: .4rem; }
.cover-frame .cover-img {
  width: 100%; height: 320px;
  background: linear-gradient(135deg, #2a1a26 0%, #4a2a3a 35%, #6a3a4a 70%, #8a4a5e 100%),
              radial-gradient(circle at 30% 40%, rgba(187,102,136,.4), transparent 60%);
  background-blend-mode: screen;
  position: relative;
}
.cover-frame .cover-img::after {
  content: '[anime cover · 1920×800]';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px;
  color: rgba(255,255,255,.5);
  letter-spacing: .05em;
}
html[data-cover="without"] .cover-frame { display: none; }

/* article header (frontmatter) */
.article-header {
  margin-bottom: 2.5rem;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  margin: 0 0 1.25rem;
  color: var(--text);
}
.article-title .hash { color: var(--accent); margin-right: .35rem; font-weight: 500; }

.frontmatter {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  border-left: 2px solid var(--accent-line);
  padding: .25rem 0 .25rem 1rem;
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 1rem; row-gap: .35rem;
}
.frontmatter dt { color: var(--text-faint); }
.frontmatter dd { margin: 0; color: var(--text-2); }
.frontmatter .tag { color: var(--accent); margin-right: .25rem; }
.frontmatter .tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* body */
.markdown {
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.78;
}
.markdown h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 3.5rem 0 1.25rem;
  display: flex; align-items: baseline; gap: .8rem;
  color: var(--text);
}
.markdown h2::before {
  content: '§ ' counter(h2, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .8em;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.markdown { counter-reset: h2; }
.markdown h2 { counter-increment: h2; }
.markdown h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  margin: 2.5rem 0 .75rem;
  color: var(--text);
}
.markdown h3::before {
  content: '> ';
  color: var(--accent);
  font-family: var(--font-mono);
  margin-right: .25rem;
}
.markdown p { margin: 0 0 1.1rem; }
.markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.markdown a:hover { text-decoration-color: var(--accent); }

.markdown code:not(pre code) {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--accent);
}

.markdown blockquote {
  margin: 1.5rem 0;
  padding: .9rem 1.2rem;
  background: var(--bg-2);
  border-left: 2px solid var(--accent-line);
  color: var(--text-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markdown blockquote p:last-child { margin-bottom: 0; }
.markdown blockquote::before {
  content: 'quote ';
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .15em; text-transform: uppercase;
  display: block; margin-bottom: .35rem;
}

.markdown ul, .markdown ol { margin: .25rem 0 1.25rem; padding-left: 1.5rem; }
.markdown ul li::marker { color: var(--accent); content: '▸ '; }

/* code block — ide style */
.code-block {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
}
.code-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  background: var(--bg-2);
}
.code-head .lang { color: var(--accent); }
.code-head .file { color: var(--text-2); }
.code-head .copy {
  margin-left: auto; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px; color: var(--text-mute);
  font-family: var(--font-mono); font-size: 11px;
  transition: all .15s;
}
.code-head .copy:hover { color: var(--text); border-color: var(--text-mute); }
.code-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  font-family: var(--font-mono); font-size: 13.5px;
  line-height: 1.7;
  background: var(--bg-3);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-variant-ligatures: none;
}
.code-body .gutter {
  text-align: right; user-select: none;
  padding: .9rem .8rem .9rem 1rem;
  color: var(--text-faint);
  border-right: 1px solid var(--border-2);
  background: linear-gradient(to right, var(--bg-2), var(--bg-3));
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-variant-ligatures: none;
}
.code-body .lines { padding: .9rem 1rem; overflow-x: auto; }
.code-body .lines pre {
  margin: 0;
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-variant-ligatures: none;
}
.tok-k { color: var(--s-keyword); }
.tok-s { color: var(--s-string); }
.tok-n { color: var(--s-number); }
.tok-c { color: var(--s-comment); font-style: italic; }
.tok-f { color: var(--s-fn); }
.tok-t { color: var(--s-type); }

/* note/callout */
.callout {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  display: grid; grid-template-columns: max-content 1fr; gap: .8rem;
}
.callout .tag-mono {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent);
  letter-spacing: .15em; text-transform: uppercase;
  padding-top: 4px;
}
.callout p { margin: 0; color: var(--text-2); }

/* ============================================================
   TOC (post sidebar)
   ============================================================ */
.post-toc-col { position: sticky; top: 80px; align-self: start; }
.toc {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
}
.toc-head {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 1rem;
  display: flex; justify-content: space-between;
}
.toc-head .progress { color: var(--accent); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc ol ol { padding-left: 1.6rem; counter-reset: toc-sub; margin-top: .15rem; border-left: 1px solid var(--border); }
.toc li { counter-increment: toc; padding: .25rem 0; position: relative; }
.toc ol > li > a::before {
  content: counter(toc, decimal-leading-zero) ' ';
  color: var(--text-faint); margin-right: .4rem;
}
.toc ol ol li { counter-increment: toc-sub; }
.toc ol ol > li > a::before {
  content: counter(toc, decimal-leading-zero) '.' counter(toc-sub) ' ';
  color: var(--text-faint); margin-right: .4rem;
}
.toc a {
  color: var(--text-mute); display: block;
  position: relative;
  padding: 2px 0 2px .55rem;
  transition: color .15s ease, padding-left .2s ease;
}
.toc a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 0;
  transition: background-color .2s ease;
}
.toc a:hover { color: var(--text); padding-left: .8rem; }
.toc a:hover::before { background: var(--accent-line); }
.toc a.active { color: var(--accent); padding-left: .8rem; }
.toc a.active::before { background: var(--accent); }

/* ============================================================
   POST FOOTER (meta · prev/next)
   ============================================================ */
.post-meta-foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
}
.post-meta-foot .k { color: var(--text-faint); margin-right: .35rem; }
.post-meta-foot .v { color: var(--text-2); }

.prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}
.pn-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  background: var(--bg-2);
  transition: all .2s;
  cursor: pointer;
  text-decoration: none;
  min-height: 64px;
  position: relative;
  overflow: hidden;
}
.pn-card::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: transparent;
  transition: background .2s;
}
.pn-card.prev::before { left: 0; }
.pn-card.next::before { right: 0; }
.pn-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-2));
}
.pn-card:hover::before { background: var(--accent); }
.pn-card .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: .3rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.pn-card .pn-title {
  color: var(--text); font-size: 14px; line-height: 1.4;
  font-family: var(--font-display); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pn-card:hover .pn-title { color: var(--accent); }
.pn-card.next { text-align: right; }
.pn-card.next .label::before { content: ''; }
.pn-card.next .label::after { content: '  →'; color: var(--accent); }
.pn-card.prev .label::before { content: '←  '; color: var(--accent); }
.pn-card.pn-empty {
  background: transparent;
  border-style: dashed;
  cursor: default;
  pointer-events: none;
  opacity: .35;
}
.pn-card.pn-empty::before { display: none; }
@media (max-width: 720px) {
  .prev-next { grid-template-columns: 1fr; }
  .pn-card.next { text-align: left; }
  .pn-card.next .label::after { content: ''; }
  .pn-card.next .label::before { content: '→  '; color: var(--accent); }
  .pn-card.pn-empty { display: none; }
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.home-banner {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 3rem;
  background: var(--bg-2);
  position: relative;
}
.home-banner .banner-head {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
}
.home-banner .banner-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.home-banner .banner-body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  min-height: 280px;
}
@media (max-width: 760px) { .home-banner .banner-body { grid-template-columns: 1fr; } }
.home-banner .banner-text {
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.home-banner .greeting {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-mute);
  margin-bottom: .8rem;
  letter-spacing: .02em;
}
.home-banner .greeting .accent { color: var(--accent); }
.home-banner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600; line-height: 1.2;
  margin: 0 0 .75rem;
  letter-spacing: -.015em;
}
.home-banner .sub {
  color: var(--text-mute);
  font-size: 14.5px;
  max-width: 36ch;
}
.home-banner .stats {
  margin-top: 1.5rem;
  display: flex; gap: 1.5rem;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
}
.home-banner .stats span b { color: var(--accent); font-weight: 600; }
.home-banner .banner-illust {
  background:
    linear-gradient(135deg, rgba(187,102,136,.18), transparent 60%),
    linear-gradient(45deg, #1a1620, #2c1f2a);
  position: relative;
  border-left: 1px solid var(--border);
}
html[data-theme="light"] .home-banner .banner-illust {
  background:
    linear-gradient(135deg, rgba(168,82,120,.18), transparent 60%),
    linear-gradient(45deg, #f0e8ec, #e8dde3);
}
.home-banner .banner-illust::after {
  content: '[anime portrait · 立绘]';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .05em;
}

/* post list */
.list-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 1.5rem;
}
.list-head .title { color: var(--text); }
.list-head .title .accent { color: var(--accent); }

.post-list { display: flex; flex-direction: column; gap: 0; }
.post-row {
  display: grid;
  grid-template-columns: 88px 1fr max-content;
  gap: 1.4rem;
  padding: 1.3rem 0;
  border-bottom: 1px dashed var(--border);
  align-items: start;
  transition: padding .15s;
}
.post-row:hover { padding-left: .35rem; padding-right: .35rem; }
.post-row .date {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-mute);
  padding-top: 4px;
  white-space: nowrap;
}
.post-row .date .y { color: var(--text-faint); }
.post-row .meta-right {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-faint);
  padding-top: 4px;
  white-space: nowrap;
}
.post-row .body h3 {
  margin: 0 0 .4rem;
  font-size: 1.15rem; font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.35;
}
.post-row .body h3 a:hover { color: var(--accent); }
.post-row .body p {
  margin: 0 0 .55rem;
  color: var(--text-2); font-size: 14.5px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row .tags {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
}
.post-row .tags a { margin-right: .55rem; }
.post-row .tags a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* pagination */
.pagination {
  margin-top: 3rem;
  display: flex; justify-content: center; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: 13px;
}
.pagination a, .pagination span {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  transition: all .15s;
}
.pagination a:hover { color: var(--text); border-color: var(--text-mute); }
.pagination .active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pagination .gap { border: none; }

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-tabs {
  display: flex; gap: 1.4rem;
  font-family: var(--font-mono); font-size: 13px;
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: .25rem;
}
.archive-tabs a {
  padding: .35rem .25rem;
  color: var(--text-mute);
  position: relative;
}
.archive-tabs a[aria-current] { color: var(--text); }
.archive-tabs a[aria-current]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent);
}
.archive-tabs a .num { color: var(--text-faint); margin-left: .35rem; }

.archive-year {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}
.archive-year .year {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--text-faint);
  letter-spacing: -.02em;
  position: sticky; top: 80px; align-self: start;
}
.archive-year .year .ct {
  display: block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  color: var(--text-mute);
  margin-top: .35rem;
  letter-spacing: .12em;
}
.archive-list { display: flex; flex-direction: column; }
.archive-row {
  display: grid;
  grid-template-columns: 56px 1fr max-content;
  gap: 1.2rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border-2);
  align-items: center;
}
.archive-row:last-child { border-bottom: none; }
.archive-row .md {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-mute);
}
.archive-row .t {
  color: var(--text); font-size: 14.5px;
  font-family: var(--font-display);
}
.archive-row .t:hover { color: var(--accent); }
.archive-row .cat {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
}

/* categories grid — visual card per category */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.category-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1rem 1.1rem 0.75rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.category-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent-line);
  transition: background .2s ease;
}
.category-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-2));
  transform: translateY(-2px);
}
.category-card:hover::before { background: var(--accent); }
.category-card:hover .cat-name { color: var(--accent); }
.category-card:hover .arrow { transform: translateX(2px); color: var(--accent); }

.cat-card-head {
  display: flex; align-items: center; gap: .55rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--border);
  margin-bottom: .65rem;
}
.cat-card-head .cat-icon {
  color: var(--accent);
  font-size: 13px;
}
.cat-card-head .cat-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s ease;
}
.cat-card-head .cat-count {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: .04em;
  background: var(--bg-3);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-feature-settings: 'tnum';
}

.cat-card-recent {
  list-style: none; margin: 0; padding: 0;
  flex: 1;
}
.cat-card-recent li {
  display: grid; grid-template-columns: 44px 1fr;
  gap: .55rem; align-items: baseline;
  padding: .25rem 0;
  font-size: 13px;
  line-height: 1.45;
}
.cat-card-recent li .md {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  font-feature-settings: 'tnum';
}
.cat-card-recent li .t {
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cat-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .6rem;
  margin-top: .55rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: .03em;
}
.cat-card-foot .arrow {
  color: var(--text-faint);
  font-size: 14px;
  transition: transform .15s ease, color .15s ease;
}

@media (max-width: 540px) {
  .categories-grid { grid-template-columns: 1fr; }
}

/* tags page — designed grid of pills with mini bar showing relative count */
.tags-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .55rem;
  margin-top: 2rem;
}
.tag-pill {
  display: grid;
  grid-template-columns: max-content 1fr 60px max-content;
  gap: .6rem;
  align-items: center;
  padding: .65rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.tag-pill::before {
  content: ''; position: absolute;
  left: 0; bottom: 0; height: 1.5px;
  width: calc(var(--ratio, 0) * 100%);
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  transition: width .3s ease, opacity .2s ease;
  opacity: .4;
}
.tag-pill:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-2));
  transform: translateY(-1px);
}
.tag-pill:hover::before { opacity: 1; }
.tag-pill .hash {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}
.tag-pill .name {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.tag-pill:hover .name { color: var(--accent); }
.tag-pill .bar {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
}
.tag-pill .bar::after {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--ratio, 0) * 100%);
  background: var(--accent-line);
  border-radius: 2px;
}
.tag-pill:hover .bar::after { background: var(--accent); }
.tag-pill .count {
  font-size: 11.5px;
  color: var(--text-mute);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* size tiers — slightly bigger / more accent for higher-frequency tags */
.tag-pill.tier-1 .name { font-size: 14px; color: var(--accent); }
.tag-pill.tier-1 .hash { color: var(--accent-2); }
.tag-pill.tier-1 { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 30%, var(--bg-2)); }
.tag-pill.tier-2 .name { color: var(--text); }
.tag-pill.tier-4 .name { color: var(--text-mute); }
.tag-pill.tier-4 .hash { color: var(--text-faint); }

@media (max-width: 540px) {
  .tags-pill-grid { grid-template-columns: 1fr; }
  .tag-pill { grid-template-columns: max-content 1fr 50px max-content; }
}

/* legacy stats strip + popular chips (kept for backward compat, no longer rendered) */
.tags-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin: 2rem 0 2.5rem;
}
.tags-stats .ts-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: .9rem 1rem;
  position: relative;
  overflow: hidden;
}
.tags-stats .ts-cell::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent-line);
}
.tags-stats .ts-cell .num {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tags-stats .ts-cell .lbl {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: .15em; text-transform: uppercase;
  margin-top: .55rem;
  display: flex; align-items: center; gap: .4rem;
}
.tags-stats .ts-cell .lbl::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
@media (max-width: 720px) { .tags-stats { grid-template-columns: repeat(2, 1fr); } }

.tags-section-title {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 2.2rem 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed var(--border);
  font-weight: 500;
}

.tags-popular {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.tag-pop-card {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: .65rem; align-items: center;
  padding: .65rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: all .15s ease;
}
.tag-pop-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-2));
  transform: translateY(-1px);
}
.tag-pop-card .rank {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .04em;
  font-feature-settings: 'tnum';
}
.tag-pop-card .name {
  font-family: var(--font-mono); font-size: 13.5px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag-pop-card .count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute);
  white-space: nowrap;
}
.tag-pop-card:hover .name { color: var(--accent-2); }

/* tag cloud */
.tag-cloud {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem;
}
.tag-cloud a {
  font-family: var(--font-mono); font-size: 13px;
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: all .15s;
}
.tag-cloud a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.tag-cloud a .num { color: var(--text-faint); margin-left: .4rem; font-size: 11px; }
.tag-cloud a.size-l { font-size: 14.5px; color: var(--text); }
.tag-cloud a.size-xl { font-size: 16px; color: var(--accent); border-color: var(--accent-line); }

/* ============================================================
   ABOUT v3 — editorial · label-rail · refined
   ============================================================ */
.about-v3 {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hero — generous space, immediate "wow" */
.about-v3-hero {
  text-align: center;
  padding: 4.5rem 0 3.5rem;
  position: relative;
}
.about-v3-hero::after {
  content: '';
  display: block;
  width: 36px; height: 1px;
  background: var(--accent);
  margin: 2.2rem auto 0;
}
.about-v3-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--border);
  padding: 3px;
  background: var(--bg-2);
  position: relative;
}
.about-v3-avatar > div {
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, var(--accent-2), transparent 65%),
    linear-gradient(135deg, #2a1a26, #4a2a3e);
}
html[data-theme="light"] .about-v3-avatar > div {
  background:
    radial-gradient(circle at 35% 35%, var(--accent), transparent 60%),
    linear-gradient(135deg, #f0e0e8, #e2c5d2);
}
.about-v3-avatar::after {
  content: ''; position: absolute;
  right: 4px; bottom: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg);
  animation: pulse-dot-success 2s ease-out infinite;
}

.about-v3-name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--text);
}
.about-v3-name .accent { color: var(--accent); }

.about-v3-greet {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-mute);
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.about-v3-greet .p { color: var(--accent); margin-right: .35rem; }

.about-v3-tag {
  color: var(--text-2);
  font-size: 16px; line-height: 1.7;
  margin: 0 auto;
  max-width: 36ch;
}

.about-v3-pills {
  margin-top: 1.6rem;
  display: inline-flex; flex-wrap: wrap; gap: .55rem;
  justify-content: center;
}
.about-v3-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: 12px;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--bg-2);
  transition: all .2s ease;
}
.about-v3-pill:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-2));
  transform: translateY(-1px);
}
.about-v3-pill i { color: var(--accent); font-size: 11px; }

/* Sections — label-on-left, content-right */
.about-v3-section {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px dashed var(--border);
}
@media (max-width: 720px) {
  .about-v3-section { grid-template-columns: 1fr; gap: .9rem; padding: 1.5rem 0; }
}
.about-v3-label {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .22em; text-transform: uppercase;
  position: sticky; top: 80px; align-self: start;
  display: flex; align-items: center; gap: .45rem;
  font-weight: 500;
}
.about-v3-label i { color: var(--text-mute); font-size: 11px; }
@media (max-width: 720px) {
  .about-v3-label { position: static; }
}
.about-v3-content { font-size: 16px; color: var(--text); line-height: 1.78; }
.about-v3-content p { margin: 0 0 1.1rem; color: var(--text-2); }
.about-v3-content p:last-child { margin-bottom: 0; }
.about-v3-content a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.about-v3-content a:hover { text-decoration-color: var(--accent); }

/* Posts — date · title · chevron, hover slide */
.about-v3-posts { display: flex; flex-direction: column; }
.about-v3-post {
  display: grid; grid-template-columns: 110px 1fr max-content;
  gap: 1rem; align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-2);
  transition: padding .15s ease;
}
.about-v3-post:last-child { border-bottom: none; }
.about-v3-post:hover { padding-left: .35rem; padding-right: .35rem; }
.about-v3-post:hover .about-v3-post-title { color: var(--accent); }
.about-v3-post-date {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.about-v3-post-title {
  color: var(--text); font-size: 14.5px;
  font-family: var(--font-display);
  transition: color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.about-v3-post i { color: var(--text-faint); transition: color .15s ease, transform .15s ease; }
.about-v3-post:hover i { color: var(--accent); transform: translateX(2px); }
.about-v3-more {
  margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
  letter-spacing: .04em;
}
.about-v3-more:hover i { transform: translateX(3px); }
.about-v3-more i { transition: transform .15s ease; }

/* Education */
.about-v3-edu {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: .25rem 0;
}
.about-v3-edu-school { color: var(--text); font-weight: 500; font-size: 15px; }
.about-v3-edu-major { color: var(--text-mute); font-size: 14px; }
.about-v3-edu-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Stack — category : badges, no progress bars */
.about-v3-stack-row {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-2);
}
.about-v3-stack-row:last-child { border-bottom: none; }
.about-v3-stack-cat {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .12em; text-transform: uppercase;
  padding-top: 4px;
}
.about-v3-stack-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.about-v3-badge {
  font-family: var(--font-mono); font-size: 12px;
  padding: .25rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: var(--bg-2);
  transition: all .15s ease;
}
.about-v3-badge.now { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* Timeline (clean dense) */
.about-v3-timeline { font-family: var(--font-mono); font-size: 13px; }
.about-v3-tl-row {
  display: grid; grid-template-columns: 110px 24px 1fr;
  gap: .35rem 1rem; align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-2);
}
.about-v3-tl-row:last-child { border-bottom: none; }
.about-v3-tl-when { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.about-v3-tl-mark { color: var(--accent); font-weight: 600; font-size: 14px; text-align: center; }
.about-v3-tl-what { color: var(--text); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; }
.about-v3-tl-what .desc { display: block; color: var(--text-mute); font-size: 13px; margin-top: 1px; }

/* Connect — minimal inline icon row */
.about-v3-connect { display: flex; flex-wrap: wrap; gap: .5rem; }
.about-v3-conn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: 12.5px;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: var(--bg-2);
  transition: all .2s ease;
}
.about-v3-conn:hover {
  color: var(--accent); border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-2));
  transform: translateY(-1px);
}
.about-v3-conn i { color: var(--accent); }

/* old v2 (kept for compat — not used by new page) */

/* Hero card */
.about-hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 70% 80% at 90% 10%, var(--accent-soft), transparent 60%),
    var(--bg-2);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  margin-bottom: 1.25rem;
}
@media (max-width: 720px) { .about-hero { grid-template-columns: 1fr; } }

.about-hero .ah-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg, rgba(187,102,136,.32), transparent 65%),
    linear-gradient(45deg, #1a1620, #2c1f2a);
  border-right: 1px solid var(--border);
}
html[data-theme="light"] .about-hero .ah-cover {
  background:
    linear-gradient(135deg, rgba(168,82,120,.30), transparent 65%),
    linear-gradient(45deg, #f0e8ec, #e8dde3);
}
.about-hero .ah-cover::after {
  content: '[ avatar 立绘 ]';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
  letter-spacing: .04em;
}
.about-hero .ah-cover .ah-online {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--success); letter-spacing: .1em;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.about-hero .ah-cover .ah-online::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-dot-success 2s ease-out infinite;
}
@keyframes pulse-dot-success {
  0%   { box-shadow: 0 0 0 0 rgba(111,164,138,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(111,164,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,164,138,0); }
}

.about-hero .ah-body {
  padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.about-hero .ah-greet {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .03em;
  margin-bottom: .75rem;
}
.about-hero .ah-greet .p { color: var(--accent); margin-right: .35rem; }
.about-hero .ah-name {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.025em; line-height: 1.05;
  margin: 0 0 .5rem;
  color: var(--text);
}
.about-hero .ah-name .accent { color: var(--accent); }
.about-hero .ah-tag {
  color: var(--text-2);
  font-size: 14.5px; line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 52ch;
}
.about-hero .ah-meta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  display: flex; flex-wrap: wrap; gap: 1.3rem;
  border-top: 1px dashed var(--border);
  padding-top: .85rem;
}
.about-hero .ah-meta span b { color: var(--text-2); font-weight: 500; margin-left: .35rem; }

/* stats row */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin: 1.25rem 0 2.5rem;
}
@media (max-width: 720px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.stat-cell::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent-line);
}
.stat-cell .num {
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-cell .lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .15em; text-transform: uppercase;
  margin-top: .55rem;
  display: flex; align-items: center; gap: .4rem;
}
.stat-cell .lbl::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* about grid v2 */
.about-grid-v2 {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
}
@media (max-width: 880px) { .about-grid-v2 { grid-template-columns: 1fr; } }

.about-grid-v2 section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.25rem;
}
.about-grid-v2 section h2 {
  margin: 0 0 1rem;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: .55rem;
}
.about-grid-v2 section h2::before { content: '$'; color: var(--text-mute); font-weight: 400; }
.about-grid-v2 section h2 .cnt {
  margin-left: auto;
  font-size: 10.5px; color: var(--text-faint); letter-spacing: .1em;
}
.about-grid-v2 section p {
  margin: 0 0 .85rem; color: var(--text-2); line-height: 1.78; font-size: 15px;
}
.about-grid-v2 section p:last-child { margin-bottom: 0; }

/* now-section: currently doing */
.now-list { display: flex; flex-direction: column; gap: .7rem; }
.now-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: .9rem; align-items: start;
  padding: .25rem 0;
}
.now-row .now-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .45rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  white-space: nowrap;
}
.now-row .now-body { color: var(--text); font-size: 14.5px; line-height: 1.55; }
.now-row .now-body .meta { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

/* skills with progress bars */
.skill-bars { display: flex; flex-direction: column; gap: .55rem; }
.skill-bar {
  display: grid; grid-template-columns: 110px 1fr 36px;
  gap: .8rem; align-items: center;
  font-family: var(--font-mono); font-size: 12.5px;
}
.skill-bar .k { color: var(--text); }
.skill-bar .pct { color: var(--text-mute); text-align: right; font-variant-numeric: tabular-nums; }
.skill-bar .track {
  position: relative; height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.skill-bar .track::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pct, 50%);
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  border-radius: 999px;
  transform-origin: left;
  animation: bar-fill 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* vertical timeline */
.tl-v { position: relative; padding-left: 1.4rem; }
.tl-v::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent-line), var(--border) 80%);
}
.tl-v-row {
  position: relative; padding: 0 0 1.1rem;
}
.tl-v-row::before {
  content: ''; position: absolute; left: -1.4rem; top: .55rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--bg-2);
}
.tl-v-row .when {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-faint); letter-spacing: .04em;
  margin-bottom: .15rem;
}
.tl-v-row .what {
  color: var(--text); font-size: 14.5px; line-height: 1.5;
}
.tl-v-row .what .accent { color: var(--accent); font-family: var(--font-mono); font-size: 13px; margin-right: .25rem; }
.tl-v-row .desc { color: var(--text-mute); font-size: 13px; line-height: 1.55; margin-top: .2rem; }

/* contact cards */
.contact-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
}
@media (max-width: 540px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: all .2s ease;
}
.contact-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg));
  transform: translateY(-1px);
}
.contact-card .ico {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--accent);
}
.contact-card .body { flex: 1; min-width: 0; }
.contact-card .body .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase; }
.contact-card .body .val { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* activity heatmap */
.activity-grid {
  display: grid; grid-template-columns: repeat(26, 10px);
  grid-auto-rows: 10px;
  gap: 3px;
  padding: .5rem 0;
}
@media (max-width: 720px) { .activity-grid { grid-template-columns: repeat(20, 10px); } }
.activity-cell {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--bg-3);
}
.activity-cell.l1 { background: color-mix(in srgb, var(--accent) 18%, var(--bg-3)); }
.activity-cell.l2 { background: color-mix(in srgb, var(--accent) 38%, var(--bg-3)); }
.activity-cell.l3 { background: color-mix(in srgb, var(--accent) 60%, var(--bg-3)); }
.activity-cell.l4 { background: var(--accent); }
.activity-legend {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-mute);
  margin-top: .8rem;
}
.activity-legend .lg { width: 10px; height: 10px; border-radius: 2px; }

/* ============================================================
   PRELOADER — terminal boot sequence
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13.5px;
  color: var(--text-2);
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; }
.preloader-content {
  width: 540px; max-width: 92vw;
  text-align: left;
}
.preloader-content .boot-line {
  margin: .25rem 0;
  opacity: 0;
  animation: fade-in .25s ease forwards;
}
.preloader-content .boot-line:nth-child(1) { animation-delay: .05s; }
.preloader-content .boot-line:nth-child(2) { animation-delay: .35s; }
.preloader-content .boot-line:nth-child(3) { animation-delay: .65s; }
.preloader-content .boot-line:nth-child(4) { animation-delay: .9s; }
.preloader-content .boot-line:nth-child(5) { animation-delay: 1.15s; }
.preloader-content .boot-line:nth-child(6) { animation-delay: 1.4s; }
.preloader .prompt { color: var(--accent); }
.preloader .ok { color: var(--success); margin-right: .5rem; }
.preloader .accent { color: var(--accent); }
.preloader .kao { color: var(--accent); margin-right: .55rem; }
.preloader .cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--accent); margin-left: 4px;
  animation: blink 1s steps(2) infinite;
  vertical-align: -2px;
}
.preloader-bar {
  margin-top: 1rem;
  height: 2px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.preloader-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  animation: load-bar 1.6s ease-out forwards;
  width: 0;
}
@keyframes load-bar { to { width: 100%; } }

/* ============================================================
   SEARCH MODAL  (Cmd/Ctrl + K)
   ============================================================ */
.search-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.search-modal.open { opacity: 1; pointer-events: auto; }
.search-box {
  width: 640px; max-width: 92vw;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform .2s ease;
}
.search-modal.open .search-box { transform: translateY(0); }
.search-head {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono);
}
.search-head .p { color: var(--accent); font-size: 14px; }
.search-input {
  flex: 1;
  background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.search-input::placeholder { color: var(--text-faint); }
.search-kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-mute); letter-spacing: .04em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: .5rem 0;
}
.search-results .group-h {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint); letter-spacing: .15em; text-transform: uppercase;
  padding: .5rem 1rem;
}
.search-result {
  display: grid;
  grid-template-columns: 80px 1fr max-content;
  gap: 1rem; align-items: center;
  padding: .55rem 1rem;
  cursor: pointer;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-2);
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.search-result:hover, .search-result.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text);
}
.search-result .date { color: var(--text-faint); }
.search-result .title { color: var(--text); }
.search-result .title em { color: var(--accent); font-style: normal; }
.search-result .meta { color: var(--text-faint); font-size: 11.5px; }
.search-foot {
  padding: .55rem 1rem;
  border-top: 1px solid var(--border);
  display: flex; gap: 1rem;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
}
.search-foot kbd {
  font-family: inherit; font-size: 10.5px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  margin: 0 4px;
}
.search-foot .kbd-hint-toggle { margin-left: auto; }

/* ============================================================
   SEARCH MODAL — bridge legacy hexo .search-pop-overlay to demo terminal style
   ============================================================ */
.search-pop-overlay.search-modal {
  display: flex !important;
  background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.search-pop-overlay.search-modal:not(.active):not(.open) { opacity: 0; pointer-events: none; }
.search-pop-overlay.search-modal.active,
.search-pop-overlay.search-modal.open {
  opacity: 1 !important; pointer-events: auto !important;
}
.search-pop-overlay.search-modal.active .search-box,
.search-pop-overlay.search-modal.open .search-box { transform: translateY(0); }

.search-popup.search-box {
  width: 640px !important; max-width: 92vw !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55) !important;
  padding: 0 !important;
}
.search-header.search-head {
  padding: .8rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono);
  background: transparent !important;
}
.search-header.search-head .p {
  color: var(--accent); font-size: 14px;
  font-weight: 600;
}
.search-header.search-head .grep-cmd {
  color: var(--text-mute);
  font-family: var(--font-mono); font-size: 14px;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.search-header.search-head .search-input-field-pre {
  background: transparent !important;
  border: none !important;
  color: var(--text-faint) !important;
  width: auto !important; height: auto !important;
  padding: 0 !important;
  cursor: pointer;
  font-size: 12px;
}
.search-header.search-head .search-input-container {
  flex: 1; display: flex; align-items: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.search-header.search-head .search-input {
  width: 100%;
  background: transparent !important;
  border: none !important; outline: none !important;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text) !important;
  padding: 0 !important;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.search-header.search-head .search-input::placeholder { color: var(--text-faint); }
.search-header.search-head .popup-btn-close {
  background: transparent !important;
  border: none !important;
  color: var(--text-mute) !important;
  cursor: pointer;
  padding: 0 !important;
  font-size: 13px;
  margin-left: .25rem;
  width: auto !important; height: auto !important;
}
.search-header.search-head .popup-btn-close:hover { color: var(--accent) !important; }

#search-result.search-results {
  max-height: 380px;
  overflow-y: auto;
  padding: .5rem 0;
  background: transparent !important;
}
#search-result #no-result {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  color: var(--text-faint);
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em;
}
#search-result #no-result i { color: var(--text-faint); margin-bottom: .8rem; opacity: .6; }
#search-result #no-result .hint { margin: 0; color: var(--text-mute); font-size: 12.5px; }

#search-result .search-result-list {
  list-style: none; margin: 0; padding: 0;
}
#search-result .search-result-list > li {
  padding: .5rem 1rem .8rem;
  border-bottom: 1px dashed var(--border);
}
#search-result .search-result-list > li:last-child { border-bottom: none; }
#search-result .search-result-list .search-result-title {
  display: block;
  color: var(--text) !important;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  margin-bottom: .25rem;
  letter-spacing: -.005em;
}
#search-result .search-result-list .search-result-title:hover { color: var(--accent) !important; }
#search-result .search-result-list .search-result-title.is-active {
  color: var(--accent) !important;
}
#search-result .search-result-list a:not(.search-result-title) {
  display: block;
  text-decoration: none;
  color: var(--text-2);
}
#search-result .search-result-list .search-result {
  /* override grid form (used in demo for date/title/meta layout); for hexo content snippets, keep flowing text */
  display: block !important;
  grid-template-columns: none !important;
  border-left: 2px solid transparent;
  padding: .25rem .65rem !important;
  font-family: var(--font-sans); font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-mute) !important;
  background: transparent !important;
  margin-top: .15rem;
  transition: border-color .15s, background .15s;
}
#search-result .search-result-list .search-result:hover {
  border-left-color: var(--accent-line);
  background: var(--accent-soft) !important;
  color: var(--text-2) !important;
}
#search-result .search-result-list a.is-active .search-result {
  border-left-color: var(--accent);
  background: var(--accent-soft) !important;
  color: var(--text-2) !important;
}
#search-result .search-keyword {
  color: var(--accent) !important;
  background: var(--accent-soft);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}

/* ============================================================
   COMMENTS — twikoo-styled placeholder
   ============================================================ */
.comments-section {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}
.comments-section h2 {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 1.25rem;
  display: flex; align-items: baseline; gap: .55rem;
}
.comments-section h2::before { content: '$'; color: var(--text-mute); font-weight: 400; }
.comments-section h2 .cnt { margin-left: auto; color: var(--text-faint); font-size: 10.5px; letter-spacing: .12em; }

.comment-composer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.comment-composer .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .6rem;
  margin-bottom: .8rem;
}
@media (max-width: 540px) { .comment-composer .row { grid-template-columns: 1fr; } }
.comment-composer input, .comment-composer textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text); outline: none;
  transition: border-color .15s;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.comment-composer textarea {
  width: 100%; min-height: 90px; resize: vertical;
  margin-bottom: .8rem;
  font-family: var(--font-sans);
}
.comment-composer input:focus, .comment-composer textarea:focus { border-color: var(--accent-line); }
.comment-composer .actions {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
}
.comment-composer .actions .hint { letter-spacing: .04em; }
.comment-composer .actions .hint kbd {
  font-family: inherit; padding: 1px 5px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-2); margin: 0 2px;
}
.comment-composer .submit {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: .35rem .9rem;
  font-family: var(--font-mono); font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.comment-composer .submit:hover { background: var(--accent-2); border-color: var(--accent-2); }

.comment-list { display: flex; flex-direction: column; gap: 1rem; }
.comment-item {
  display: grid; grid-template-columns: 36px 1fr; gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px dashed var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-item .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(187,102,136,.4), rgba(110,143,179,.4));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.comment-item .body .meta {
  display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: .3rem;
}
.comment-item .body .meta .name { color: var(--text); font-weight: 500; }
.comment-item .body .meta .badge { color: var(--accent); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.comment-item .body .text { color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.comment-item .body .reply {
  margin-top: .4rem;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
}
.comment-item .body .reply a { color: var(--accent); margin-right: .8rem; }
.comment-replies {
  margin-top: .8rem; margin-left: 1.2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: .8rem;
}

/* ============================================================
   ARTICLE COPYRIGHT — mirrors live theme
   ============================================================ */
.copyright-card {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--bg-2);
  position: relative;
}
.copyright-card .cp-title {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.35;
  margin: 0 0 .3rem;
  color: var(--text);
}
.copyright-card .cp-url {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  display: inline-block;
  margin-bottom: 1.1rem;
  word-break: break-all;
  transition: color .15s;
}
.copyright-card .cp-url:hover { color: var(--accent); }
.copyright-card .cp-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 1rem;
}
@media (max-width: 540px) { .copyright-card .cp-meta { grid-template-columns: 1fr; gap: .6rem; } }
.copyright-card .cp-cell .k {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: .15em; text-transform: uppercase;
  display: block;
  margin-bottom: .25rem;
}
.copyright-card .cp-cell .v {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.copyright-card .cp-license {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  font-family: var(--font-mono); font-size: 12.5px;
}
.copyright-card .cp-license .lic-label {
  color: var(--text-faint); letter-spacing: .04em;
  margin-right: .25rem;
}
.copyright-card .cp-license .lic-main {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  transition: filter .15s;
}
.copyright-card .cp-license .lic-main:hover { filter: brightness(1.1); }
.copyright-card .cp-license .lic-tag {
  display: inline-flex; align-items: center;
  padding: .25rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mute);
  font-size: 11.5px;
  background: var(--bg);
}
.copyright-card .cp-license .lic-mark {
  margin-left: auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 14px;
}

/* ============================================================
   RECOMMENDATION
   ============================================================ */
.related-grid {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}
.related-grid h3 {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 1rem;
  display: flex; align-items: baseline; gap: .55rem;
}
.related-grid h3::before { content: '$'; color: var(--text-mute); font-weight: 400; }
.related-grid h3 .cnt { margin-left: auto; color: var(--text-faint); font-size: 10.5px; }
.related-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem;
}
@media (max-width: 540px) { .related-list { grid-template-columns: 1fr; } }
.related-item {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .6rem; align-items: center;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  transition: all .2s;
  cursor: pointer;
}
.related-item:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-2));
  transform: translateX(2px);
}
.related-item .num {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent);
  letter-spacing: .1em;
}
.related-item .t {
  color: var(--text); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   EXPIRATION CALLOUT
   ============================================================ */
.expire-warn {
  margin: 1.25rem 0;
  border: 1px solid var(--warn);
  border-left: 2px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--bg-2));
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  display: flex; gap: .7rem;
  font-family: var(--font-mono); font-size: 12.5px;
}
.expire-warn .tag-mono {
  color: var(--warn); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ============================================================
   FRIENDS PAGE
   ============================================================ */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.friend-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1rem;
  display: grid; grid-template-columns: 44px 1fr;
  gap: .9rem; align-items: center;
  transition: all .2s;
}
.friend-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-2));
  transform: translateY(-2px);
}
.friend-card .av {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(187,102,136,.4), rgba(110,143,179,.3));
  border: 1px solid var(--border);
}
.friend-card .name { color: var(--text); font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.friend-card .bio {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   SHUOSHUO  说说
   ============================================================ */
.essay-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.essay-item {
  display: grid; grid-template-columns: 40px 1fr;
  gap: .9rem;
  padding: 0;
}
.essay-item .av {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(187,102,136,.4), rgba(110,143,179,.3));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.essay-bubble {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.essay-bubble::before {
  content: ''; position: absolute;
  left: -7px; top: 12px;
  width: 12px; height: 12px;
  border: 1px solid var(--border);
  border-right: none; border-bottom: none;
  background: var(--bg-2);
  transform: rotate(-45deg);
}
.essay-bubble .essay-date {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
  padding: .45rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; gap: .65rem;
}
.essay-bubble .essay-date .ago { color: var(--accent); margin-left: auto; }
.essay-bubble .essay-text {
  padding: .8rem .9rem .9rem;
  color: var(--text-2); font-size: 14.5px; line-height: 1.65;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.nf-shell {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.nf-card {
  width: 540px; max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.nf-card .head {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; gap: .5rem; align-items: center;
}
.nf-card .head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.nf-card .head .dot.r { background: #C56F7B; }
.nf-card .head .dot.y { background: #C7A86B; }
.nf-card .head .dot.g { background: #6FA48A; }
.nf-card .body {
  padding: 2rem 1.6rem;
  font-family: var(--font-mono);
}
.nf-card .body .err-line { font-size: 13.5px; color: var(--text-2); padding: .15rem 0; }
.nf-card .body .err-line .fail { color: var(--danger); }
.nf-card .body .err-line .accent { color: var(--accent); }
.nf-card .body .err-stack {
  font-size: 12px; color: var(--text-mute);
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-line);
  line-height: 1.7;
}
.nf-card .body .big {
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 700;
  letter-spacing: -.04em;
  color: var(--accent);
  margin: .5rem 0;
  line-height: 1;
}
.nf-card .body .kao { color: var(--accent); font-size: 16px; margin-right: .35rem; }
.nf-card .body .actions {
  margin-top: 1.5rem; display: flex; gap: .55rem;
}
.nf-card .body .btn {
  font-family: var(--font-mono); font-size: 12px;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: all .15s;
  cursor: pointer;
  background: var(--bg);
}
.nf-card .body .btn:hover { color: var(--accent); border-color: var(--accent-line); }
.nf-card .body .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.nf-card .body .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* ============================================================
   APLAYER STUB (anchored to side-widgets · slides in from right)
   ============================================================ */
.mini-player {
  position: fixed; right: 64px; bottom: 16px; z-index: 80;
  width: 240px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.4);
  font-family: var(--font-mono); font-size: 11.5px;
  overflow: hidden;
  transform: translateX(120%);
  transition: transform .3s ease;
}
.mini-player.show { transform: translateX(0); }
.mini-player .mp-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-mute);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}
.mini-player .mp-head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2s infinite; }
.mini-player .mp-body {
  padding: .55rem .6rem;
  display: grid; grid-template-columns: 36px 1fr; gap: .55rem;
  align-items: center;
}
.mini-player .mp-cover {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
}
.mini-player .mp-info .t { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .mp-info .a { color: var(--text-mute); font-size: 11px; }
.mini-player .mp-bar {
  height: 2px; background: var(--bg-3);
  position: relative;
}
.mini-player .mp-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
}
.mini-player .mp-controls {
  padding: .35rem .6rem;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-mute);
}
.mini-player .mp-controls button {
  background: transparent; border: none; color: inherit; cursor: pointer;
  padding: 2px 6px; font-family: var(--font-mono); font-size: 12px;
}
.mini-player .mp-controls button:hover { color: var(--accent); }
.mini-player-toggle { display: none; }

/* ============================================================
   FOOTER — 3-col grid like live site
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 5rem;
  padding: 2.5rem 1.5rem 2rem;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  position: relative;
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
}

/* left: visitor + pv */
.foot-left {
  display: flex; flex-direction: column; gap: .55rem;
  font-size: 12px;
}
@media (max-width: 720px) { .foot-left { align-items: center; } }
.foot-stat {
  display: inline-flex; align-items: baseline; gap: .5rem;
  letter-spacing: .04em;
}
.foot-stat .lbl {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 10.5px;
}
.foot-stat .val {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 500;
}

/* center: copyright + stats + runtime, all centered */
.foot-center {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: 13px;
  line-height: 1.6;
}
.foot-center .line-1 a { color: var(--text); }
.foot-center .line-1 a:hover { color: var(--accent); }
.foot-center .line-1 .cmark { color: var(--text-mute); margin: 0 .3rem; }
.foot-center .line-2 { font-size: 12px; color: var(--text-mute); }
.foot-center .line-2 .num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.foot-center .runtime { font-size: 12px; color: var(--text-mute); display: inline-flex; align-items: baseline; gap: .35rem; }
.foot-center .runtime .lbl { color: var(--text-faint); }
.foot-center .runtime .num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* right: socials + powered by */
.foot-right {
  display: flex; flex-direction: column; gap: .6rem;
  align-items: flex-end;
  font-size: 12px;
}
@media (max-width: 720px) { .foot-right { align-items: center; } }
.foot-icons {
  display: flex; gap: .9rem;
}
.foot-icons a {
  color: var(--text-mute);
  font-size: 16px;
  transition: color .15s, transform .15s;
}
.foot-icons a:hover { color: var(--accent); transform: translateY(-1px); }
.foot-powered {
  color: var(--text-faint);
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .35rem;
}
.foot-powered a { color: var(--text-2); }
.foot-powered a:hover { color: var(--accent); }
.foot-powered svg { width: 14px; height: 14px; vertical-align: middle; }

/* ----------- floating side widgets stack (right) ----------- */
.side-widgets {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
}
@media (max-width: 720px) {
  .side-widgets { right: 8px; bottom: 8px; gap: 6px; }
  .sw-btn, .sw-progress { width: 34px; height: 34px; font-size: 12px; }
}
.sw-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-mute);
  cursor: pointer;
  font-size: 14px;
  transition: all .18s ease, opacity .25s ease, transform .25s ease;
  position: relative;
}
.sw-btn:hover { color: var(--accent); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-2)); }
.sw-btn .tip {
  position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-2);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  letter-spacing: .04em;
}
.sw-btn:hover .tip { opacity: 1; transform: translateY(-50%) translateX(-2px); }

/* progress badge */
.sw-progress {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
}
.sw-progress::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--p, 0%);
  background: var(--accent-soft);
  transition: height .15s linear;
  z-index: -1;
}
.sw-progress span { position: relative; z-index: 1; }

/* progressively reveal as user scrolls */
.side-widgets .sw-back-top { opacity: 0; pointer-events: none; transform: translateY(6px); }
html[data-scrolled] .side-widgets .sw-back-top { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ============================================================
   HOME — ANIME VARIANT (richer 二次元)
   ============================================================ */
html[data-page="home"][data-home="terminal"] [data-variant="anime"]    { display: none; }
html[data-page="home"][data-home="terminal"] [data-variant="terminal"] { display: block; }
html[data-page="home"][data-home="anime"]    [data-variant="terminal"] { display: none; }
html[data-page="home"][data-home="anime"]    [data-variant="anime"]    { display: block; }

.hero-anime {
  position: relative;
  margin: -2.5rem -1.5rem 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-anime .hero-img {
  position: relative;
  height: 100vh;
  min-height: 560px;
  background:
    radial-gradient(ellipse 60% 50% at 60% 40%, rgba(187,102,136,.45), transparent 70%),
    radial-gradient(ellipse 70% 50% at 30% 70%, rgba(110,143,179,.25), transparent 65%),
    linear-gradient(135deg, #1a1320 0%, #2a1a2c 35%, #3a2236 70%, #4a2a3e 100%);
  overflow: hidden;
  transform-origin: center top;
  will-change: transform, filter;
  transition: filter .12s linear;
}
html[data-theme="light"] .hero-anime .hero-img {
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(168,82,120,.42), transparent 65%),
    radial-gradient(ellipse 60% 80% at 25% 70%, rgba(110,143,179,.18), transparent 60%),
    linear-gradient(135deg, #f8eef1 0%, #f0dde4 35%, #e9d3da 70%, #e2c9d1 100%);
}
.hero-anime .hero-img::before {
  content: '[anime hero · 立绘 · 1920×900]';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
}
html[data-theme="light"] .hero-anime .hero-img::before { color: rgba(168,82,120,.5); }

/* scanline overlay */
.hero-anime .hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.025) 3px,
    rgba(255,255,255,.025) 4px
  );
  pointer-events: none;
  animation: scan 8s linear infinite;
}
@keyframes scan {
  from { transform: translateY(-4px); }
  to   { transform: translateY(0); }
}

/* particle / light-spot floating layer */
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.hero-particles .pt {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 6px rgba(255,255,255,.6),
              0 0 14px var(--accent-2);
  opacity: 0;
  animation: float-up linear infinite;
  will-change: transform, opacity;
}
.hero-particles .pt.lg {
  width: 5px; height: 5px;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2), 0 0 22px var(--accent);
}
.hero-particles .pt.dim {
  width: 2px; height: 2px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 4px rgba(255,255,255,.35);
}
html[data-theme="light"] .hero-particles .pt {
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 8px rgba(255,255,255,.85), 0 0 16px var(--accent);
}
@keyframes float-up {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  8%   { opacity: var(--max-op, .9); }
  92%  { opacity: var(--max-op, .9); }
  100% { transform: translate3d(var(--dx, 30px), -110vh, 0); opacity: 0; }
}

/* large diffuse light blobs (parallax-ish) */
.hero-blobs {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-blobs::before, .hero-blobs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;
}
html[data-theme="light"] .hero-blobs::before,
html[data-theme="light"] .hero-blobs::after {
  mix-blend-mode: multiply; opacity: .3;
}
.hero-blobs::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: 18%; right: 12%;
  animation: blob-a 14s ease-in-out infinite alternate;
}
.hero-blobs::after {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #6E8FB3, transparent 70%);
  bottom: 22%; left: 10%;
  animation: blob-b 18s ease-in-out infinite alternate;
}
@keyframes blob-a {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.1); }
}
@keyframes blob-b {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(50px, -40px) scale(1.15); }
}

/* fade to bg at bottom — leave most of image clear */
.hero-anime .hero-img + .hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 200px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(210,123,160,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(210,123,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(210,123,160,0); }
}

/* bottom-left hitokoto — only "decoration" left on the hero, brand color #BB6688 */
.hero-anime .hitokoto {
  position: absolute; left: 36px; bottom: 36px;
  z-index: 2;
  max-width: min(540px, 60vw);
  color: #BB6688;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  padding-left: 14px;
  border-left: 2px solid #BB6688;
}
html[data-theme="light"] .hero-anime .hitokoto {
  color: #BB6688;
  text-shadow: 0 1px 10px rgba(255,255,255,.6);
  border-left-color: #BB6688;
}
.hero-anime .hitokoto .hk-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
  font-style: italic;
  color: #BB6688;
}
.hero-anime .hitokoto .hk-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(187, 102, 136, .85);
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .55rem;
}
html[data-theme="light"] .hero-anime .hitokoto .hk-meta { color: rgba(187, 102, 136, .9); }
.hero-anime .hitokoto .hk-meta i { color: #BB6688; font-size: 10px; }

.hero-anime .scroll-hint {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.6);
  letter-spacing: .25em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
html[data-theme="light"] .hero-anime .scroll-hint { color: rgba(74,53,64,.6); }
.hero-anime .scroll-hint::after {
  content: ''; width: 1px; height: 26px;
  background: linear-gradient(to bottom, transparent, currentColor);
  animation: scroll-bob 1.6s ease-in-out infinite;
}
@keyframes scroll-bob { 50% { transform: scaleY(.5); } }
@media (max-width: 720px) {
  .hero-anime .hitokoto { left: 16px; bottom: 80px; max-width: calc(100vw - 32px); }
}

/* featured anime cards */
.featured-list {
  margin-top: 3rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.featured-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.featured-row:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 30px -16px rgba(187,102,136,.5);
}
@media (max-width: 720px) { .featured-row { grid-template-columns: 1fr; } }
.featured-row .cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #2a1a26 0%, #4a2a3e 100%);
  position: relative;
  overflow: hidden;
}
.featured-row .cover::after {
  content: '[anime cover]';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.55);
  letter-spacing: .05em;
}
.featured-row .cover.alt { background: linear-gradient(135deg, #1a2030 0%, #2a3a55 100%); }
.featured-row .cover.alt2 { background: linear-gradient(135deg, #2a2018 0%, #3e2e1a 100%); }
.featured-row .body { padding: 1.25rem 1.4rem 1.25rem 0; display: flex; flex-direction: column; justify-content: center; }
.featured-row .body .meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .04em;
  margin-bottom: .45rem;
  display: flex; gap: 1rem;
}
.featured-row .body .meta .accent { color: var(--accent); }
.featured-row .body h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.3;
  color: var(--text);
}
.featured-row .body p {
  margin: 0 0 .55rem;
  color: var(--text-2); font-size: 14.5px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-row .body .tags {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
}
.featured-row .body .tags a { margin-right: .55rem; }

/* ============================================================
   MOTION — entry, hover, focus
   ============================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes type {
  from { width: 0; }
  to   { width: var(--type-w, 100%); }
}

/* page transition: fade between Tweaks page changes */
.page { animation: fade-in .35s ease both; }

/* primary content reveal — cascade */
.path-bar      { animation: slide-from-left .45s ease both; }
.cover-frame   { animation: fade-up .55s .05s ease both; }
.article-header{ animation: fade-up .55s .12s ease both; }
.markdown      { animation: fade-up .55s .18s ease both; }
.post-meta-foot{ animation: fade-up .55s .25s ease both; }
.prev-next     { animation: fade-up .55s .30s ease both; }
.post-toc-col  { animation: fade-up .55s .35s ease both; }

.home-banner   { animation: fade-up .55s .05s ease both; }
.list-head     { animation: fade-up .45s .15s ease both; }
.post-row      { animation: fade-up .5s ease both; opacity: 0; }
.post-row:nth-child(1) { animation-delay: .20s; }
.post-row:nth-child(2) { animation-delay: .27s; }
.post-row:nth-child(3) { animation-delay: .34s; }
.post-row:nth-child(4) { animation-delay: .41s; }
.post-row:nth-child(5) { animation-delay: .48s; }
.post-row:nth-child(6) { animation-delay: .55s; }
.featured-row  { animation: fade-up .55s ease both; opacity: 0; }
.featured-row:nth-child(1) { animation-delay: .15s; }
.featured-row:nth-child(2) { animation-delay: .25s; }
.featured-row:nth-child(3) { animation-delay: .35s; }
.featured-row:nth-child(4) { animation-delay: .45s; }

.archive-tabs   { animation: fade-up .45s .05s ease both; }
.archive-year   { animation: fade-up .55s ease both; }
.archive-year:nth-child(3){ animation-delay: .12s; }
.archive-year:nth-child(4){ animation-delay: .22s; }
.tag-cloud a    { animation: fade-up .4s ease both; opacity: 0; }
.tag-cloud      { counter-reset: tg; }
.tag-cloud a    { counter-increment: tg; animation-delay: calc(.25s + (var(--i, 0) * 30ms)); }

.about-card     { animation: slide-from-left .55s ease both; }
.about-content section { animation: fade-up .5s ease both; }
.about-content section:nth-child(1) { animation-delay: .15s; }
.about-content section:nth-child(2) { animation-delay: .22s; }
.about-content section:nth-child(3) { animation-delay: .29s; }
.about-content section:nth-child(4) { animation-delay: .36s; }

.hero-anime .hitokoto    { animation: fade-up .8s .6s ease both; }
.hero-anime .scroll-hint { animation: fade-up .55s .85s ease both; }

/* link hover — accent dot trail */
.markdown a {
  position: relative;
  transition: color .15s ease, text-decoration-color .25s ease;
}
.markdown a:hover { color: var(--accent-2); }

/* tag pill hover ripple */
.tag-cloud a, .post-row .tags a, .frontmatter .tag {
  position: relative;
  transition: color .15s ease, transform .15s ease;
}
.tag-cloud a:hover { transform: translateY(-1px); }

/* code block fade on first reveal */
.code-block { animation: fade-up .5s ease both; opacity: 0; animation-delay: .2s; }

/* article title cursor was rendering on a new line because .article-title is a block div;
   removed entirely — the path-bar above already establishes the terminal feel. */

/* TOC active item slide indicator */
.toc a.active {
  animation: fade-up .25s ease both;
}

/* hover lift on cards */
.pn-card { transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.pn-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -16px rgba(187,102,136,.5); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks {
  position: fixed; bottom: 16px; right: 64px; z-index: 200;
  font-family: var(--font-mono); font-size: 12px;
}
.tweaks-toggle { display: none; }
.tweaks-panel {
  display: none;
  position: absolute; bottom: 0; right: 0;
  width: 240px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.tweaks.open .tweaks-panel { display: block; }
.tweaks-panel h4 {
  margin: 0 0 .8rem;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent);
}
.tweaks-row { margin-bottom: .8rem; }
.tweaks-row > label { color: var(--text-faint); font-size: 11px; display: block; margin-bottom: .35rem; letter-spacing: .1em; text-transform: uppercase; }
.tweaks-options { display: flex; flex-wrap: wrap; gap: 4px; }
.tweaks-options button {
  flex: 1; min-width: 0; padding: .35rem .45rem;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  font-family: var(--font-mono); font-size: 11.5px;
  cursor: pointer;
  transition: all .15s;
}
.tweaks-options button:hover { color: var(--text); border-color: var(--text-mute); }
.tweaks-options button.active {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}

/* ============================================================
   THEME INTEGRATION OVERRIDES (terminal × 立绘)
   ============================================================ */

/* ============================================================
   POST BODY — markdown tables (terminal × grid aesthetic)
   ============================================================ */
.markdown-body table,
.article-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.markdown-body table thead,
.article-content table thead {
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.markdown-body table thead th,
.article-content table thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  padding: .65rem .9rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.markdown-body table thead th:last-child,
.article-content table thead th:last-child { border-right: none; }
.markdown-body table tbody td,
.article-content table tbody td {
  padding: .55rem .9rem;
  border-top: 1px dashed var(--border);
  border-right: 1px solid var(--border-2);
  color: var(--text-2);
  vertical-align: top;
}
.markdown-body table tbody td:last-child,
.article-content table tbody td:last-child { border-right: none; }
.markdown-body table tbody tr:first-child td,
.article-content table tbody tr:first-child td { border-top: none; }
.markdown-body table tbody tr:hover td,
.article-content table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
  color: var(--text);
}
.markdown-body table code:not(pre code),
.article-content table code:not(pre code) {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-size: 12.5px;
}

/* Reset table styling inside code blocks (line-number + figure tables in .highlight / .code-container).
   Without this, the markdown-table rules above bleed into hljs's gutter table and break code blocks. */
.markdown-body .highlight table,
.markdown-body .code-container table,
.article-content .highlight table,
.article-content .code-container table {
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}
.markdown-body .highlight table thead,
.markdown-body .code-container table thead,
.article-content .highlight table thead,
.article-content .code-container table thead {
  background: transparent !important;
  border: none !important;
}
.markdown-body .highlight table thead th,
.markdown-body .code-container table thead th,
.article-content .highlight table thead th,
.article-content .code-container table thead th,
.markdown-body .highlight table tbody td,
.markdown-body .code-container table tbody td,
.article-content .highlight table tbody td,
.article-content .code-container table tbody td {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: inherit !important;
  text-align: left !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  white-space: pre !important;
  vertical-align: top !important;
}
.markdown-body .highlight table tbody tr,
.markdown-body .code-container table tbody tr,
.article-content .highlight table tbody tr,
.article-content .code-container table tbody tr {
  background: transparent !important;
  border: none !important;
}
.markdown-body .highlight table tbody tr:hover td,
.markdown-body .code-container table tbody tr:hover td,
.article-content .highlight table tbody tr:hover td,
.article-content .code-container table tbody tr:hover td {
  background: transparent !important;
  color: inherit !important;
}

/* horizontal scroll wrapper on small screens */
.markdown-body .table-wrap,
.article-content .table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 720px) {
  .markdown-body table,
  .article-content table {
    font-size: 12.5px;
    margin: 1rem -.5rem;
    width: calc(100% + 1rem);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .markdown-body table thead th,
  .article-content table thead th { padding: .55rem .65rem; font-size: 11px; }
  .markdown-body table tbody td,
  .article-content table tbody td { padding: .45rem .65rem; }
}

/* nav avatar image */
.nav-avatar { position: relative; overflow: hidden; }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* hide the legacy navbar-drawer and window-mask (mobile drawer is .nav-links now) */
.navbar-drawer { display: none !important; }
.window-mask { display: none !important; }

/* nav submenu (desktop hover popover) */
.nav-link-group[data-has-submenu="true"] {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-submenu {
  position: absolute; top: 100%; left: 0;
  display: flex; flex-direction: column;
  min-width: 140px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem 0;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 12.5px;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  backdrop-filter: blur(10px);
  z-index: 110;
}
.nav-link-group[data-has-submenu="true"]:hover .nav-submenu,
.nav-link-group[data-has-submenu="true"]:focus-within .nav-submenu,
.nav-link-group[data-open="true"] .nav-submenu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.nav-submenu a { padding: .4rem .9rem; color: var(--text-mute); }
.nav-submenu a:hover { color: var(--accent); background: var(--accent-soft); }
.nav-submenu a[aria-current="page"] { color: var(--accent); }
@media (max-width: 720px) {
  .nav-link-group[data-has-submenu="true"] { display: block; }
  .nav-submenu {
    position: static;
    min-width: 0;
    margin-top: 0;
    padding: .15rem 0 .45rem 1.2rem;
    border: none;
    background: transparent;
    backdrop-filter: none;
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  .nav-link-group[data-open="true"] .nav-submenu {
    opacity: 1;
    pointer-events: auto;
  }
}

/* hide preloader entirely if anime.js dependent old preloader is still in DOM via .preloader */
/* (new boot preloader uses #preloader) */

/* legacy markdown body inside article-content — apply terminal styles */
.markdown-body code:not(pre code) {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--accent);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.markdown-body pre {
  font-family: var(--font-mono);
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-variant-ligatures: none;
}

/* legacy article-content container — match new bg/spacing */
body { background: var(--bg) !important; color: var(--text) !important; }

/* aplayer + chat-button widgets — preserve, restyle */
#aplayer .aplayer { border-radius: var(--radius) !important; }
.chat-button-widget { /* existing class — no override, just consistency */ }


/* ============================================================
   HOME BANNER OVERRIDES — restyle existing .home-banner-* classes
   to match the demo anime hero aesthetic (corners cleared, hitokoto added)
   ============================================================ */
.home-banner-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
}
.home-banner-container .description {
  display: none !important; /* drop the old centered description; using hitokoto instead */
}
.home-banner-container .home-banner-background {
  z-index: 0;
}
/* dim and parallax-like film grain treatment on the bg image */
.home-banner-container .home-banner-background::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 60% 40%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}
/* hitokoto on top of banner — uses brand accent #BB6688 */
.home-banner-container .hitokoto {
  position: absolute; left: 36px; bottom: 80px; z-index: 5;
  max-width: min(540px, 60vw);
  color: #BB6688;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  padding-left: 14px;
  border-left: 2px solid #BB6688;
}
@media (max-width: 720px) {
  .home-banner-container .hitokoto { left: 16px; bottom: 100px; max-width: calc(100vw - 32px); }
}
.home-banner-container .hitokoto .hk-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .005em;
  margin: 0 0 .5rem;
  font-style: italic;
  color: #BB6688;
}
.home-banner-container .hitokoto .hk-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(187, 102, 136, .85);
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .55rem;
}
.home-banner-container .hitokoto .hk-meta i { color: #BB6688; font-size: 10px; }
.home-banner-container .hitokoto .hk-from { color: rgba(187, 102, 136, .85); }
/* hide social links default position when we have hitokoto */
.home-banner-container .hero-particles {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
/* make the down-arrow smaller and centered, in keeping with the new minimal aesthetic */
.home-banner-scroll-arrow {
  bottom: 24px !important;
  z-index: 6;
}

/* anime navbar transparency — when banner is visible, navbar is transparent */
html .navbar.has-home-banner,
.home-banner-container ~ * .navbar {
  /* targeted via JS body class if needed */
}
/* simpler: when on home with banner and not scrolled, transparent navbar */
body:has(.home-banner-container):not([data-scrolled]) .navbar,
html[data-page="home"][data-home="anime"]:not([data-scrolled]) .navbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}


/* mobile-only nav extras (sidebar links + statistics) shown inside .nav-links drawer at <= 720px */
.nav-mobile-extras, .nav-mobile-stats { display: none; }
@media (max-width: 720px) {
  .nav-mobile-extras {
    display: flex; flex-direction: column;
    border-top: 1px dashed var(--border);
    margin-top: .35rem; padding-top: .5rem;
  }
  .nav-mobile-extras a {
    padding: .55rem 0;
    color: var(--text-mute);
    border-bottom: 1px dashed var(--border-2);
    display: flex; align-items: center; gap: .55rem;
  }
  .nav-mobile-extras a:hover { color: var(--accent); }
  .nav-mobile-stats {
    display: block;
    border-top: 1px dashed var(--border);
    margin-top: .5rem; padding-top: .75rem;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--text-mute);
  }
}

/* ============================================================
   POST TOC — fuse demo aesthetic with existing .post-toc structure
   ============================================================ */
.post-toc-wrap { position: sticky; top: 80px; align-self: start; }
.post-toc {
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--text-faint);
  opacity: .85;
  transition: opacity .2s ease;
}
.post-toc:hover { opacity: 1; }
.post-toc .toc-title {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: .8rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.post-toc .page-title { display: none; }
.post-toc ol.nav, .post-toc .nav { list-style: none; margin: 0; padding: 0; }
.post-toc .nav .nav { padding-left: 1rem; margin-top: .1rem; border-left: none; }
.post-toc .nav li { padding: .15rem 0; position: relative; }
.post-toc .nav a {
  color: var(--text-mute); display: block;
  position: relative;
  padding: 2px 0 2px .55rem;
  transition: color .15s ease, padding-left .2s ease;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.5;
}
.post-toc .nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 0;
  transition: background-color .2s ease;
}
.post-toc .nav a:hover { color: var(--text); padding-left: .8rem; }
.post-toc .nav a:hover::before { background: var(--accent-line); }
.post-toc .nav a.active, .post-toc .nav .active > a {
  color: var(--accent); padding-left: .8rem;
}
.post-toc .nav a.active::before, .post-toc .nav .active > a::before {
  background: var(--accent);
}
/* suppress legacy toc.styl active-bar (.nav-item.active > a > span:first-child::before) */
.post-toc .nav .nav-item.active > a > span:first-child::before,
.post-toc .nav .active > span:first-child::before,
.post-toc .nav .nav-item.active-current > a > span:first-child::before,
.post-toc .nav .active-current > span:first-child::before {
  content: none !important;
  display: none !important;
}
/* and the dotted guide on nested ol from toc.styl */
.post-toc ol ol { border-left: none !important; }


/* ============================================================
   HOME BANNER — variant switching (terminal vs anime)
   ============================================================ */
.home-banner-variant { display: none; }
html[data-home="terminal"] .home-banner-variant-terminal { display: block; }
html[data-home="anime"]    .home-banner-variant-anime    { display: block; }

/* Terminal variant: neutralize the legacy home-reading-section fullscreen scroll-lock,
   so the page flows normally with the inline terminal banner card. */
html[data-home="terminal"] .main-content-container.home-reading-section {
  position: static !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
html[data-home="terminal"] .main-content-container.home-reading-section .main-content-body,
html[data-home="terminal"] .main-content-container.home-reading-section .main-content-footer {
  transform: none !important;
}
html[data-home="terminal"] .home-banner-background { display: none !important; }
html[data-home="terminal"] .home-banner-container { display: none !important; }
html[data-home="terminal"] .home-banner-scroll-arrow { display: none !important; }
html[data-home="terminal"] .hero-particles { display: none !important; }

/* Anime variant: ensure article list is opaque/legible after scroll past hero */
html[data-home="anime"] .page-container.home-banner-reading .home-content-container,
html[data-home="anime"] .page-container.home-banner-reading .main-content-body,
html[data-home="anime"] .page-container.home-banner-reading .main-content {
  background: var(--bg) !important;
}
html[data-home="anime"] .page-container.home-banner-reading .post-row {
  background: var(--bg);
}
/* Hide terminal banner wrapper entirely when in anime mode */
html[data-home="anime"] .home-banner-terminal-wrap { display: none !important; }
/* Hide anime variant's container when in terminal mode (already hidden, but explicit) */
html[data-home="terminal"] .home-banner-variant-anime { display: none !important; }

/* ============================================================
   HOME BANNER — terminal-card variant (IDE window with portrait)
   ============================================================ */
.home-banner-terminal-wrap {
  max-width: calc(720px + 260px + 64px);
  margin: 5rem auto 1.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) { .home-banner-terminal-wrap { padding: 0 1rem; margin-top: 3rem; } }
/* Push the home content shell down so the banner doesn't overlap */
html[data-page="home"][data-home="terminal"] .main-content-body .home-content-container { padding-top: 1rem; }

.home-banner.home-banner-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
  margin: 0 0 3rem;
}
.home-banner.home-banner-card .banner-head {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.home-banner.home-banner-card .banner-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.home-banner.home-banner-card .banner-head .dot.r { background: #C56F7B; }
.home-banner.home-banner-card .banner-head .dot.y { background: #C7A86B; }
.home-banner.home-banner-card .banner-head .dot.g { background: #6FA48A; }
.home-banner.home-banner-card .banner-head-label { margin-left: .4rem; }
.home-banner.home-banner-card .banner-body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  min-height: 380px;
}
.home-banner.home-banner-card .banner-text {
  padding: 1.6rem 1.85rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
  gap: .55rem;
  min-width: 0;
  overflow: hidden;
}
.home-banner.home-banner-card .greeting {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-mute);
  margin: 0;
  letter-spacing: .02em;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.home-banner.home-banner-card .greeting .accent { color: var(--accent); }
.home-banner.home-banner-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--text);
}
.home-banner.home-banner-card h1 .accent-dot { color: var(--accent); }
.home-banner.home-banner-card .sub {
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.55;
  max-width: 38ch;
  margin: 0;
}
.home-banner.home-banner-card .sub i#subtitle { font-style: normal; }
.home-banner.home-banner-card .stats {
  display: flex; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-mute);
  font-feature-settings: 'liga' 0, 'calt' 0;
  margin: .15rem 0 0;
}
.home-banner.home-banner-card .stats span b { color: var(--accent); font-weight: 600; }
.home-banner.home-banner-card .banner-hitokoto {
  margin: .55rem 0 0;
  position: static;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-2);
  padding-top: .65rem;
  border-top: 1px dashed var(--border);
  background: transparent;
  backdrop-filter: none;
  text-shadow: none;
  /* fixed min-height so banner doesn't reflow as hitokoto loads, but content fits */
  min-height: 3.2em;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.home-banner.home-banner-card .banner-hitokoto .hk-text {
  margin: 0 0 .2rem;
  color: var(--text-2);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  line-height: 1.45;
}
.home-banner.home-banner-card .banner-hitokoto .hk-meta {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--text-faint); font-size: 11.5px;
}
.home-banner.home-banner-card .banner-hitokoto .hk-meta i { color: var(--accent); font-size: 10px; }
.home-banner.home-banner-card .banner-illust {
  position: relative;
  border-left: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(187,102,136,.18), transparent 60%),
    linear-gradient(45deg, #1a1620, #2c1f2a);
  overflow: hidden;
  min-height: 380px;
}
html[data-theme="light"] .home-banner.home-banner-card .banner-illust {
  background:
    linear-gradient(135deg, rgba(168,82,120,.18), transparent 60%),
    linear-gradient(45deg, #f0e8ec, #e8dde3);
}
.home-banner.home-banner-card .banner-illust .banner-illust-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
html[data-theme="dark"]  .home-banner.home-banner-card .banner-illust .banner-illust-dark  { display: block; }
html[data-theme="light"] .home-banner.home-banner-card .banner-illust .banner-illust-light { display: block; }
/* fallback when only one variant is provided */
html[data-theme="dark"]  .home-banner.home-banner-card .banner-illust:not(:has(.banner-illust-dark))  .banner-illust-light { display: block; }
html[data-theme="light"] .home-banner.home-banner-card .banner-illust:not(:has(.banner-illust-light)) .banner-illust-dark  { display: block; }
.home-banner.home-banner-card .banner-illust::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.18), transparent 35%);
  pointer-events: none;
}
html[data-theme="light"] .home-banner.home-banner-card .banner-illust::after {
  background: linear-gradient(to right, rgba(255,255,255,.25), transparent 35%);
}
@media (max-width: 760px) {
  .home-banner.home-banner-card .banner-body { grid-template-columns: 1fr; height: auto; }
  .home-banner.home-banner-card .banner-text { padding: 1.5rem 1.25rem; }
  .home-banner.home-banner-card .banner-illust { min-height: 200px; border-left: none; border-top: 1px solid var(--border); order: -1; }
}


/* ============================================================
   HOME ARTICLE LIST — uses demo's .post-row markup directly
   ============================================================ */
.home-content-container { padding: 0 1rem; }

/* list-head holds: $ ls -lt / count / View all by years */
.list-head .home-blog-topbar-info {
  color: var(--text-mute);
  font-family: var(--font-mono); font-size: 13px;
}
.list-head .home-blog-topbar-link {
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: 13px;
  margin-left: 1rem;
  transition: color .15s;
}
.list-head .home-blog-topbar-link:hover { color: var(--accent-2); }
.list-head .home-blog-topbar-link i { font-size: 11px; }

/* date column on home: 04-26 + smaller year line */
.post-list .post-row .date {
  text-align: left; line-height: 1.3;
}
.post-list .post-row .date .y { display: inline-block; margin-top: 1px; }

/* post cover thumbnail — hidden by default (terminal mode keeps the clean text list),
   shown in anime mode where the visual richer feel is appropriate. */
.post-list .post-row .post-cover { display: none; }
html[data-home="anime"] .post-list .post-row.has-cover {
  grid-template-columns: 88px 140px 1fr max-content;
}
html[data-home="anime"] .post-list .post-row.has-cover .post-cover {
  display: block;
  width: 140px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
  align-self: start;
  margin-top: 2px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
html[data-home="anime"] .post-list .post-row.has-cover .post-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(.9);
}
html[data-home="anime"] .post-list .post-row.has-cover:hover .post-cover {
  border-color: var(--accent-line);
  box-shadow: 0 6px 24px -10px rgba(0,0,0,.35);
}
html[data-home="anime"] .post-list .post-row.has-cover:hover .post-cover img {
  transform: scale(1.05);
  filter: saturate(1);
}
html[data-home="anime"] .post-list .post-row.has-cover .post-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--accent) 20%, transparent));
  pointer-events: none;
  opacity: .55;
}
@media (max-width: 720px) {
  html[data-home="anime"] .post-list .post-row.has-cover {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  html[data-home="anime"] .post-list .post-row.has-cover .post-cover {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 7;
    margin-top: .5rem;
    order: 3;
  }
  html[data-home="anime"] .post-list .post-row.has-cover .body { grid-column: 2 / -1; }
}

.post-row .body .home-article-sticky {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.post-row .body .home-article-sticky i { font-size: 10px; }

@media (max-width: 720px) {
  .post-list .post-row {
    grid-template-columns: 56px 1fr;
    gap: .8rem;
  }
  .post-list .post-row .meta-right { display: none; }
  .list-head { flex-wrap: wrap; gap: .35rem .8rem; }
  .list-head .home-blog-topbar-link { margin-left: 0; }
}


/* ============================================================
   POST PAGE — terminal x 立绘 (overlays on existing .article-content-container)
   ============================================================ */
.post-page-container {
  display: grid !important;
  grid-template-columns: minmax(0, 720px) 260px !important;
  gap: 64px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  align-items: start;
}
.post-page-container .article-content-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2.5rem 0 4rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.post-page-container .toc-content-container {
  display: block !important;
  opacity: 1 !important;
  width: 240px !important;
  min-width: 240px !important;
  flex: none !important;
  position: sticky;
  top: 80px;
  align-self: start;
  padding: 2.5rem 0 0 !important;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  transition: opacity .25s ease, transform .25s ease, width .3s ease, min-width .3s ease;
}
.post-page-container .toc-content-container::-webkit-scrollbar { width: 4px; }
.post-page-container .toc-content-container::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px;
}
.post-page-container.toc-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  max-width: calc(720px + 3rem) !important;
}
.post-page-container.toc-collapsed .article-content-container {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
.post-page-container.toc-collapsed .toc-content-container {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  transform: translateX(20px);
  pointer-events: none;
  overflow: hidden;
  padding: 0 !important;
}
@media (max-width: 1080px) {
  .post-page-container {
    display: block !important;
    max-width: 720px !important;
  }
  .post-page-container .toc-content-container { display: none !important; }
}
@media (max-width: 720px) {
  .post-page-container { padding: 0 1rem !important; }
  .post-page-container .article-content-container { padding: 1.5rem 0 3rem !important; }
}

/* path-bar at top */
.post-path-bar { margin-bottom: 1.5rem; }

/* IDE window cover frame */
.cover-frame {
  position: relative !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: var(--bg-2);
}
.cover-frame .cover-head {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-mute);
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg-2);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.cover-frame .cover-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.cover-frame .cover-head .dot.r { background: #C56F7B; }
.cover-frame .cover-head .dot.y { background: #C7A86B; }
.cover-frame .cover-head .dot.g { background: #6FA48A; }
.cover-frame .cover-head .label { margin-left: .4rem; }
.cover-frame .cover-img-real {
  width: 100%; height: 320px;
  object-fit: cover; display: block;
  border-radius: 0 !important;
  filter: brightness(.92);
}
html[data-theme="light"] .cover-frame .cover-img-real { filter: brightness(.98); }

/* title with `#` accent prefix */
.article-title { padding: 0 !important; }
.article-title-after-cover, .article-title-no-cover {
  width: 100%; padding-top: .5rem;
}
.article-title-regular {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4.2vw, 3rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
  margin: 0 0 1.25rem !important;
  color: var(--text) !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  text-align: left !important;
}
.article-title-regular .hash { color: var(--accent); margin-right: .35rem; font-weight: 500; }

/* article-header: avatar + meta — keep existing markup, lighten visual */
.article-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  gap: .8rem !important;
}
.article-header .avatar { width: 44px !important; height: 44px !important; }
.article-header .avatar img { border-radius: 50%; }
.article-header .info .author .name { font-family: var(--font-display); font-weight: 600; }
.article-header .meta-info {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-mute);
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* § NN automatic h2 numbering */
.article-content.markdown-body { counter-reset: h2-num; padding: 0 !important; }
.article-content.markdown-body h2 {
  counter-increment: h2-num;
  position: relative;
  padding-left: 0;
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: -.01em;
}
.article-content.markdown-body h2::before {
  content: '§ ' counter(h2-num, decimal-leading-zero) '\00a0\00a0';
  font-family: var(--font-mono);
  font-size: .8em; font-weight: 500;
  color: var(--accent);
  letter-spacing: .02em;
  font-feature-settings: 'liga' 0, 'calt' 0;
  white-space: nowrap;
}
.article-content.markdown-body h3 {
  font-family: var(--font-display) !important;
  font-weight: 600;
}
.article-content.markdown-body h3::before {
  content: '> '; color: var(--accent);
  font-family: var(--font-mono); margin-right: .25rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* article-content links — accent underline */
.article-content.markdown-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.article-content.markdown-body a:hover { text-decoration-color: var(--accent); }

/* blockquote — terminal `quote` tag */
.article-content.markdown-body blockquote {
  margin: 1.5rem 0;
  padding: .9rem 1.2rem;
  background: var(--bg-2);
  border-left: 2px solid var(--accent-line) !important;
  color: var(--text-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.article-content.markdown-body blockquote::before {
  content: 'quote';
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: .35rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* lists — accent triangle markers */
.article-content.markdown-body ul li::marker { color: var(--accent); }


/* ============================================================
   TOOLS page — terminal x 立绘
   ============================================================ */
.page-title-header {
  font-family: var(--font-display) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  color: var(--text);
}
.page-title-header::before {
  content: '# '; color: var(--accent); font-family: var(--font-display);
}
/* tools left nav */
.tool-nav-item {
  font-family: var(--font-mono); font-size: 13px;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-mute) !important;
  transition: all .15s ease !important;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.tool-nav-item:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  transform: none !important;
}
.tool-nav-item.active {
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}

/* tool category sections */
section[id] > h2 {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: var(--accent) !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  padding-bottom: .55rem !important;
  border-bottom: 1px dashed var(--border) !important;
}
section[id] > h2::before { content: '$ '; color: var(--text-mute); font-weight: 400; }

/* tool item cards — flatten the existing fancy cards */
section[id] .group .exdoubled-box-shadow-flat,
section[id] a.group > div {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: all .2s ease !important;
}
section[id] a.group:hover > div {
  border-color: var(--accent-line) !important;
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-2)) !important;
  transform: translateY(-2px) !important;
}
section[id] a.group h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.005em;
  color: var(--text) !important;
}
section[id] a.group:hover h3 { color: var(--accent) !important; }
section[id] a.group p {
  font-size: 13px !important;
  color: var(--text-mute) !important;
}

/* ============================================================
   CATEGORIES list page — terminal x 立绘
   ============================================================ */
.category-list-content { font-family: var(--font-sans); }
.category-list-content .all-category {
  list-style: none; padding-left: 0;
}
.category-list-content .all-category .all-category {
  padding-left: 1.4rem; border-left: 1px solid var(--border); margin-top: .25rem;
}
.category-list-content .all-category .category-list-item {
  padding: .65rem 0;
  border-bottom: 1px dashed var(--border);
  transition: padding .15s ease;
}
.category-list-content .all-category .category-list-item:hover { padding-left: .35rem; }
.category-list-content .all-category .category-list-link {
  color: var(--text); font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
}
.category-list-content .all-category .category-list-link:hover { color: var(--accent); }
.category-list-content .all-category .category-list-count,
.category-list-content .all-category .category-list-link::after {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-faint);
  margin-left: .4rem;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* category-detail page — title row + posts list (already styled by archive) */
.category-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--text);
  margin: 0 0 1.5rem;
  display: flex; align-items: center; gap: .55rem;
}
.category-name i { color: var(--accent); font-size: .85em; }
.category-name::before { content: '# '; color: var(--accent); font-family: var(--font-display); }


/* friend-card avatar — placeholder via :empty / .av-broken */
.friend-card .av:empty,
.friend-card .av.av-broken {
  display: flex; align-items: center; justify-content: center;
}
.friend-card .av:empty::before,
.friend-card .av.av-broken::before {
  content: ''; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  /* fa-user content code */
  content: '\f007';
  color: var(--text-mute); font-size: 18px;
}


/* hide legacy in-cover title (new title with # appears below cover-frame) */
.article-title .cover-frame ~ div .article-title-cover,
.article-title-cover { display: none !important; }


/* ============================================================
   TOOLS PAGE — terminal × 立绘 redesign
   matches archive/categories shell layout
   ============================================================ */
.tools-shell { padding-top: 2rem; }
.tools-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .tools-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.tools-side {
  position: sticky;
  top: calc(64px + 1.5rem);
  align-self: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: .9rem .9rem 1rem;
}
@media (max-width: 900px) {
  .tools-side { position: static; padding: .6rem .55rem; }
}
.tools-side-head {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .18em; text-transform: uppercase;
  padding: 0 .25rem .55rem;
  margin-bottom: .35rem;
  border-bottom: 1px dashed var(--border);
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.tools-side-head::before { content: '$ '; color: var(--text-mute); }
.tools-nav {
  display: flex; flex-direction: column; gap: .15rem;
}
@media (max-width: 900px) {
  .tools-side-head { display: none; }
  .tools-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: .35rem;
    padding-bottom: .25rem;
  }
}
.tools-nav-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-mute);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
  font-feature-settings: 'liga' 0, 'calt' 0;
}
.tools-nav-item i { color: var(--text-faint); width: 14px; text-align: center; font-size: 13px; }
.tools-nav-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tools-nav-item .num {
  font-size: 11px; color: var(--text-faint);
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.tools-nav-item:hover {
  color: var(--text); background: var(--bg-3);
  border-color: var(--border);
}
.tools-nav-item:hover i { color: var(--accent); }
.tools-nav-item.active,
.tools-nav-item[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.tools-nav-item.active i,
.tools-nav-item[aria-current="true"] i { color: var(--accent); }

.tools-main { min-width: 0; }
.tools-section { margin-bottom: 2.5rem; scroll-margin-top: calc(64px + 1rem); }
.tools-section-head {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed var(--border);
}
.tools-section-head .hash { color: var(--accent); font-weight: 500; margin-right: .15rem; }
.tools-section-head .cnt {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  color: var(--text-faint); letter-spacing: .12em; text-transform: uppercase;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .9rem;
}
.tool-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
}
.tool-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--bg-2));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -18px rgba(187,102,136,.4);
}
.tool-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  position: relative;
  flex-shrink: 0;
}
.tool-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.tool-card:hover .tool-thumb img { transform: scale(1.06); }

.tool-body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.tool-head {
  display: flex; align-items: center; gap: .5rem;
}
.tool-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.tool-card:hover .tool-name { color: var(--accent); }
.tool-arrow {
  font-size: 11px;
  color: var(--text-faint);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .2s, transform .2s, color .2s;
}
.tool-card:hover .tool-arrow {
  opacity: 1;
  color: var(--accent);
  transform: translate(0, 0);
}
.tool-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* hide the old page-title-header which was styled by tailwind utilities */
.tools-shell .page-title-header { display: none; }

.mobile-only-tool { display: none !important; }
.side-tools-container .tool-label { display: none; }

/* ============================================================
   RESPONSIVE REFINEMENT PASS
   ============================================================ */
:root {
  --mobile-gutter: 1rem;
  --mobile-gutter-tight: .85rem;
}

@media (max-width: 720px) {
  .tools-shell {
    padding-top: 1.5rem;
  }

  .tools-layout {
    gap: 1.1rem;
    min-width: 0;
  }

  .tools-section {
    margin-bottom: 2rem;
  }

  .tools-side,
  .tools-main {
    width: 100%;
    min-width: 0;
  }

  .tools-nav {
    width: 100%;
    min-width: 0;
  }

  .tools-section-head {
    flex-wrap: wrap;
    gap: .35rem .55rem;
  }

  .tools-section-head .cnt {
    width: 100%;
    margin-left: 0;
    padding-left: 1.35rem;
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-card {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .85rem;
    padding: .85rem;
  }

  .tool-thumb {
    width: 52px;
    height: 52px;
  }

  .navbar {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1),
                background .18s ease, border-color .18s ease,
                box-shadow .18s ease;
  }

  .navbar-inner {
    align-items: center;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand .path {
    display: inline-block;
    max-width: min(42vw, 14ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .nav-actions {
    flex-shrink: 0;
  }

  .icon-btn,
  .nav-burger {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .nav-links {
    z-index: 120;
    max-height: calc(100dvh - 60px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem var(--mobile-gutter) max(1rem, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 98%, var(--bg-2));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 14px 32px -24px rgba(0,0,0,.35);
  }

  .nav-links > a,
  .nav-links > .nav-link-group > .nav-link-button {
    min-height: 44px;
  }

  .nav-submenu {
    padding: .1rem 0 .4rem .95rem;
    gap: .1rem;
  }

  .nav-submenu a,
  .nav-mobile-extras a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .nav-mobile-stats .statistics {
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
  }

  .nav-mobile-stats .statistics .item {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }

  .nav-mobile-stats .statistics .number {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .nav-mobile-stats .statistics .label {
    font-size: .72rem;
    text-align: center;
  }

  .main-content-body {
    padding: 0 0 2rem !important;
  }

  .main-content {
    width: 100% !important;
    max-width: none;
  }

  .shell {
    padding: 1.4rem var(--mobile-gutter) 3.6rem;
  }

  .home-content-container {
    padding: 0 var(--mobile-gutter);
  }

  .page-template-container {
    padding: 1.35rem var(--mobile-gutter) 2rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page-template-content {
    overflow-wrap: anywhere;
  }

  .page-template-content > :first-child {
    margin-top: 0 !important;
  }

  .page-template-content > h1:first-child {
    font-size: clamp(1.6rem, 7vw, 2rem);
    line-height: 1.15;
    margin-bottom: 1.25rem !important;
  }

  .page-template-comments {
    margin-top: 1.8rem;
  }

  .archive-tabs {
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
  }

  .archive-tabs::-webkit-scrollbar {
    display: none;
  }

  .archive-tabs a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .archive-year {
    grid-template-columns: 1fr;
    gap: .9rem;
    margin-bottom: 1.5rem;
  }

  .archive-year .year {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .55rem;
    font-size: 1.55rem;
  }

  .archive-year .year .ct {
    margin-top: 0;
  }

  .archive-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: .75rem;
    padding: .8rem 0;
    align-items: start;
  }

  .archive-row .t {
    min-width: 0;
  }

  .archive-row .cat {
    grid-column: 2;
    margin-top: -.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .categories-grid,
  .tags-pill-grid,
  .friends-grid {
    grid-template-columns: 1fr;
  }

  .categories-grid,
  .tags-pill-grid {
    margin-top: 1.4rem;
  }

  .tag-pill {
    grid-template-columns: max-content minmax(0, 1fr) 56px max-content;
    gap: .5rem;
    padding: .75rem .85rem;
  }

  .friend-card {
    padding: .95rem;
    gap: .75rem;
  }

  .friend-card .name,
  .friend-card .bio {
    min-width: 0;
  }

  .site-footer {
    padding: 0 var(--mobile-gutter) max(1.5rem, env(safe-area-inset-bottom));
  }

  .site-footer-inner {
    gap: 1rem;
  }

  .foot-center .runtime {
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem .45rem;
  }

  .foot-icons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .foot-powered {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .right-side-tools-container {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .side-tools-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45rem;
  }

  .mobile-only-tool {
    display: inline-flex !important;
  }

  .side-tools-container .hidden-tools-list,
  .side-tools-container .visible-tools-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap !important;
  }

  .side-tools-container .visible-tools-list {
    position: relative;
    z-index: 2;
    width: auto;
  }

  .side-tools-container .hidden-tools-list {
    position: absolute;
    right: 0;
    bottom: calc(100% + .55rem);
    width: min(11.5rem, calc(100vw - 1rem));
    max-height: min(50vh, 20rem);
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 98%, var(--bg-2));
    box-shadow: 0 14px 34px -26px rgba(0,0,0,.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.97);
    transition: opacity .16s ease, transform .16s ease;
  }

  .side-tools-container .visible-tools-list > .right-bottom-tools,
  .side-tools-container .hidden-tools-list > .right-bottom-tools {
    grid-column: 1 / -1;
  }

  .side-tools-container .hidden-tools-list.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .side-tools-container .right-bottom-tools {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 97%, var(--bg-2));
    box-shadow: 0 10px 24px -22px rgba(0,0,0,.28);
    transition: transform .16s ease, border-color .16s ease,
                background .16s ease, opacity .16s ease;
    color: var(--text-2) !important;
  }

  .side-tools-container .right-bottom-tools a {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    color: inherit !important;
  }

  .side-tools-container .right-bottom-tools i,
  .side-tools-container .right-bottom-tools .percent {
    color: inherit !important;
  }

  .side-tools-container .hidden-tools-list .right-bottom-tools {
    width: 100% !important;
    min-width: 0;
    height: 40px !important;
    justify-content: flex-start;
    gap: .65rem;
    padding: 0 .85rem;
    border-radius: 12px;
  }

  .side-tools-container .hidden-tools-list .right-bottom-tools a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
  }

  .side-tools-container .hidden-tools-list .tool-label {
    display: inline-flex;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--text-2);
    white-space: nowrap;
  }

  .side-tools-container .visible-tools-list .tool-label {
    display: none;
  }

  html[data-theme="light"] .side-tools-container .right-bottom-tools {
    background: var(--background-color);
    border-color: rgba(0,0,0,.08);
    color: #3a3a40 !important;
    box-shadow: 0 10px 22px -22px rgba(0,0,0,.18);
  }

  html[data-theme="light"] .side-tools-container .hidden-tools-list {
    background: var(--background-color);
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 12px 28px -24px rgba(0,0,0,.18);
  }

  html[data-theme="light"] .nav-links {
    background: var(--background-color);
  }

  .side-tools-container .right-bottom-tools .percent {
    font-size: .8rem;
  }

  .home-banner-terminal-wrap {
    margin: 4rem auto 1.25rem;
    padding: 0 var(--mobile-gutter);
  }

  html[data-page="home"][data-home="terminal"] .main-content-body .home-content-container {
    padding-top: .25rem;
  }

  .home-banner.home-banner-card {
    margin-bottom: 1.75rem;
  }

  .home-banner.home-banner-card .banner-head {
    padding: .55rem .8rem;
  }

  .home-banner.home-banner-card .banner-body {
    min-height: 0;
  }

  .home-banner.home-banner-card .banner-text {
    padding: 1.25rem var(--mobile-gutter);
    gap: .65rem;
  }

  .home-banner.home-banner-card h1 {
    font-size: clamp(1.6rem, 7vw, 1.95rem);
  }

  .home-banner.home-banner-card .sub {
    max-width: none;
    font-size: 13.5px;
  }

  .home-banner.home-banner-card .stats {
    gap: .55rem .85rem;
  }

  .home-banner.home-banner-card .banner-hitokoto {
    min-height: 0;
    margin-top: .2rem;
  }

  .home-banner.home-banner-card .banner-hitokoto .hk-text {
    -webkit-line-clamp: 3;
  }

  .home-banner.home-banner-card .banner-illust {
    min-height: min(42vh, 250px);
    max-height: 280px;
  }

  .home-banner.home-banner-card .banner-illust::after {
    background: linear-gradient(to top, rgba(0,0,0,.18), transparent 45%);
  }

  .home-banner-container {
    min-height: 100svh;
  }

  .home-banner-container .content.home-banner-content-shell {
    width: 100%;
    min-height: 100svh;
    margin-top: 0;
    padding: calc(5rem + env(safe-area-inset-top)) var(--mobile-gutter) calc(8.75rem + env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  .home-banner-container .description.banner-description {
    width: auto !important;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.18;
  }

  .home-banner-container .description.banner-description p {
    margin-top: .85rem;
  }

  .home-banner-container .description.banner-description p i {
    display: block;
    font-size: clamp(.95rem, 4.2vw, 1.08rem);
    line-height: 1.5;
  }

  .home-banner-social-row {
    left: 0;
    right: 0;
    bottom: calc(3.9rem + env(safe-area-inset-bottom));
    width: auto !important;
    max-width: none !important;
    padding: 0 var(--mobile-gutter) !important;
    justify-content: center !important;
  }

  .home-banner-social-list {
    width: min(100%, 30rem);
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem .95rem;
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--bg) 94%, rgba(255,255,255,.08)) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 12px 28px -24px rgba(0,0,0,.34);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .home-banner-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
  }

  .home-banner-container .hitokoto {
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    bottom: calc(8rem + env(safe-area-inset-bottom));
    max-width: none;
    padding: .8rem .95rem;
    border-radius: var(--radius);
    border: 1px solid rgba(187,102,136,.28);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    box-shadow: 0 12px 24px -20px rgba(0,0,0,.32);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html[data-theme="light"] .home-banner-social-list {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.08) !important;
  }

  html[data-theme="light"] .home-banner-container .hitokoto {
    background: rgba(255,255,255,.92);
    border-color: rgba(187,102,136,.22);
  }

  .home-banner-container .hitokoto .hk-text {
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: .35rem;
  }

  .home-banner-container .hitokoto .hk-meta {
    font-size: 11px;
    gap: .4rem;
  }

  .home-banner-scroll-arrow {
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    font-size: 1.55rem;
  }

  .article-title-regular {
    font-size: clamp(1.75rem, 8vw, 2.3rem) !important;
    margin-bottom: 1rem !important;
  }

  .cover-frame .cover-img-real {
    height: min(52vw, 260px);
  }

  .article-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .article-header .info,
  .article-header .meta-info {
    min-width: 0;
  }

  .article-header .meta-info {
    overflow-wrap: anywhere;
  }

  .article-content.markdown-body h2::before {
    display: block;
    margin-bottom: .3rem;
  }

  .shell > .article-title-regular {
    margin: .25rem 0 1.1rem !important;
  }
}

@media (max-width: 540px) {
  .shell {
    padding: 1.2rem var(--mobile-gutter-tight) 3rem;
  }

  .home-content-container,
  .site-footer {
    padding-left: var(--mobile-gutter-tight);
    padding-right: var(--mobile-gutter-tight);
  }

  .page-template-container {
    padding-left: var(--mobile-gutter-tight) !important;
    padding-right: var(--mobile-gutter-tight) !important;
  }

  .brand .path {
    max-width: min(46vw, 11ch);
  }

  .archive-row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .65rem;
  }

  .tag-pill {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .tag-pill .bar,
  .tag-pill .count {
    grid-column: 2;
  }

  .friend-card {
    padding: .85rem;
  }

  .right-side-tools-container {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .side-tools-container .right-bottom-tools {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    font-size: .95rem !important;
  }

  .side-tools-container .hidden-tools-list {
    width: min(10.75rem, calc(100vw - .75rem));
  }

  .home-banner.home-banner-card .banner-head {
    padding: .52rem .75rem;
  }

  .home-banner.home-banner-card .banner-text {
    padding: 1.05rem var(--mobile-gutter-tight) 1.15rem;
  }

  .home-banner.home-banner-card .banner-illust {
    min-height: 190px;
  }

  .home-banner-container .content.home-banner-content-shell {
    padding: calc(4.6rem + env(safe-area-inset-top)) var(--mobile-gutter-tight) calc(8.4rem + env(safe-area-inset-bottom));
  }

  .home-banner-container .description.banner-description {
    font-size: clamp(1.35rem, 8vw, 1.8rem) !important;
  }

  .home-banner-social-row {
    padding: 0 var(--mobile-gutter-tight) !important;
  }

  .home-banner-social-list {
    gap: .65rem;
    padding: .7rem .8rem;
  }

  .home-banner-container .hitokoto {
    left: var(--mobile-gutter-tight);
    right: var(--mobile-gutter-tight);
  }

  .article-content.markdown-body h2::before {
    font-size: .72em;
  }

  .article-content.markdown-body blockquote {
    padding: .85rem .95rem;
  }
}

/* ============================================================
   COMMENTS — waline redesign bridge
   ============================================================ */
.comments-container.comments-provider-waline {
  --waline-theme-color: var(--accent);
  --waline-active-color: var(--accent-2);
  --waline-color: var(--text-2);
  --waline-dark-grey: var(--text-mute);
  --waline-light-grey: var(--text-faint);
  --waline-bgcolor: var(--bg);
  --waline-bgcolor-light: var(--bg-2);
  --waline-bgcolor-hover: var(--bg-3);
  --waline-border-color: var(--border);
  --waline-disable-bgcolor: var(--bg-3);
  --waline-disable-color: var(--text-faint);
  --waline-code-bgcolor: #1a1a20;
  --waline-bq-color: var(--accent-line);
  --waline-info-bgcolor: var(--bg-2);
  --waline-info-color: var(--text-faint);
}

.comments-container.comments-provider-waline [data-waline],
.comments-container.comments-provider-waline [data-waline] * {
  box-sizing: border-box;
}

.comments-container.comments-provider-waline .comment-area-head {
  margin-bottom: 1.5rem;
}

.comments-container.comments-provider-waline .comment-area-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.comments-container.comments-provider-waline .comment-area-kicker .prompt {
  color: var(--accent);
}

.comments-container.comments-provider-waline .comment-area-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}

.comments-container.comments-provider-waline .comment-area-title {
  flex: 1;
  width: auto;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.comments-container.comments-provider-waline .comment-area-title-mark {
  margin-right: .35rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.comments-container.comments-provider-waline .comment-area-meta {
  flex-shrink: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.comments-container.comments-provider-waline [data-waline] {
  color: var(--text-2);
}

.comments-container.comments-provider-waline [data-waline] a {
  color: var(--accent);
}

.comments-container.comments-provider-waline [data-waline] a:hover {
  color: var(--accent-2);
}

.comments-container.comments-provider-waline [data-waline] hr {
  border-color: var(--border);
}

.comments-container.comments-provider-waline [data-waline] blockquote {
  margin: .85rem 0;
  padding: .75rem .95rem;
  border-inline-start: 2px solid var(--accent-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg);
  color: var(--text-mute);
}

.comments-container.comments-provider-waline [data-waline] :not(pre) > code {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--accent);
  font-family: var(--font-mono);
}

.comments-container.comments-provider-waline .wl-btn {
  min-width: auto;
  padding: .6rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.comments-container.comments-provider-waline .wl-btn:hover,
.comments-container.comments-provider-waline .wl-btn:active {
  border-color: var(--accent-line);
  background: var(--bg-3);
  color: var(--text);
}

.comments-container.comments-provider-waline .wl-btn.primary {
  border-color: var(--accent-line);
  background: var(--accent);
  color: #fff;
}

.comments-container.comments-provider-waline .wl-btn.primary:hover,
.comments-container.comments-provider-waline .wl-btn.primary:active {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: #fff;
}

.comments-container.comments-provider-waline .wl-panel {
  position: relative;
  margin: 0;
  padding: 1rem;
  padding-top: 3.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: none;
}

.comments-container.comments-provider-waline .wl-panel:hover {
  border-color: var(--accent-line);
  box-shadow: none;
}

.comments-container.comments-provider-waline .wl-panel::before {
  content: '$ write-comment';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.35rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: var(--bg);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

.comments-container.comments-provider-waline .wl-header {
  display: grid;
  gap: .8rem;
  overflow: visible;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.comments-container.comments-provider-waline .wl-header-1 {
  grid-template-columns: 1fr;
}

.comments-container.comments-provider-waline .wl-header-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comments-container.comments-provider-waline .wl-header-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comments-container.comments-provider-waline .wl-header-item {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  width: auto;
  min-width: 0;
}

.comments-container.comments-provider-waline .wl-header-item:not(:last-child) {
  border-bottom: none;
}

.comments-container.comments-provider-waline .wl-header label {
  min-width: 0;
  padding: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.comments-container.comments-provider-waline .wl-header input {
  width: 100%;
  min-height: 2.65rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: .84rem;
}

.comments-container.comments-provider-waline .wl-editor,
.comments-container.comments-provider-waline .wl-input {
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.comments-container.comments-provider-waline .wl-editor {
  width: 100%;
  min-height: 10.5rem;
  margin: .95rem 0 0;
  padding: .95rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: .9rem;
  line-height: 1.8;
  resize: vertical;
}

.comments-container.comments-provider-waline .wl-editor:focus,
.comments-container.comments-provider-waline .wl-input:focus {
  border-color: var(--accent-line);
  background: var(--bg);
}

.comments-container.comments-provider-waline .wl-editor::placeholder,
.comments-container.comments-provider-waline .wl-input::placeholder {
  color: var(--text-faint);
}

.comments-container.comments-provider-waline .wl-preview {
  margin-top: .95rem;
  padding: .85rem 1rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.comments-container.comments-provider-waline .wl-preview h4 {
  margin: 0 0 .55rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.comments-container.comments-provider-waline .wl-footer {
  align-items: center;
  gap: .8rem;
  margin: .95rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--border);
}

.comments-container.comments-provider-waline .wl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.comments-container.comments-provider-waline .wl-action {
  width: 1.95rem;
  height: 1.95rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.comments-container.comments-provider-waline .wl-action:hover {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}

.comments-container.comments-provider-waline .wl-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.comments-container.comments-provider-waline .wl-info .wl-text-number,
.comments-container.comments-provider-waline .wl-sort li {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.comments-container.comments-provider-waline .wl-info button {
  margin-inline-start: 0;
}

.comments-container.comments-provider-waline .wl-meta-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1.6rem 0 .9rem;
  padding: 0 0 .8rem;
  border-bottom: 1px dashed var(--border);
}

.comments-container.comments-provider-waline .wl-count {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.comments-container.comments-provider-waline .wl-sort li.active {
  color: var(--accent);
}

.comments-container.comments-provider-waline .wl-cards > .wl-card-item + .wl-card-item {
  margin-top: 1rem;
}

.comments-container.comments-provider-waline .wl-card-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 0;
}

.comments-container.comments-provider-waline .wl-cards .wl-user {
  margin-inline-end: 0;
  flex-shrink: 0;
}

.comments-container.comments-provider-waline .wl-cards .wl-user img {
  border: 1px solid var(--border);
  border-radius: 24%;
  background: var(--bg);
  box-shadow: none;
}

.comments-container.comments-provider-waline .wl-card {
  flex: 1;
  width: auto;
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: none;
}

.comments-container.comments-provider-waline .wl-card:first-child {
  margin-inline-start: 0;
}

.comments-container.comments-provider-waline .wl-card .wl-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  overflow: visible;
}

.comments-container.comments-provider-waline .wl-card .wl-nick,
.comments-container.comments-provider-waline .wl-card span.wl-nick {
  margin-inline-end: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.2;
}

.comments-container.comments-provider-waline .wl-card .wl-time {
  margin-inline-end: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
}

.comments-container.comments-provider-waline .wl-card .wl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  line-height: 1.2;
}

.comments-container.comments-provider-waline .wl-card .wl-meta > span {
  margin-inline-end: 0;
  padding: .2rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.3;
}

.comments-container.comments-provider-waline .wl-card .wl-comment-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  float: none;
  margin-inline-start: auto;
}

.comments-container.comments-provider-waline .wl-card .wl-delete,
.comments-container.comments-provider-waline .wl-card .wl-like,
.comments-container.comments-provider-waline .wl-card .wl-reply,
.comments-container.comments-provider-waline .wl-card .wl-edit {
  padding: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
}

.comments-container.comments-provider-waline .wl-card .wl-content {
  margin-bottom: 0;
  padding-top: .9rem;
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.85;
}

.comments-container.comments-provider-waline .wl-card .wl-content a {
  display: inline;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
}

.comments-container.comments-provider-waline .wl-card .wl-content.expand::before {
  bottom: 2.8rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), var(--bg-2));
}

.comments-container.comments-provider-waline .wl-card .wl-content.expand::after {
  height: 2.8rem;
  background: var(--bg-2);
  color: var(--text-faint);
  line-height: 2.8rem;
}

.comments-container.comments-provider-waline .wl-card .wl-quote {
  margin-top: .95rem;
  padding-inline-start: .9rem;
  border-inline-start: 1px solid var(--accent-line);
}

.comments-container.comments-provider-waline .wl-card .wl-quote .wl-card {
  background: var(--bg);
}

.comments-container.comments-provider-waline .wl-empty,
.comments-container.comments-provider-waline .wl-power {
  color: var(--text-faint);
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  .comments-container.comments-provider-waline .comment-area-head {
    margin-bottom: 1.2rem;
  }

  .comments-container.comments-provider-waline .comment-area-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding-bottom: .85rem;
  }

  .comments-container.comments-provider-waline .comment-area-title {
    font-size: 1.65rem;
  }

  .comments-container.comments-provider-waline .wl-panel {
    padding: .85rem;
    padding-top: 3rem;
  }

  .comments-container.comments-provider-waline .wl-panel::before {
    padding: .65rem .85rem;
  }

  .comments-container.comments-provider-waline .wl-header,
  .comments-container.comments-provider-waline .wl-header-2,
  .comments-container.comments-provider-waline .wl-header-3 {
    grid-template-columns: 1fr;
  }

  .comments-container.comments-provider-waline .wl-editor {
    min-height: 9.5rem;
    margin-top: .8rem;
  }

  .comments-container.comments-provider-waline .wl-footer {
    align-items: flex-start;
  }

  .comments-container.comments-provider-waline .wl-actions,
  .comments-container.comments-provider-waline .wl-info {
    width: 100%;
  }

  .comments-container.comments-provider-waline .wl-info {
    justify-content: space-between;
  }

  .comments-container.comments-provider-waline .wl-card-item {
    gap: .65rem;
  }

  .comments-container.comments-provider-waline .wl-cards .wl-user {
    --avatar-size: 2.5rem;
  }

  .comments-container.comments-provider-waline .wl-card {
    padding: .85rem .85rem .9rem;
  }

  .comments-container.comments-provider-waline .wl-card .wl-head {
    gap: .35rem .6rem;
  }

  .comments-container.comments-provider-waline .wl-card .wl-comment-actions {
    width: 100%;
    margin-inline-start: 0;
    padding-top: .15rem;
  }

  .comments-container.comments-provider-waline .wl-card .wl-quote {
    padding-inline-start: .7rem;
  }
}

@media (max-width: 540px) {
  .comments-container.comments-provider-waline .wl-panel {
    padding: .75rem;
    padding-top: 2.8rem;
  }

  .comments-container.comments-provider-waline .wl-header label {
    font-size: .65rem;
  }

  .comments-container.comments-provider-waline .wl-header input {
    min-height: 2.5rem;
    padding: .65rem .75rem;
  }

  .comments-container.comments-provider-waline .wl-card .wl-quote {
    padding-inline-start: .55rem;
  }
}