/**
 * leconiot
 *
 * @package leconiot
 * @author lijie
 * @version 2.0.0
 * @link https://leconiot.com
 */

/* ====== design tokens ====== */
:root{
  --bg:#0c0a0a; --bg-elev:#141111; --bg-elev-2:#1a1616; --bg-code:#0d0c0c;
  --border:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.10); --border-stronger:rgba(255,255,255,.14);
  --text:#ece8e6; --text-2:#c5beba; --text-3:#8d8682; --text-4:#555150;
  --heading:#ffffff;
  --brand:#ef4d6b; --brand-soft:#f4708a; --brand-tint:rgba(239,77,107,.12); --brand-tint-2:rgba(239,77,107,.22);
  --accent-blue:#4f8df0; --accent-purple:#8b6cf0; --accent-green:#34c98a; --accent-amber:#d9a05b; --accent-cyan:#4cc5d1;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow-card:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px -12px rgba(0,0,0,.55);
  --shadow-card-hover:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.7);
  --nav-bg:rgba(12,10,10,.78); --strip-bg:rgba(20,17,17,.55);
}
:root[data-theme="light"]{
  --bg:#fbf6f1; --bg-elev:#ffffff; --bg-elev-2:#f4ede5; --bg-code:#faf4ec;
  --border:rgba(28,22,22,.08); --border-strong:rgba(28,22,22,.14); --border-stronger:rgba(28,22,22,.22);
  --text:#1c1616; --text-2:#4a4340; --text-3:#807973; --text-4:#b3aaa5; --heading:#0e0a0a;
  --nav-bg:rgba(251,246,241,.78); --strip-bg:rgba(255,255,255,.6);
  --brand:#de2f51; --brand-soft:#b9243f; --brand-tint:rgba(222,47,81,.08); --brand-tint-2:rgba(222,47,81,.20);
  --accent-blue:#2862c9; --accent-purple:#6240c9; --accent-green:#1d8a5a; --accent-amber:#aa7035; --accent-cyan:#1f8e9c;
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -12px rgba(28,22,22,.18);
  --shadow-card-hover:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 32px -16px rgba(28,22,22,.22);
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:80px;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Segoe UI',sans-serif;
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--brand-tint-2); color:#fff; }
a{ color:inherit; text-decoration:none; }
code,.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
img{ max-width:100%; height:auto; }

/* ====== HERO ====== */
/* Default (archive/class/about/category): simple centered hero;
   shares the new design's dark-navy gradient bg + dotted grid + brand
   bottom line with .hero--index for visual consistency. */
.hero{
  position:relative; padding:80px 24px 72px;
  text-align:center; overflow:hidden; isolation:isolate;
}

/* Index variant: 2-col with terminal prompt + animated TCP handshake SVG */
.hero--index{
  padding:20px 24px;
  min-height:300px; box-sizing:border-box;
  text-align:left;
  display:flex; align-items:center;
}
.hero--index .hero-inner{
  max-width:1200px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px; align-items:center;
}
@media (max-width:880px){
  .hero--index{ padding:28px 24px 20px; }
  .hero--index .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero--index .hero-flow{ display:none; }
}
.hero--index::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 60% at 15% 50%, rgba(239,77,107,.08) 0%, transparent 60%),
    linear-gradient(180deg, #0e0a10 0%, #0a070a 100%);
}
.hero--index::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
}
[data-theme="light"] .hero--index::before{
  background:
    radial-gradient(60% 60% at 15% 50%, rgba(222,47,81,.08) 0%, transparent 60%),
    linear-gradient(180deg, #f9f4ed 0%, #f6efe5 100%);
}
[data-theme="light"] .hero--index::after{
  background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
}
.hero--index .hero-left{ min-width:0; text-align:left; }
.hero--index .term-prompt{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px; color:var(--text-3); letter-spacing:.04em;
  margin-bottom:18px; display:inline-flex; align-items:center; gap:4px;
}
.hero--index .term-prompt .dollar{ color:var(--brand); margin-right:8px; }
.hero--index .term-prompt .cursor{
  display:inline-block; width:8px; height:14px;
  background:var(--brand); margin-left:4px; vertical-align:-2px;
  animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero--index h1{
  margin:0; font-family:'Inter','Noto Sans SC',sans-serif; font-weight:800;
  font-size:clamp(40px, 4.6vw, 68px); letter-spacing:-.035em; line-height:1;
  color:#fff; text-shadow:none;
}
.hero--index h1 a{ color:inherit; }
.hero--index h1 .apos{ color:var(--brand); }
[data-theme="light"] .hero--index h1{ color:var(--heading); }
.hero--index .tagline{
  margin-top:22px; font-size:18px; letter-spacing:.18em;
  color:var(--brand); font-weight:500; text-indent:.18em;
}
.hero--index .categories{
  margin-top:24px;
  display:flex; flex-wrap:wrap; gap:14px;
  color:var(--text-2); font-size:14px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:.04em;
}
.hero--index .categories .item{ display:inline-flex; align-items:center; gap:6px; }
.hero--index .categories .item::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand); opacity:.85; flex-shrink:0;
}

