diff --git a/src/components/HitokotoCard.astro b/src/components/HitokotoCard.astro
index b0a84fa..f319ab6 100644
--- a/src/components/HitokotoCard.astro
+++ b/src/components/HitokotoCard.astro
@@ -342,6 +342,38 @@
     }
   }
 
+  .hitokoto-card,
+  :root[data-theme='dark'] .hitokoto-card {
+    border: 1px solid var(--line);
+    border-radius: 2px;
+    color: var(--text);
+    background: var(--surface-strong);
+    box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 14%, transparent);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .hitokoto-card__refresh,
+  .hitokoto-card__collapse,
+  :root[data-theme='dark'] .hitokoto-card__refresh,
+  :root[data-theme='dark'] .hitokoto-card__collapse {
+    border-color: var(--line);
+    border-radius: 2px;
+    background: transparent;
+  }
+
+  .hitokoto-card__refresh:hover,
+  .hitokoto-card__collapse:hover {
+    color: #fff;
+    background: var(--accent);
+    transform: none;
+  }
+
+  .hitokoto-card__text,
+  :root[data-theme='dark'] .hitokoto-card__text {
+    color: var(--text);
+  }
+
   @media (max-width: 720px) {
     .hitokoto-card {
       left: 12px;
diff --git a/src/components/HomeSidebar.astro b/src/components/HomeSidebar.astro
index 9a61c80..fd6ded3 100644
--- a/src/components/HomeSidebar.astro
+++ b/src/components/HomeSidebar.astro
@@ -11,13 +11,18 @@ interface Props {
 
 const { posts, tags, categories } = Astro.props;
 const avatar = siteConfig.author.avatar;
-const recentPosts = posts.slice(0, 5);
 ---
 
 <aside class="home-sidebar" aria-label="首页侧边栏">
   <section class="sidebar-card profile-card">
-    <img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
-    <div class="profile-name">{siteConfig.author.name}</div>
+    <div class="profile-identity">
+      <img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
+      <div>
+        <span>MAINTAINER</span>
+        <strong class="profile-name">{siteConfig.author.name}</strong>
+      </div>
+    </div>
+    <p class="profile-bio">在代码、图形和自托管服务之间做长期记录。</p>
     <div class="profile-stats">
       <a href="/archives/">
         <span>文章</span>
@@ -33,8 +38,8 @@ const recentPosts = posts.slice(0, 5);
       </a>
     </div>
     <a class="follow-button" href={siteConfig.author.github} target="_blank" rel="noreferrer">
-      <span class="github-mark" aria-hidden="true">GitHub</span>
-      <span>Follow Me</span>
+      <span>查看 GitHub</span>
+      <span aria-hidden="true">↗</span>
     </a>
     <div class="profile-links" aria-label="联系方式">
       <a href={siteConfig.author.github} target="_blank" rel="noreferrer" aria-label="GitHub">GitHub</a>
@@ -44,7 +49,7 @@ const recentPosts = posts.slice(0, 5);
 
   <div class="sticky-sidebar">
     <section class="sidebar-card notice-card">
-      <h2><span aria-hidden="true">!</span> 公告</h2>
+      <h2><span aria-hidden="true">●</span> 站点广播</h2>
       <div id="welcome-ip-location-info">
         欢迎来自 <strong>远方</strong> 的小友。<br />
         烧烤三件套，灵魂蘸料。<br />
@@ -94,25 +99,6 @@ const recentPosts = posts.slice(0, 5);
       </div>
     </section>
 
-    <section class="sidebar-card recent-card">
-      <h2>最新文章</h2>
-      <div class="sidebar-posts">
-        {recentPosts.map((post) => (
-          <a class="sidebar-post" href={post.href}>
-            {post.cover ? (
-              <img src={post.cover} alt="" loading="lazy" />
-            ) : (
-              <span class="post-thumb-fallback" aria-hidden="true"></span>
-            )}
-            <span>
-              <strong>{post.title}</strong>
-              <time datetime={post.date.toISOString()}>{post.dateText}</time>
-            </span>
-          </a>
-        ))}
-      </div>
-    </section>
-
     <SiteInfoCard posts={posts} />
   </div>
 </aside>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 3493493..f975c14 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -3,16 +3,27 @@ import { getCategoryHref, type BlogPost } from '@/lib/posts';
 
 interface Props {
   post: BlogPost;
+  index?: number;
 }
 
-const { post } = Astro.props;
+const { post, index } = Astro.props;
+const logNumber = index === undefined
+  ? post.date.toISOString().slice(5, 10).replace('-', '.')
+  : String(index + 1).padStart(2, '0');
 ---
 
 <article class="post-card">
-  <a href={post.href}>
-    <time datetime={post.date.toISOString()}>{post.dateText}</time>
-    <h2>{post.title}</h2>
-    {post.summary && <p>{post.summary}</p>}
+  <a class="post-card-main" href={post.href}>
+    <span class="post-card-index" aria-hidden="true">
+      <small>LOG</small>
+      <strong>{logNumber}</strong>
+    </span>
+    <span class="post-card-copy">
+      <time datetime={post.date.toISOString()}>{post.dateText}</time>
+      <span class="post-card-title">{post.title}</span>
+      {post.summary && <span class="post-card-summary">{post.summary}</span>}
+    </span>
+    <span class="post-card-open" aria-hidden="true">↗</span>
   </a>
   <div class="meta-list">
     {post.categories.map((category) => <a href={getCategoryHref(category)}>{category}</a>)}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 4df9f5c..7866534 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -122,7 +122,7 @@ const consoleSites = [
   <body>
     <header class="site-header">
       <nav class="nav">
-        <a class="brand" href="/">{siteConfig.site.name}</a>
+        <a class="brand" href="/" aria-label={`${siteConfig.site.name} 首页`}><span>{siteConfig.author.name}</span><i>.log</i></a>
         <button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
           <i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
           <i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 91cf228..e140585 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,14 +16,15 @@ const pageData = getPageSlice(posts, 1);
 <BaseLayout>
   <section class="hero home-hero">
     <div class="hero-copy">
-      <p class="eyebrow">写给日常、技术和正在发生的自己</p>
-      <h1>{siteConfig.site.name}</h1>
-      <p>把折腾、学习和生活片段安静地收在这里。</p>
+      <p class="hero-kicker"><span>FIELD NOTES</span><span>2025—NOW</span></p>
+      <h1><span>{siteConfig.author.name}</span><em>/log</em></h1>
+      <p class="hero-intro">记录代码跑通之前，也记录它为什么没跑通。</p>
+      <p class="hero-route">OpenCV · OpenGL · 自托管服务 · 没打算归类的日常</p>
     </div>
     <aside id="bber-talk" class="hero-talk" aria-label="说说滚动展示">
       <div class="hero-talk-head">
-        <span>Recent Talks</span>
-        <a href="/shuoshuo/" aria-label="查看全部说说">
+        <span><strong>RECENT.TXT</strong><small>最近的碎片记录</small></span>
+        <a href="/shuoshuo/" aria-label="查看全部说说" title="查看全部说说">
           <i class="fa-regular fa-comments" aria-hidden="true"></i>
         </a>
       </div>
@@ -33,11 +34,14 @@ const pageData = getPageSlice(posts, 1);
   <section class="content-wrap home-layout">
     <div class="home-main">
       <div class="section-heading">
-        <h2>最新文章</h2>
-        <a href="/archives/">查看全部</a>
+        <div>
+          <p>INDEX / LATEST</p>
+          <h2>最近写下的</h2>
+        </div>
+        <a href="/archives/">完整归档 <span aria-hidden="true">→</span></a>
       </div>
       <div class="post-list">
-        {pageData.items.map((post) => <PostCard post={post} />)}
+        {pageData.items.map((post, index) => <PostCard post={post} index={index} />)}
       </div>
       <Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} />
     </div>
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 85cdeef..b9698e8 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -179,17 +179,16 @@ const articleJsonLd = {
         </div>
       </header>
       {post.summary && (
-        <section class="article-summary-card" aria-label="AI 文章摘要">
+        <section class="article-summary-card" aria-label="文章导读">
           <div class="article-summary-header">
             <span class="article-summary-brand">
-              <span class="article-summary-icon" aria-hidden="true">✦</span>
-              AI 摘要
+              <span class="article-summary-icon" aria-hidden="true">↳</span>
+              文章导读
             </span>
-            <span class="article-summary-model">QWEN</span>
+            <span class="article-summary-model">摘要由 Qwen 生成</span>
           </div>
           <p class="article-summary-content">
-            <span class="article-summary-text" data-summary-text={post.summary}>{post.summary}</span>
-            <span class="article-summary-caret" aria-hidden="true"></span>
+            <span class="article-summary-text">{post.summary}</span>
           </p>
         </section>
       )}
@@ -392,28 +391,6 @@ const articleJsonLd = {
       window.addEventListener('resize', updateToc);
     }
 
-    const summaryText = document.querySelector('.article-summary-text');
-    if (!summaryText) return;
-
-    const fullText = summaryText.dataset.summaryText || summaryText.textContent || '';
-    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if (reduceMotion) {
-      summaryText.textContent = fullText;
-      return;
-    }
-
-    summaryText.textContent = '';
-    let index = 0;
-
-    function typeSummary() {
-      index += 1;
-      summaryText.textContent = fullText.slice(0, index);
-      if (index < fullText.length) {
-        window.setTimeout(typeSummary, 34);
-      }
-    }
-
-    window.setTimeout(typeSummary, 280);
   })();
 </script>
 
diff --git a/src/styles/site.css b/src/styles/site.css
index e3a7300..4668557 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -15,3 +15,4 @@
 @import "./site/15-reading-series.css";
 @import "./site/16-pwa.css";
 @import "./site/17-revisions.css";
+@import "./site/18-worklog.css";
diff --git a/src/styles/site/18-worklog.css b/src/styles/site/18-worklog.css
new file mode 100644
index 0000000..375ae0e
--- /dev/null
+++ b/src/styles/site/18-worklog.css
@@ -0,0 +1,1013 @@
+/*
+ * Visual direction: a maintained technical worklog.
+ * Flat drafting surfaces replace the previous glass-card system; cobalt reads
+ * as ink, orange as a calibration mark, and mono labels carry file metadata.
+ */
+
+:root {
+  --bg: #e9edef;
+  --surface: #f8faf9;
+  --surface-strong: #ffffff;
+  --text: #18212b;
+  --muted: #687480;
+  --line: #c7d0d6;
+  --line-strong: #9eabb4;
+  --accent: #245b9b;
+  --accent-strong: #173f72;
+  --signal: #df673d;
+  --shadow: none;
+  --page-gutter: clamp(18px, 4vw, 58px);
+  --wide-width: 1360px;
+  --content-width: 1240px;
+}
+
+:root[data-theme='dark'] {
+  --bg: #171d23;
+  --surface: #202830;
+  --surface-strong: #26303a;
+  --text: #e8edf2;
+  --muted: #9eabb6;
+  --line: #3b4650;
+  --line-strong: #596773;
+  --accent: #87add9;
+  --accent-strong: #b8d0ed;
+  --signal: #f08b66;
+  --shadow: none;
+}
+
+body {
+  color: var(--text);
+  font-family: Inter, "Segoe UI Variable Text", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
+  line-height: 1.68;
+  background-color: var(--bg);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--line) 36%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--line) 36%, transparent) 1px, transparent 1px);
+  background-size: 48px 48px;
+  background-attachment: fixed;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+:where(a, button):focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--signal) 75%, transparent);
+  outline-offset: 3px;
+}
+
+.site-header {
+  top: 0;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in srgb, var(--bg) 94%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.nav {
+  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
+  min-height: 68px;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.nav::before {
+  display: none;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: baseline;
+  width: fit-content;
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 1.12rem;
+  font-weight: 760;
+  letter-spacing: -0.04em;
+}
+
+.brand i {
+  color: var(--signal);
+  font-style: normal;
+  font-weight: 500;
+}
+
+.nav-links {
+  gap: 2px;
+  font-size: 0.86rem;
+  font-weight: 650;
+}
+
+.nav-links a,
+.nav-random,
+.nav-search,
+.nav-console,
+.theme-toggle,
+.nav-menu-toggle {
+  border-radius: 2px;
+  padding: 8px 10px;
+}
+
+.nav-links a:hover,
+.nav-random:hover,
+.nav-search:hover,
+.nav-console:hover,
+.theme-toggle:hover,
+.nav-menu-toggle:hover {
+  border-color: transparent;
+  color: var(--accent-strong);
+  background: color-mix(in srgb, var(--accent) 9%, transparent);
+  box-shadow: inset 0 -2px 0 var(--accent);
+  transform: none;
+}
+
+.hero {
+  min-height: 440px;
+}
+
+.home-hero {
+  position: relative;
+  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
+  gap: clamp(42px, 8vw, 118px);
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.home-hero::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -5px;
+  width: 72px;
+  height: 9px;
+  background: var(--signal);
+}
+
+.hero-copy {
+  position: relative;
+  padding-left: clamp(24px, 4vw, 52px);
+}
+
+.hero-copy::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  bottom: 6px;
+  left: 0;
+  width: 7px;
+  background: var(--accent);
+}
+
+.hero-copy::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 0;
+  width: 7px;
+  height: 38px;
+  background: var(--signal);
+}
+
+.hero-kicker,
+.hero-route,
+.section-heading p,
+.profile-identity span,
+.post-card-index,
+.hero-talk-head,
+.article-summary-brand,
+.article-summary-model {
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+}
+
+.hero-kicker {
+  display: flex;
+  justify-content: space-between;
+  max-width: 410px !important;
+  margin: 0 0 24px !important;
+  color: var(--muted) !important;
+  font-size: 0.72rem !important;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
+.hero h1 {
+  display: flex;
+  align-items: baseline;
+  margin: 0;
+  color: var(--text);
+  font-family: "Arial Narrow", "Bahnschrift SemiCondensed", "Aptos Display", sans-serif;
+  font-size: clamp(4.5rem, 9vw, 8.3rem);
+  font-stretch: condensed;
+  font-weight: 750;
+  letter-spacing: -0.075em;
+  line-height: 0.82;
+}
+
+.hero h1 em {
+  color: var(--signal);
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 0.33em;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: -0.06em;
+}
+
+.hero .hero-intro {
+  max-width: 520px;
+  margin-top: 30px;
+  color: var(--text);
+  font-size: clamp(1.08rem, 2vw, 1.38rem);
+  font-weight: 700;
+}
+
+.hero .hero-route {
+  max-width: 540px;
+  margin-top: 10px;
+  color: var(--muted);
+  font-size: 0.77rem;
+  letter-spacing: 0.025em;
+}
+
+.hero-talk {
+  max-width: none;
+  min-height: 190px;
+  border: 0;
+  border-top: 3px solid var(--text);
+  border-bottom: 1px solid var(--line-strong);
+  border-radius: 0;
+  padding: 14px 0 10px;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.hero-talk-head {
+  margin: 0 0 8px;
+  color: var(--text);
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+}
+
+.hero-talk-head > span {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+}
+
+.hero-talk-head small {
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.hero-talk-head a {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--line-strong);
+  border-radius: 2px;
+  color: var(--accent);
+  background: transparent;
+}
+
+.hero-talk-head a:hover {
+  color: #fff;
+  background: var(--accent);
+  transform: none;
+}
+
+.hero-talk .item {
+  min-height: 42px;
+  border-top: 1px solid var(--line);
+  padding: 9px 4px;
+  color: var(--text);
+  font-size: 0.9rem;
+}
+
+.hero-talk .item::before {
+  width: 9px;
+  height: 3px;
+  border-radius: 0;
+  background: var(--signal);
+  box-shadow: none;
+}
+
+.content-wrap {
+  margin-top: 56px;
+}
+
+.home-layout {
+  grid-template-columns: minmax(0, 1fr) 292px;
+  gap: clamp(34px, 6vw, 72px);
+}
+
+.section-heading {
+  align-items: end;
+  margin-bottom: 0;
+  border-bottom: 3px solid var(--text);
+  padding-bottom: 14px;
+}
+
+.section-heading p {
+  margin: 0 0 4px;
+  color: var(--accent);
+  font-size: 0.68rem;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+}
+
+.section-heading h2,
+.content-wrap h1 {
+  font-family: "Arial Narrow", "Bahnschrift SemiCondensed", "Microsoft YaHei UI", sans-serif;
+  font-size: clamp(1.75rem, 3vw, 2.35rem);
+  font-weight: 720;
+  letter-spacing: -0.04em;
+}
+
+.section-heading a {
+  padding-bottom: 3px;
+  color: var(--muted);
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.section-heading a span {
+  color: var(--signal);
+}
+
+@media (min-width: 960px) {
+  .post-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+.post-list {
+  display: grid;
+  gap: 0;
+}
+
+.post-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  border-radius: 0;
+  padding: 0;
+  background: color-mix(in srgb, var(--surface) 72%, transparent);
+  box-shadow: none;
+  transition: background-color 0.18s ease;
+}
+
+.post-card:hover {
+  background: var(--surface-strong);
+}
+
+.post-card-main {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr) 28px;
+  gap: clamp(14px, 3vw, 28px);
+  align-items: start;
+  padding: 24px 18px 16px 0;
+}
+
+.post-card-index {
+  display: grid;
+  align-content: start;
+  min-height: 58px;
+  border-left: 5px solid var(--accent);
+  padding-left: 10px;
+  color: var(--muted);
+  line-height: 1;
+}
+
+.post-card-index small {
+  color: var(--signal);
+  font-size: 0.58rem;
+  font-weight: 800;
+  letter-spacing: 0.11em;
+}
+
+.post-card-index strong {
+  margin-top: 8px;
+  color: var(--text);
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.post-card-copy {
+  display: grid;
+  min-width: 0;
+}
+
+.post-card-copy time {
+  margin-bottom: 6px;
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 0.71rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}
+
+.post-card-title {
+  color: var(--text);
+  font-size: clamp(1.18rem, 2.2vw, 1.48rem);
+  font-weight: 720;
+  letter-spacing: -0.025em;
+  line-height: 1.32;
+}
+
+.post-card-summary {
+  display: -webkit-box;
+  margin-top: 8px;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.94rem;
+  line-height: 1.65;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.post-card-open {
+  color: var(--line-strong);
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 1.05rem;
+  transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.post-card-main:hover .post-card-open {
+  color: var(--signal);
+  transform: translate(2px, -2px);
+}
+
+.post-card .meta-list {
+  margin: 0 18px 18px 104px;
+}
+
+.meta-list {
+  gap: 7px 15px;
+}
+
+.meta-list a,
+.article-tag-list a,
+.post-copyright-tags a {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  color: var(--accent);
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 0.73rem;
+  font-weight: 650;
+  background: transparent;
+  box-shadow: none;
+}
+
+.meta-list a + a::before {
+  content: "/";
+  margin-right: 15px;
+  color: var(--line-strong);
+}
+
+.home-sidebar,
+.sticky-sidebar {
+  gap: 0;
+}
+
+.sidebar-card {
+  border: 0;
+  border-top: 1px solid var(--line-strong);
+  border-radius: 0;
+  padding: 20px 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.sidebar-card:first-child {
+  border-top: 3px solid var(--text);
+}
+
+.sidebar-card h2 {
+  margin-bottom: 14px;
+  color: var(--text);
+  font-size: 0.92rem;
+  letter-spacing: -0.01em;
+}
+
+.notice-card h2 span {
+  color: var(--signal);
+  font-size: 0.6rem;
+}
+
+.profile-card {
+  text-align: left;
+}
+
+.profile-identity {
+  display: grid;
+  grid-template-columns: 68px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+}
+
+.profile-identity > div {
+  display: grid;
+  gap: 3px;
+}
+
+.profile-identity span {
+  color: var(--signal);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+}
+
+.profile-avatar {
+  width: 68px;
+  height: 68px;
+  margin: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: 2px;
+  box-shadow: 5px 5px 0 var(--accent);
+}
+
+.profile-name {
+  margin: 0;
+  color: var(--text);
+  font-family: "Arial Narrow", "Bahnschrift SemiCondensed", sans-serif;
+  font-size: 1.6rem;
+  font-weight: 760;
+  letter-spacing: -0.04em;
+}
+
+.profile-bio {
+  margin: 20px 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.profile-stats {
+  gap: 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 16px;
+}
+
+.profile-stats a {
+  gap: 0;
+  padding: 10px 6px;
+}
+
+.profile-stats a + a {
+  border-left: 1px solid var(--line);
+}
+
+.profile-stats strong {
+  color: var(--text);
+  font-family: "Cascadia Code", Consolas, monospace;
+}
+
+.follow-button {
+  justify-content: space-between;
+  border: 0;
+  border-radius: 2px;
+  padding: 10px 13px;
+  color: #fff;
+  background: var(--accent);
+  box-shadow: none;
+}
+
+.follow-button:hover {
+  color: #fff;
+  background: var(--accent-strong);
+  transform: none;
+}
+
+.profile-links {
+  justify-content: flex-start;
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 0.72rem;
+}
+
+.calendar-grid .today {
+  border-radius: 2px;
+  color: #fff;
+  background: var(--signal);
+  box-shadow: none;
+}
+
+.schedule-row progress {
+  accent-color: var(--accent);
+}
+
+.sidebar-card h2 em {
+  border-radius: 2px;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.toc-link.is-active {
+  border-left: 3px solid var(--signal);
+  border-radius: 0;
+  padding-left: 9px;
+  color: var(--accent-strong) !important;
+  background: color-mix(in srgb, var(--accent) 9%, transparent);
+  transform: none;
+}
+
+.toc-marker,
+.toc-group.is-open .toc-link-main .toc-marker,
+.toc-link.is-active .toc-marker {
+  width: 8px;
+  height: 3px;
+  border-radius: 0;
+  background: var(--signal);
+  box-shadow: none;
+}
+
+.page-header-card,
+.article,
+.article-summary-card,
+.post-copyright-card,
+.twikoo-comments,
+.stats-chart,
+.term-grid a,
+.pagination-link,
+.pagination-number,
+.native-feature-grid section,
+.friend-link-card,
+.external-redirect-panel,
+.post-changelog,
+.table-scroll {
+  border-color: var(--line);
+  border-radius: 2px;
+  background: var(--surface);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.page-header-card {
+  overflow: visible;
+  border: 0;
+  border-left: 8px solid var(--accent);
+  margin-top: 56px;
+  padding: 24px clamp(24px, 5vw, 52px);
+}
+
+.page-header-card::after {
+  top: 0;
+  right: auto;
+  left: -8px;
+  width: 8px;
+  height: 34px;
+  border-radius: 0;
+  background: var(--signal);
+}
+
+.page-header-eyebrow {
+  color: var(--signal);
+  font-family: "Cascadia Code", Consolas, monospace;
+  font-size: 0.66rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.page-header-card h1,
+.content-wrap .page-header-card h1 {
+  color: var(--text);
+  font-family: "Arial Narrow", "Bahnschrift SemiCondensed", "Microsoft YaHei UI", sans-serif;
+  font-weight: 750;
+  letter-spacing: -0.045em;
+}
+
+.post-layout {
+  gap: 38px;
+}
+
+.article {
+  border: 1px solid var(--line);
+  border-top: 5px solid var(--accent);
+  border-radius: 0;
+  background: var(--surface);
+}
+
+.article-header-cover,
+.article-header-cover-img,
+.prose img,
+.prose .fancybox {
+  border-radius: 0;
+}
+
+.article-header h1,
+.article-header-cover h1 {
+  font-family: "Arial Narrow", "Bahnschrift SemiCondensed", "Microsoft YaHei UI", sans-serif;
+  font-weight: 760;
+  letter-spacing: -0.045em;
+}
+
+.article-summary-card {
+  border: 0;
+  border-top: 1px solid var(--line-strong);
+  border-bottom: 1px solid var(--line);
+  border-radius: 0;
+  padding: 17px 0 19px;
+  background: transparent;
+}
+
+.article-summary-card::before {
+  display: none;
+}
+
+.article-summary-header {
+  margin-bottom: 9px;
+}
+
+.article-summary-brand {
+  color: var(--accent-strong);
+  font-size: 0.75rem;
+}
+
+.article-summary-icon {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  color: var(--signal);
+  background: transparent;
+  box-shadow: none;
+}
+
+.article-summary-model {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  color: var(--muted);
+  background: transparent;
+  letter-spacing: 0;
+}
+
+.article-summary-content {
+  color: var(--text);
+  font-family: inherit;
+  line-height: 1.72;
+}
+
+.article-summary-caret {
+  display: none;
+}
+
+.prose :not(pre) > code {
+  border-color: var(--line);
+  border-radius: 2px;
+  color: var(--accent-strong);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+}
+
+.prose .code-block {
+  border-radius: 2px;
+  box-shadow: none;
+}
+
+.custom-context-menu,
+.control-console-panel,
+.nav-menu {
+  border-color: var(--line);
+  border-radius: 3px;
+  color: var(--text);
+  background: var(--surface-strong);
+  box-shadow: 8px 8px 0 color-mix(in srgb, var(--text) 14%, transparent);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.site-footer {
+  border-top: 1px solid var(--line-strong);
+  color: var(--muted);
+  background: var(--surface);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.footer-brand,
+:root[data-theme='dark'] .footer-brand {
+  color: var(--text);
+  font-family: "Cascadia Code", Consolas, monospace;
+}
+
+.footer-brand img {
+  border-radius: 2px;
+  box-shadow: 3px 3px 0 var(--accent);
+}
+
+.footer-socials a {
+  border-color: var(--line);
+  border-radius: 2px;
+  color: var(--text);
+  background: transparent;
+  box-shadow: none;
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card,
+  .post-card,
+  .sidebar-card,
+  .article,
+  .article-summary-card,
+  .post-copyright-card,
+  .twikoo-comments,
+  .table-scroll,
+  .stats-chart,
+  .term-grid a,
+  .pagination-link,
+  .pagination-number,
+  .native-feature-grid section,
+  .friend-link-card,
+  .external-redirect-panel,
+  .post-changelog
+) {
+  border-color: var(--line);
+  background: var(--surface);
+  box-shadow: none;
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card h1,
+  .content-wrap .page-header-card h1,
+  .sidebar-card h2,
+  .profile-name,
+  .article-summary-content
+) {
+  color: var(--text);
+  text-shadow: none;
+}
+
+:root[data-theme='dark'] .site-footer,
+:root[data-theme='dark'] .footer-socials a {
+  color: var(--muted);
+  background: var(--surface);
+  box-shadow: none;
+}
+
+@media (max-width: 1100px) {
+  .home-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .home-hero {
+    gap: 34px;
+    padding-top: 72px;
+    padding-bottom: 52px;
+  }
+
+  .home-sidebar {
+    border-top: 3px solid var(--text);
+    gap: 0 32px;
+  }
+
+  .home-sidebar > .sidebar-card:first-child,
+  .sticky-sidebar > .sidebar-card:first-child {
+    border-top-width: 1px;
+  }
+}
+
+@media (max-width: 720px) {
+  .site-header {
+    padding: 0 var(--page-gutter);
+  }
+
+  .nav {
+    width: 100%;
+    min-height: 60px;
+    border-radius: 0;
+    padding: 8px 0;
+  }
+
+  .nav-menu {
+    top: calc(env(safe-area-inset-top, 0px) + 66px);
+    right: var(--page-gutter);
+    border-radius: 3px;
+    padding: 10px;
+    background: var(--surface-strong);
+    box-shadow: 7px 7px 0 color-mix(in srgb, var(--text) 16%, transparent);
+  }
+
+  .nav-links a,
+  .nav-random,
+  .nav-search,
+  .nav-console,
+  .theme-toggle {
+    border-color: var(--line);
+    border-radius: 2px;
+    background: transparent;
+  }
+
+  .hero {
+    min-height: 0;
+  }
+
+  .home-hero {
+    padding-top: 58px;
+    padding-bottom: 42px;
+  }
+
+  .hero-copy {
+    padding-left: 22px;
+  }
+
+  .hero h1 {
+    font-size: clamp(4rem, 25vw, 6.2rem);
+  }
+
+  .hero-kicker {
+    max-width: 100% !important;
+  }
+
+  .hero-talk-head small {
+    display: none;
+  }
+
+  .content-wrap {
+    margin-top: 38px;
+  }
+
+  .post-card-main {
+    grid-template-columns: 58px minmax(0, 1fr) 18px;
+    gap: 12px;
+    padding-right: 6px;
+  }
+
+  .post-card-index {
+    min-height: 50px;
+    border-left-width: 4px;
+    padding-left: 8px;
+  }
+
+  .post-card-summary {
+    -webkit-line-clamp: 3;
+  }
+
+  .post-card .meta-list {
+    margin-left: 70px;
+  }
+
+  .home-sidebar {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .sticky-sidebar {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .page-header-card {
+    margin-top: 34px;
+    padding: 20px;
+  }
+
+  .article {
+    border-right: 0;
+    border-left: 0;
+  }
+
+  .footer-inner {
+    text-align: left;
+  }
+
+  .footer-top,
+  .footer-meta {
+    justify-items: start;
+    text-align: left;
+  }
+
+  .footer-contact {
+    justify-items: start;
+    text-align: left;
+  }
+
+  .footer-bottom {
+    align-items: flex-start;
+    text-align: left;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .post-card-open,
+  .post-card,
+  .nav-links a,
+  .nav-random,
+  .nav-search,
+  .nav-console,
+  .theme-toggle {
+    transition: none;
+  }
+}