.hero--index .hero-flow{ position:relative; height:260px; width:100%; }
.hero--index .hero-flow svg{ width:100%; height:100%; display:block; overflow:visible; }
.hero--index .hero-flow .label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11.5px; letter-spacing:.16em; fill:var(--text-2);
  text-transform:uppercase;
}
.hero--index .hero-flow .label.brand{ fill:var(--brand); font-weight:600; }
.hero--index .hero-flow .dot-trail{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.6em; fill:var(--brand); opacity:.5;
}
.hero--index .hero-flow .line{ fill:none; stroke-width:1.6; stroke-linecap:round; }
.hero--index .hero-flow .line.dim{ stroke:url(#fadeDim); }
.hero--index .hero-flow .line.brand{ stroke:url(#fadeBrand); }
.hero--index .hero-flow .end-dot{ fill:var(--brand); }
.hero--index .hero-flow .end-dot.dim{ fill:var(--text-3); opacity:.5; }
.hero--index .hero-flow .anim{
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw 2.4s ease forwards;
}
.hero--index .hero-flow .anim.d1{ animation-delay:.2s; }
.hero--index .hero-flow .anim.d2{ animation-delay:.7s; }
.hero--index .hero-flow .anim.d3{ animation-delay:1.2s; }
.hero--index .hero-flow .anim.d4{ animation-delay:1.7s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.hero--index .hero-flow .pulse{ animation:pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:.55; }
}

.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(239,77,107,.16) 0%, rgba(239,77,107,0) 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(70,40,38,.6) 0%, rgba(12,10,10,0) 70%),
    linear-gradient(180deg, #181111 0%, #0c0a0a 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay; opacity:.6;
}
[data-theme="light"] .hero::before{
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(222,47,81,.12) 0%, rgba(222,47,81,0) 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(255,232,219,.55) 0%, rgba(251,246,241,0) 70%),
    linear-gradient(180deg, #fceee2 0%, #fbf6f1 100%) !important;
}
[data-theme="light"] .hero::after{ opacity:.25; mix-blend-mode:multiply; }
.hero h1, .site-header h1{
  margin:0; font-family:'Inter','Noto Sans SC',sans-serif; font-weight:800;
  font-size:clamp(40px,5vw,56px); letter-spacing:-.025em; line-height:1.05;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.hero h1 a{ color:inherit; }
[data-theme="light"] .hero h1{ color:var(--heading)!important; text-shadow:0 1px 0 rgba(255,255,255,.4)!important; }
.hero .tagline,.hero .description{
  margin-top:18px; font-size:15px; letter-spacing:.32em;
  color:var(--brand-soft); font-weight:500; text-indent:.32em;
}

/* ====== NAV ====== */
.nav-wrap,.site-nav{
  position:sticky; top:0; z-index:20;
  background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav,.site-nav .container{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px; height:56px;
}
.nav-links{ display:flex; gap:4px; flex:1; }
.nav-link,.site-nav .container > a{
  position:relative; padding:8px 14px; font-size:14px; font-weight:500;
  color:var(--text-2); border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav-link:hover,.site-nav .container > a:hover{ color:var(--text); background:rgba(255,255,255,.03); }
[data-theme="light"] .nav-link:hover,[data-theme="light"] .site-nav .container > a:hover{ background:rgba(0,0,0,.03); }
.nav-link.active,.site-nav .container > a.active{ color:var(--brand); }
.nav-link.active::after,.site-nav .container > a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-1px;
  height:2px; background:var(--brand); border-radius:2px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; font-size:15px; letter-spacing:.04em; }
.theme-toggle{
  width:36px; height:36px; margin-left:auto; display:grid; place-items:center;
  border-radius:10px; color:var(--text-2); cursor:pointer; background:transparent; border:none;
  transition:background .15s ease, color .15s ease, transform .3s ease;
}
.theme-toggle:hover{ background:rgba(255,255,255,.04); color:var(--text); transform:rotate(-15deg); }
.theme-toggle .icon-sun,.theme-toggle .icon-moon{ display:none; }

/* ====== FOOTER ====== */
footer.site-footer,footer.site-foot{
  border-top:1px solid var(--border); padding:28px 32px; text-align:center;
  color:var(--text-4); font-size:12.5px; letter-spacing:.04em;
}
footer.site-footer p{ margin:4px 0; }
footer.site-footer a,footer.site-foot a{ color:var(--text-3); }
footer.site-footer a:hover,footer.site-foot a:hover{ color:var(--brand); }

/* ====== LAYOUT ====== */
.container-page{ max-width:1200px; margin:0 auto; padding:32px 32px 80px; }
.content-wrap{
  max-width:1200px; margin:0 auto; padding:40px 24px 80px;
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px;
}
@media (max-width:900px){ .content-wrap{ grid-template-columns:1fr; } }
.content-area{ min-width:0; }

/* ====== POST CARD (index) ====== */
.post-card{
  position:relative; background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 32px 24px; margin-bottom:24px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-card);
}
.post-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); transform:translateY(-1px); }
.post-card::before{
  content:""; position:absolute; left:-1px; top:24px; bottom:24px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--brand) 0%, var(--accent-purple) 100%);
  opacity:0; transition:opacity .25s ease;
}
.post-card:hover::before{ opacity:.9; }
.post-category-tag{ display:flex; gap:6px; flex-wrap:wrap; }
.post-category-tag a{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  font-size:12px; font-weight:600; color:var(--brand);
  background:var(--brand-tint); border:1px solid var(--brand-tint-2); border-radius:999px; letter-spacing:.02em;
}
.post-card .post-title{ margin:16px 0 0; font-size:24px; font-weight:700; line-height:1.35; letter-spacing:-.005em; color:#fff; }
[data-theme="light"] .post-card .post-title{ color:var(--heading); }
.post-card .post-title a{
  background-image:linear-gradient(var(--brand),var(--brand));
  background-position:0 100%; background-repeat:no-repeat; background-size:0 1px;
  transition:background-size .25s ease; padding-bottom:2px;
}
.post-card .post-title a:hover{ background-size:100% 1px; }
.post-excerpt{
  position:relative; margin-top:14px; color:var(--text-2); font-size:14.5px; line-height:1.85;
  max-height:230px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
}
.post-excerpt p{ margin:0 0 .6em; }
.post-excerpt strong{ color:var(--text); font-weight:600; }
.post-excerpt code{ font-size:.92em; color:var(--brand-soft); }
.post-excerpt img{ display:block; margin:14px auto; max-width:100%; height:auto; border-radius:8px; }
.post-footer{
  margin-top:22px; padding-top:18px; border-top:1px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.read-more{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 18px;
  background:var(--brand); color:#fff; font-size:13.5px; font-weight:600; border-radius:10px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px -8px rgba(239,77,107,.6);
}
.read-more::after{ content:"→"; transition:transform .25s ease; }
.read-more:hover{ background:var(--brand-soft); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(239,77,107,.7); }
.read-more:hover::after{ transform:translateX(3px); }
.post-meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--text-3); font-size:13px; align-items:center; }
.post-meta span{ display:inline-flex; align-items:center; gap:6px; }
.post-meta svg{ width:14px; height:14px; color:var(--text-4); flex-shrink:0; }
.post-meta a{ color:var(--text-3); transition:color .15s ease; }
.post-meta a:hover{ color:var(--brand); }
.post-meta .meta-readtime{ color:var(--text-4); }

/* pagination */
.pagination{ display:flex; justify-content:center; margin-top:32px; }
ul.pagination{ list-style:none; display:flex; gap:6px; padding:0; }
ul.pagination li span,ul.pagination li a{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text-2); font-size:13.5px;
  transition:all .15s ease;
}
ul.pagination li a:hover{ color:var(--brand); border-color:var(--brand-tint-2); background:var(--brand-tint); }
ul.pagination li.current span{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ====== SIDEBAR ====== */
.sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:88px; align-self:start; }
.sidebar-widget{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-card);
}
.widget-title{
  margin:0 0 14px; font-size:13px; font-weight:700; color:var(--text);
  letter-spacing:.08em; text-transform:uppercase; position:relative; padding-bottom:10px;
}
.widget-title::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--accent-purple) 100%);
}
.search-input{
  width:100%; height:38px; padding:0 12px; background:var(--bg-elev-2);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.search-input::placeholder{ color:var(--text-4); }
.search-input:focus{ border-color:var(--brand); background:var(--bg-elev); }
.widget-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.widget-list li{
  position:relative; padding:10px 0 10px 14px;
  border-bottom:1px dashed var(--border); transition:padding .2s ease;
  font-size:13.5px; line-height:1.55; color:var(--text-2);
}
.widget-list li:last-child{ border-bottom:none; }
.widget-list li::before{
  content:""; position:absolute; left:0; top:18px; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--text-4);
  transition:background .2s ease, transform .2s ease;
}
.widget-list li:hover{ padding-left:20px; }
.widget-list li:hover::before{ background:var(--brand); transform:translateY(-50%) scale(1.4); }
.widget-list a{ color:var(--text-2); transition:color .15s ease; }
.widget-list li:hover a{ color:var(--text); }
.widget-list .count{ color:var(--text-4); font-size:11.5px; margin-left:6px; }
.widget-list .comment-author-name{ color:var(--accent-purple); font-weight:600; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-cloud .tag{
  display:inline-flex; align-items:center; padding:4px 10px; font-size:12.5px;
  background:var(--bg-elev-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:999px; transition:all .15s ease; line-height:1.3;
}
.tag-cloud .tag:hover{ color:var(--brand); border-color:var(--brand-tint-2); background:var(--brand-tint); transform:translateY(-1px); }

/* ====== ARTICLE (single post / page) ====== */
.post-layout{ max-width:1200px; margin:0 auto; padding:48px 24px 80px; display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:64px; align-items:start; }
@media (max-width:1000px){ .post-layout{ grid-template-columns:minmax(0,1fr); } .post-toc{ display:none; } }
.content-area--full{ min-width:0; }
.post-single{ min-width:0; max-width:820px; margin:0 auto; }
.post-single .post-title{
  margin:14px 0 0; font-weight:800; font-size:clamp(30px,3.5vw,40px);
  line-height:1.2; letter-spacing:-.02em; color:#fff; text-wrap:balance;
}
[data-theme="light"] .post-single .post-title{ color:var(--heading); }
.post-single .post-meta{
  margin-top:22px; padding-bottom:20px; border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:20px; color:var(--text-3); font-size:13.5px;
}
.post-single .post-meta a{ color:var(--text-2); }
.post-single .post-meta a:hover{ color:var(--brand); }

.post-content{ font-size:15px; line-height:1.85; color:var(--text-2); margin-top:28px; }
.post-content p{ margin:1.1em 0; }
.post-content strong{ color:var(--text); font-weight:600; }
.post-content a{ color:var(--accent-blue); }
.post-content a:hover{ color:var(--brand-soft); }
.post-content ul,.post-content ol{ padding-left:1.4em; }
.post-content li{ margin:.4em 0; }
.post-content li::marker{ color:var(--brand); }
.post-content img{ display:block; margin:18px auto; max-width:100%; height:auto; border-radius:10px; }
/* User-authored section dividers add visual noise on top of the H2 separators
 * the design already provides. Drop them so the article reads cleanly. */
.post-content hr{ display:none; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4{ color:#fff; }
[data-theme="light"] .post-content h1,[data-theme="light"] .post-content h2,
[data-theme="light"] .post-content h3,[data-theme="light"] .post-content h4{ color:var(--heading); }
.post-content h2{
  margin:56px 0 22px; font-size:26px; font-weight:700; letter-spacing:-.01em;
  padding-top:20px; border-top:1px solid var(--border);
}
.post-content h3{ margin:40px 0 16px; font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.post-content h3::before{
  content:""; width:3px; height:18px; border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--accent-purple));
}
.post-content h4{ margin:30px 0 12px; font-size:16px; font-weight:700; color:var(--text); }
/* Clickable heading anchors (deep-link + TOC sync). Plain text by default,
 * subtle # marker on hover. */
.post-content h2, .post-content h3, .post-content h4{ scroll-margin-top:88px; }
.post-content .heading-anchor{
  color:inherit; text-decoration:none; position:relative;
}
.post-content .heading-anchor:hover{ color:var(--brand); }
.post-content .heading-anchor::after{
  content:" #"; color:var(--brand); opacity:0;
  margin-left:6px; font-weight:500;
  transition:opacity .15s ease;
}
.post-content .heading-anchor:hover::after{ opacity:.6; }
.post-content blockquote{
  margin:18px 0; padding:14px 18px; border-left:3px solid var(--brand);
  background:linear-gradient(90deg, var(--brand-tint) 0%, transparent 60%);
  border-radius:0 8px 8px 0; color:var(--text-2); font-size:14px;
}
.post-content blockquote p{ margin:.3em 0; }
.post-content blockquote a{ color:var(--accent-blue); word-break:break-all; }
.post-content :not(pre) > code{
  padding:2px 7px; background:var(--bg-elev-2); border:1px solid var(--border);
  border-radius:6px; font-size:.88em; color:var(--brand-soft);
}
.post-content pre,.codeblock{
  margin:22px 0; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; background:var(--bg-code);
}
.post-content pre{ padding:16px 18px; font-size:13px; line-height:1.6; color:#d6cfcc; overflow-x:auto; }
.post-content pre code{ background:none; border:none; padding:0; color:inherit; font-size:1em; }
.codeblock-head{
  display:flex; align-items:center; justify-content:space-between; padding:8px 14px;
  background:var(--bg-elev-2); border-bottom:1px solid var(--border);
  font-size:12px; font-family:'JetBrains Mono',monospace;
}
.codeblock-lang{ display:inline-flex; align-items:center; gap:8px; color:var(--text-3); letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.codeblock-lang::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-green); }
.codeblock pre{ margin:0; padding:16px 18px; font-size:13px; line-height:1.6; color:#d6cfcc; overflow-x:auto; }
.copy-btn{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  background:transparent; border:1px solid var(--border); border-radius:6px;
  color:var(--text-3); font-size:11.5px; font-family:inherit; cursor:pointer; transition:all .15s ease;
}
.copy-btn:hover{ color:var(--text); border-color:var(--border-strong); background:rgba(255,255,255,.03); }
.copy-btn svg{ width:12px; height:12px; }
.copy-btn.copied{ color:var(--accent-green); border-color:rgba(52,201,138,.4); }
.kw{color:#e5879c;}.fn{color:#7ec8f5;}.str{color:#a8d57d;}.com{color:#6c6964;font-style:italic;}.num{color:#d9a05b;}.var{color:#c5beba;}
[data-theme="light"] .post-content pre,[data-theme="light"] .codeblock pre{ color:#2a2222; }
[data-theme="light"] .kw{color:#b22c4d;}[data-theme="light"] .fn{color:#2862c9;}
[data-theme="light"] .str{color:#1d7d4d;}[data-theme="light"] .com{color:#9b9590;}
[data-theme="light"] .num{color:#aa7035;}[data-theme="light"] .var{color:#4a4340;}
.post-content table{
  width:100%; border-collapse:collapse; font-size:13.5px; background:var(--bg-elev);
  margin:22px 0; border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.post-content table th,.post-content table td{ padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); color:var(--text-2); }
.post-content table th{ background:var(--bg-elev-2); color:var(--text); font-weight:600; }
.post-content table tr:last-child td{ border-bottom:none; }
.post-content table tr:hover td{ background:rgba(255,255,255,.015); }

/* TOC right column (post.php injects .toc-index here) */
/* content_index plugin output: we build our own TOC client-side, so hide its
 * inline widget and the separator <hr> it emits at the top of the post. */
.post-content .toc-index{ display:none; }
.post-content .toc-index + hr{ display:none; }

.post-toc{
  position:sticky; top:88px;
  max-height:88vh; overflow-y:auto;
  align-self:start; font-size:13px;
  padding-right:8px;
}
.post-toc:empty{ display:none; }
.post-toc::-webkit-scrollbar{ width:4px; }
.post-toc::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }
.post-toc .toc-title{
  margin:0 0 12px; padding-bottom:10px;
  font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); border-bottom:1px solid var(--border);
}
.post-toc ul{ list-style:none; margin:0; padding:0; }
.post-toc li{ margin:0; }
.post-toc a{
  display:block; padding:6px 12px; font-size:13px; line-height:1.5; color:var(--text-3);
  border-left:2px solid transparent; transition:all .15s ease;
}
.post-toc a:hover{ color:var(--text); background:rgba(255,255,255,.02); }
[data-theme="light"] .post-toc a:hover{ background:rgba(0,0,0,.025); }
.post-toc a.active{ color:var(--brand); border-left-color:var(--brand); background:linear-gradient(90deg,var(--brand-tint) 0%,transparent 100%); }
.post-toc a.lvl-3{ padding-left:24px; font-size:12.5px; }
.post-toc a.lvl-4{ padding-left:36px; font-size:12px; color:var(--text-4); }
.post-toc ul ul{ padding-left:14px; }

/* Article footer: CC license card + prev/next grid (matches design) */
.article-foot{
  margin-top:64px; padding-top:28px;
  border-top:1px solid var(--border);
}
.article-foot .license{
  padding:18px 20px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:12px;
  display:flex; gap:14px; align-items:center;
  font-size:13px; color:var(--text-3);
}
.article-foot .license a{ color:var(--accent-blue); }
.article-foot .license a:hover{ color:var(--brand); }
.article-foot .license-icon{
  width:52px; height:52px; flex-shrink:0;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(79,141,240,.15), rgba(139,108,240,.15));
  border:1px solid var(--border);
  display:grid; place-items:center;
  font-weight:800; color:var(--accent-blue);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; line-height:1.2; letter-spacing:.02em; text-align:center;
}
.prevnext{
  margin-top:24px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:600px){ .prevnext{ grid-template-columns:1fr; } }
.prevnext a,
.prevnext .empty{
  display:block; padding:16px 18px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  transition:border-color .2s ease, transform .2s ease;
}
.prevnext a:hover{ border-color:var(--border-stronger); transform:translateY(-2px); }
.prevnext .empty{ opacity:.55; }
.prevnext .label{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:6px;
}
.prevnext .label svg{ width:12px; height:12px; }
.prevnext .next{ text-align:right; }
.prevnext .next .label{ justify-content:flex-end; }
.prevnext .title{
  font-size:14.5px; font-weight:600; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.prevnext a:hover .title{ color:var(--brand); }

/* reading progress */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:30; pointer-events:none; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--brand) 0%,var(--accent-purple) 100%); box-shadow:0 0 12px var(--brand); transition:width .12s linear; }

/* ====== COMMENTS ====== */
.comments-area{
  margin-top:36px; padding:24px 26px; background:var(--bg-elev);
  border:1px solid var(--border); border-radius:14px;
}
.comments-area h3{ margin:0 0 16px; font-size:15px; font-weight:700; color:var(--text); }
.comment-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:14px; }
.comment-list li{ padding:14px 16px; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:10px; }
.comment-list .children{ list-style:none; margin:14px 0 0; padding-left:20px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:14px; }
.comment-author{ font-size:13px; font-weight:600; color:var(--accent-purple); }
.comment-meta{ font-size:11.5px; color:var(--text-4); margin:2px 0 8px; }
.comment-body{ color:var(--text-2); font-size:13.5px; line-height:1.65; word-break:break-word; }
.comment-body a{ color:var(--accent-blue); }
.comment-form{ margin-top:20px; }
.comment-form p{ font-size:13px; color:var(--text-3); }
.comment-form input,.comment-form textarea{
  width:100%; padding:12px 14px; margin-bottom:10px; background:var(--bg-elev-2);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-family:inherit; font-size:14px; outline:none; transition:border-color .15s ease;
}
.comment-form textarea{ min-height:90px; line-height:1.65; resize:vertical; }
.comment-form input:focus,.comment-form textarea:focus{ border-color:var(--brand); }
.comment-form .submit{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 18px;
  background:var(--brand); color:#fff; border:none; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 16px -8px rgba(239,77,107,.6); transition:background .15s ease, transform .15s ease;
}
.comment-form .submit:hover{ background:var(--brand-soft); transform:translateY(-1px); }

/* ====== ARCHIVE ====== */
.archive-head{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px 28px; margin-bottom:28px;
}
.archive-head .post-title{ margin:0; font-size:24px; font-weight:800; color:#fff; }
[data-theme="light"] .archive-head .post-title{ color:var(--heading); }
.archive-list .post-card{ padding:18px 24px; }
.archive-list .post-card .post-title{ font-size:18px; margin:0; }

/* ====== FLOATING ACTION BUTTONS ====== */
.fab-stack{ position:fixed; right:20px; bottom:20px; z-index:40; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.fab{
  width:44px; height:44px; border-radius:12px; background:var(--bg-elev);
  border:1px solid var(--border-strong); color:var(--text-2);
  display:grid; place-items:center; cursor:pointer; padding:0; font-family:inherit;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition:transform .2s ease, color .2s ease, border-color .2s ease, opacity .25s ease;
}
.fab:hover{ color:var(--text); transform:translateY(-2px); border-color:var(--border-stronger); }
.fab svg{ width:18px; height:18px; }
.fab-top{ opacity:0; pointer-events:none; transform:translateY(8px); }
.fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.fab-palette .rainbow{
  width:22px; height:22px; border-radius:50%;
  background:conic-gradient(from 0deg,#ef4d6b 0deg,#d97757 60deg,#d9a05b 120deg,#34c98a 180deg,#3b82f6 240deg,#8b6cf0 300deg,#ef4d6b 360deg);
}
.palette-pop{
  position:absolute; right:54px; bottom:0; display:none; align-items:center; gap:6px; padding:6px;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.5); white-space:nowrap;
}
.palette-pop.open{ display:inline-flex; }
.palette-pop button{
  width:28px; height:28px; border-radius:8px; border:1.5px solid transparent;
  background:var(--swatch); cursor:pointer; padding:0; position:relative;
  transition:transform .15s ease, border-color .15s ease;
}
.palette-pop button:hover{ transform:translateY(-2px); }
.palette-pop button.active{ border-color:#fff; box-shadow:0 0 0 2px var(--bg-elev),0 0 0 3px var(--swatch); }
[data-theme="light"] .palette-pop button.active{ border-color:#111; }

/* ====== JustArchives plugin -> timeline look (archive page) ====== */
.post-content .car-container{ position:relative; margin-top:8px; }
.post-content .car-container hr{ display:none; }
.post-content .car-container .car-yearmonth{
  display:block; margin:30px 0 4px; padding:10px 0 8px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--border);
}
.post-content .car-container .car-yearmonth:first-child{ margin-top:0; }
.post-content .car-container .car-yearmonth span{ color:var(--brand); font-weight:700; }
.post-content .car-monthlisting{ list-style:none; margin:0 0 6px; padding:0; }
.post-content .car-monthlisting li{
  position:relative; margin:0; padding:9px 14px 9px 26px; border-radius:8px;
  font-size:14.5px; color:var(--text-2); transition:background .15s ease, padding-left .2s ease;
}
.post-content .car-monthlisting li::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--text-4); transition:all .2s ease;
}
.post-content .car-monthlisting li:hover{ background:rgba(255,255,255,.02); padding-left:30px; }
[data-theme="light"] .post-content .car-monthlisting li:hover{ background:rgba(0,0,0,.025); }
.post-content .car-monthlisting li:hover::before{ background:var(--brand); transform:translateY(-50%) scale(1.5); }
.post-content .car-monthlisting li a{ color:var(--text-2); }
.post-content .car-monthlisting li:hover a{ color:var(--brand); }

/* manual TOC-style list pages (e.g. 分类): section anchor + hr + ul */
.post-content > p > a[id]{
  display:inline-block; margin-top:36px; font-size:18px; font-weight:700;
  color:var(--heading); letter-spacing:-.005em;
}
[data-theme="light"] .post-content > p > a[id]{ color:var(--heading); }
.post-content > p:first-child > a[id]{ margin-top:0; }
.post-content > p > hr,.post-content p hr{
  border:none; border-top:1px solid var(--border); margin:8px 0 0;
}

/* ============================================================
   Archive page (page slug='archive') — custom timeline grid
   ============================================================ */
.archive-layout{
  max-width:1100px; margin:0 auto; padding:24px 32px 80px;
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:48px;
}
@media (max-width:900px){
  .archive-layout{ grid-template-columns:1fr; gap:24px; padding:20px 18px 64px; }
  .archive-layout .years{ position:static !important; max-height:none !important; }
}
.archive-layout .years{
  position:sticky; top:88px; align-self:start;
  max-height:78vh; overflow-y:auto; padding-right:6px;
}
.year-rail{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  border-left:1px solid var(--border); margin-left:8px;
}
.year-rail li{ margin:0; position:relative; }
.year-rail a{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 8px 16px; margin-left:-1px;
  border-left:1px solid transparent;
  color:var(--text-3);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px;
  transition:all .15s ease;
}
.year-rail a:hover{ color:var(--text); border-left-color:var(--border-stronger); }
.year-rail a.active{
  color:var(--brand); border-left-color:var(--brand);
  background:linear-gradient(90deg, var(--brand-tint), transparent);
}
.year-rail .badge{
  font-size:11px; color:var(--text-4); padding:1px 7px;
  background:var(--bg-elev-2); border-radius:999px;
  font-family:'Inter', system-ui, sans-serif; font-weight:500;
}
.year-rail a:hover .badge{ color:var(--text-2); }
.year-rail a.active .badge{ color:var(--brand); background:var(--brand-tint); }
.year-rail .total{
  margin-top:14px; padding:14px 14px 0;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--text-4);
  text-transform:uppercase; letter-spacing:.1em;
}
.year-rail .total b{
  color:var(--text);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
}

.archive-stream{ min-width:0; }
.year-section{ margin-bottom:48px; scroll-margin-top:88px; }
.year-head{
  position:sticky; top:56px; background:var(--bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:5;
  padding:14px 0; margin-bottom:14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:14px;
}
.year-head h2{
  margin:0; font-size:38px; font-weight:800;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:-.04em;
  background:linear-gradient(180deg, var(--text) 0%, var(--text-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.year-head .y-count{ font-size:13px; color:var(--text-3); padding-bottom:6px; }
.year-head .y-count b{
  color:var(--brand); font-weight:700;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}

.month-block{ margin-bottom:24px; padding-left:22px; position:relative; }
.month-block::before{
  content:""; position:absolute;
  left:6px; top:18px; bottom:0;
  width:1px; background:var(--border);
}
.month-block:last-child::before{ bottom:18px; }
.month-label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; font-weight:700; color:var(--text-3);
  letter-spacing:.16em; text-transform:uppercase;
  margin-left:-22px; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.month-label::before{
  content:""; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--text-4);
}
.year-section:hover .month-label::before{ border-color:var(--brand); }

.archive-layout .entry{
  display:flex; gap:14px; padding:10px 14px;
  border-radius:8px; align-items:baseline;
  color:var(--text-2);
  transition:background .15s ease, padding-left .2s ease, color .15s ease;
}
.archive-layout .entry:hover{
  background:rgba(255,255,255,.02);
  padding-left:18px; color:var(--text);
}
[data-theme="light"] .archive-layout .entry:hover{ background:rgba(0,0,0,.025); }
.archive-layout .entry .date{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px; color:var(--text-4); width:48px; flex-shrink:0;
}
.archive-layout .entry:hover .date{ color:var(--brand); }
.archive-layout .entry .title{ font-size:14.5px; line-height:1.5; flex:1; }
.archive-layout .entry .cat{
  display:inline-flex; align-items:center;
  height:18px; padding:0 7px;
  font-size:10.5px; font-weight:600; color:var(--text-3);
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:999px; flex-shrink:0; letter-spacing:.02em;
}
.archive-layout .entry .cat.brand{ color:var(--brand); border-color:var(--brand-tint-2); background:var(--brand-tint); }
.archive-layout .entry .cat.blue{ color:var(--accent-blue); border-color:rgba(79,141,240,.25); background:rgba(79,141,240,.1); }
.archive-layout .entry .cat.purple{ color:var(--accent-purple); border-color:rgba(139,108,240,.25); background:rgba(139,108,240,.1); }
.archive-layout .entry .cat.green{ color:var(--accent-green); border-color:rgba(52,201,138,.25); background:rgba(52,201,138,.1); }
.archive-layout .entry .cat.amber{ color:var(--accent-amber); border-color:rgba(217,160,91,.25); background:rgba(217,160,91,.1); }

/* ============================================================
   Class page (page slug='class') — topic cards + sidebar widgets
   ============================================================ */
.class-layout{
  max-width:1200px; margin:0 auto; padding:24px 32px 80px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px;
}
@media (max-width:900px){
  .class-layout{ grid-template-columns:1fr; padding:20px 18px 64px; }
  .class-layout .class-side{ position:static !important; }
}
.class-stream{ min-width:0; }
.class-layout .topic{
  margin-bottom:28px; background:var(--bg-elev);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.class-layout .topic-head{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}
.class-layout .topic-mark{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; font-size:11px; letter-spacing:.04em;
  color:#fff; flex-shrink:0;
}
.class-layout .topic-info{ flex:1; min-width:0; }
.class-layout .topic-title{
  font-size:18px; font-weight:700; color:var(--heading);
  line-height:1.3;
  display:flex; align-items:center; gap:8px;
}
.class-layout .topic-count{
  display:inline-flex; align-items:center;
  height:20px; padding:0 8px;
  font-size:11px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:6px;
  color:var(--text-3); font-weight:600;
}
[data-theme="light"] .class-layout .topic-count{ background:rgba(0,0,0,.04); }
.class-layout .topic-list{
  list-style:none; margin:0; padding:8px 0;
  display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:700px){ .class-layout .topic-list{ grid-template-columns:1fr; } }
.class-layout .topic-list li{ margin:0; }
.class-layout .topic-list a{
  display:flex; align-items:center; gap:10px;
  padding:10px 22px;
  color:var(--text-2); font-size:14px; line-height:1.5;
  transition:background .15s ease, color .15s ease, padding-left .2s ease;
  border-left:2px solid transparent;
}
.class-layout .topic-list a:hover{
  color:var(--text); background:rgba(255,255,255,.02);
  border-left-color:var(--brand); padding-left:24px;
}
[data-theme="light"] .class-layout .topic-list a:hover{ background:rgba(0,0,0,.025); }
.class-layout .topic-list .num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; color:var(--text-4); font-weight:500;
  width:24px; flex-shrink:0;
}
.class-layout .topic-list a:hover .num{ color:var(--brand); }
.class-layout .topic-list .title{
  flex:1; min-width:0;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}

.class-layout .t-thread .topic-mark{ background:linear-gradient(135deg, #4f8df0, #6cb2f0); }
.class-layout .t-matter  .topic-mark{ background:linear-gradient(135deg, #8b6cf0, #b884f5); }
.class-layout .t-zigbee  .topic-mark{ background:linear-gradient(135deg, #d9a05b, #e7b87a); }
.class-layout .t-ble     .topic-mark{ background:linear-gradient(135deg, #4cc5d1, #6fd4dc); }

.class-side{
  display:flex; flex-direction:column; gap:20px;
  position:sticky; top:88px; align-self:start;
}
.class-side .widget{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:16px; padding:20px 22px;
}
.class-side .widget h3{
  margin:0 0 14px; font-size:11px; font-weight:700;
  color:var(--text); letter-spacing:.16em; text-transform:uppercase;
  position:relative; padding-bottom:10px;
}
.class-side .widget h3::after{
  content:""; position:absolute; left:0; bottom:0;
  width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--accent-purple));
}
.cat-list{ list-style:none; margin:0; padding:0; }
.cat-list li{
  margin:0; padding:7px 0; font-size:13.5px; position:relative;
}
.cat-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  position:relative; z-index:1;
  padding:4px 10px; border-radius:6px;
  color:var(--text-2);
  transition:color .15s ease, background .15s ease;
}
.cat-list a:hover{ color:var(--text); background:rgba(255,255,255,.025); }
[data-theme="light"] .cat-list a:hover{ background:rgba(0,0,0,.025); }
.cat-list .bar{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:24px; border-radius:6px; z-index:0;
  background:linear-gradient(90deg, var(--brand-tint) 0%, rgba(239,77,107,.02) 100%);
}
.cat-list .count{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11.5px; font-weight:600; color:var(--text-3); flex-shrink:0;
}
.cat-list a:hover .count{ color:var(--brand); }

.tagcloud{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip{
  display:inline-flex; align-items:center;
  padding:4px 10px; font-size:12.5px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:999px;
  transition:all .15s ease; line-height:1.3;
}
.tag-chip:hover{
  color:var(--brand); border-color:var(--brand-tint-2);
  background:var(--brand-tint); transform:translateY(-1px);
}
.tag-chip.s1{ font-size:11.5px; color:var(--text-3); }
.tag-chip.s2{ font-size:12.5px; }
.tag-chip.s3{ font-size:13.5px; color:var(--text); }
.tag-chip.s4{ font-size:14.5px; color:var(--brand-soft); font-weight:600; }
.tag-chip.s5{ font-size:15.5px; color:var(--brand); font-weight:700; border-color:var(--brand-tint-2); }

/* ============================================================
   About page (page slug='about') — identity + prose + stats + stack + now
   ============================================================ */
.about-layout{ max-width:1180px; margin:0 auto; padding:16px 32px 80px; }
@media (max-width:600px){ .about-layout{ padding:14px 18px 64px; } }

.about-layout .identity{
  margin-bottom:32px; padding:28px 28px 24px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:18px;
  display:flex; gap:24px; align-items:center;
  position:relative; overflow:hidden;
}
.about-layout .identity::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(239,77,107,.06) 0%, transparent 60%),
    radial-gradient(40% 80% at 0% 100%, rgba(139,108,240,.05) 0%, transparent 60%);
}
@media (max-width:600px){
  .about-layout .identity{ flex-direction:column; text-align:center; }
}
.about-layout .avatar{
  width:88px; height:88px; border-radius:24px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--accent-purple) 100%);
  display:grid; place-items:center;
  font-size:38px; font-weight:800; color:#fff;
  letter-spacing:-.04em; flex-shrink:0;
  box-shadow:0 12px 32px -12px rgba(239,77,107,.45);
  position:relative; z-index:1;
}
.about-layout .identity-info{ flex:1; min-width:0; position:relative; z-index:1; }
.about-layout .identity h1{
  margin:0 0 14px; font-size:28px; font-weight:800;
  letter-spacing:-.02em; color:var(--heading);
}
[data-theme="light"] .about-layout .identity h1{ color:var(--heading); }

.about-layout .social{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:600px){ .about-layout .social{ justify-content:center; } }
.about-layout .social a{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  border-radius:9px; color:var(--text-2); font-size:13px;
  transition:all .15s ease;
}
.about-layout .social a:hover{
  color:var(--text); border-color:var(--border-stronger);
  background:rgba(255,255,255,.03); transform:translateY(-1px);
}
[data-theme="light"] .about-layout .social a:hover{ background:rgba(0,0,0,.03); }
.about-layout .social a svg{ width:14px; height:14px; }

.about-layout section.about-section{ margin-bottom:36px; }
.about-layout .section-title{
  margin:0 0 14px; font-size:17px; font-weight:700;
  color:var(--text); letter-spacing:.06em;
  position:relative; padding-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.about-layout .section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:32px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--accent-purple));
}

.about-layout .prose{ font-size:15px; line-height:1.85; color:var(--text-2); }
.about-layout .prose p{ margin:.8em 0; }
.about-layout .prose strong{ color:var(--text); font-weight:600; }
.about-layout .prose a{ color:var(--accent-blue); }
.about-layout .prose a:hover{ color:var(--brand-soft); }
.about-layout .prose img{ max-width:100%; height:auto; border-radius:10px; margin:.4em 0; }
.about-layout .prose blockquote{
  margin:14px 0; padding:14px 18px;
  border-left:3px solid var(--brand); border-radius:0 8px 8px 0;
  background:var(--brand-tint); color:var(--text);
  font-style:italic;
}
.about-layout .prose blockquote p{ margin:.3em 0; }

.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
@media (max-width:700px){ .stats-grid{ grid-template-columns:repeat(2, 1fr); } }
.stat-card{
  padding:16px 18px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:12px;
  transition:transform .2s ease, border-color .2s ease;
}
.stat-card:hover{ transform:translateY(-2px); border-color:var(--border-stronger); }
.stat-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:26px; font-weight:800;
  color:var(--text); letter-spacing:-.02em; line-height:1;
}
.stat-num .unit{
  font-size:14px; color:var(--text-3); font-weight:500; margin-left:2px;
}
.stat-label{
  margin-top:6px; font-size:11.5px; color:var(--text-3);
  letter-spacing:.08em; text-transform:uppercase;
}
.stats-grid .stat-card:nth-of-type(1) .stat-num{ color:var(--brand); }
.stats-grid .stat-card:nth-of-type(2) .stat-num{ color:var(--accent-blue); }
.stats-grid .stat-card:nth-of-type(3) .stat-num{ color:var(--accent-purple); }
.stats-grid .stat-card:nth-of-type(4) .stat-num{ color:var(--accent-green); }

.stack{ display:flex; flex-wrap:wrap; gap:8px; }
.stack-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; font-size:13px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:8px; color:var(--text-2);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  transition:all .15s ease;
}
.stack-chip:hover{
  color:var(--text); border-color:var(--brand-tint-2);
  background:var(--brand-tint);
}
.stack-chip .dot{ width:6px; height:6px; border-radius:50%; }

.now-list{ list-style:none; margin:0; padding:0; }
.now-list li{
  display:flex; gap:14px; padding:12px 0;
  border-bottom:1px dashed var(--border);
}
.now-list li:last-child{ border-bottom:none; }
.now-list .when{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; color:var(--text-4);
  width:90px; flex-shrink:0; padding-top:2px;
  letter-spacing:.04em;
}
.now-list .what{ flex:1; font-size:14px; line-height:1.65; color:var(--text-2); }
.now-list .what a{ color:inherit; }
.now-list .what a:hover b{ color:var(--brand); }
.now-list .what b{ color:var(--text); font-weight:600; transition:color .15s ease; }

@media (max-width:600px){
  .nav,.site-nav .container{ gap:12px; padding:0 16px; }
  .nav-link,.site-nav .container > a{ padding:8px 10px; font-size:13px; }
  .post-card{ padding:22px 20px; }
  .content-wrap,.post-layout{ padding:24px 16px 64px; }
}