style: tweak some CSS style

1 files changed, 845 insertions, 750 deletions

diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index 731db51..edb5d20 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -1,758 +1,853 @@
 <style>
-  :root {
-    --width-max: 700px;
-    --font-primary: "Noto Serif SC", "Source Han Serif SC", serif;
-    --font-secondary: monospace;
-    --font-size-primary: 1.15em;
-    --font-size-secondary: 0.8em;
-    --body-bg-color: #ffffff;
-    --bold-text-color: #222;
-    --body-text-color: #444;
-    --link-color: #222;
-    --link-visited-color: #222;
-    --table-border-color: #f2f2f2;
-    --table-th-bg-color: #f2f2f2;
-    --img-border-color: #f2f2f2;
-    --code-bg-color: #f2f2f2;
-    --code-text-color: #222;
-    --blockquote-border-color: #666;
-    --blockquote-text-color: #8c8c8c;
-    --upvoted-color: #fa8072;
-    --caption-text-color: #666;
-    --toc-text-color: #e5e5e5;
-    --toc-hover-color: #655e5e;
-
-    --music-bg-hover-light: #e5e5e5; /* neutral-200 */
-    --music-bg-light: rgba(229, 229, 229, 0.5); /* neutral-200/50 */
-    --music-text-secondary: #666;
-    --music-shadow:
-      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --summary-text-color: #4e4e4e;
-  }
-
-  div.summary a,
-  div.summary strong,
-  div.summary p {
-    color: var(--summary-text-color) !important;
-  }
-
-  .social-icons {
-    margin: 15px;
-    margin-top: 5px;
-    text-align: center;
-  }
-
-  .social-icons a {
-    padding: 5px 5px;
-  }
-
-  .booklist {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 20px;
-  }
-
-  .booklist-item {
-    transform: translateZ(0);
-    transition:
-      transform 0.25s,
-      box-shadow 0.25s;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-
-  .booklist-item img {
-    height: 100%;
-  }
-
-  .booklist-item:hover {
-    transform: translateY(-5px) translateZ(20px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-  }
-
-  .rss-icon {
-    display: inline;
-    font-size: 16px;
-    float: right;
-    font-family: var(--font-primary);
-  }
-
-  img.missing {
-    display: none;
-  }
-
-  nav a,
-  h1.post-title a,
-  .blog-posts li a,
-  a.category-link {
-    text-decoration: none !important;
-  }
-
-  nav a:hover,
-  .post-title a:hover,
-  a.item-link:hover,
-  .blog-posts a:hover {
-    text-decoration: underline 0.5px !important;
-  }
-
-  a.category-link:hover {
-    text-decoration: underline 0.5px !important;
-  }
-
-  .wm {
-    border: 1px #d0d7de solid;
-    border-radius: 0.25em;
-    padding-top: 0;
-    padding: 1.5vw;
-    background-color: #f6f8fa;
-    margin-top: 1vh;
-  }
-
-  .wm p {
-    margin-top: 1px;
-  }
-
-  article p {
-    line-height: 35px;
-    margin-top: 20px;
-    font-weight: 550;
-  }
-
-  .item-link {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .post-info {
-    text-align: center;
-    margin-bottom: 3vh;
-  }
-  .category-link {
-    color: #444;
-  }
-
-  h1.post-title {
-    margin-top: 2vh;
-    margin-bottom: 10px;
-    text-align: center;
-  }
-
-  h1.post-title a {
-    font-size: 30px;
-    font-weight: 700;
-  }
-
-  .recent-list {
-    padding-left: 2vw;
-  }
-
-  .recent-item {
-    list-style-type: none;
-  }
-
-  .post-date {
-    display: inline;
-  }
-
-  .post-date,
-  .post-date-shortcode {
-    margin-left: auto;
-    color: #999;
-  }
-
-  article .post-date::after {
-    content: "/";
-  }
-
-  .music-card img {
-    border: none !important;
-  }
-
-  /* --- 主容器 --- */
-  /* flex flex-col gap-2 */
-  .music-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  /* --- 信息区域 (左侧) --- */
-  /* flex gap-5 items-center */
-  .music-info {
-    display: flex;
-    align-items: center;
-    gap: 1.25rem;
-  }
-
-  /* 封面图 */
-  /* w-15 h-15 rounded-lg shadow-lg m-0! */
-  .music-cover {
-    width: 3.75rem; /* 15 * 0.25rem */
-    height: 3.75rem;
-    border-radius: 0.5rem;
-    box-shadow: var(--music-shadow);
-    margin: 0 !important;
-    object-fit: cover;
-  }
-
-  /* 文本信息 */
-  .music-title {
-    margin: 0;
-    font-size: 1rem; /* text-size-base */
-    font-weight: bold;
-    line-height: 1.2;
-  }
-
-  .music-artist {
-    margin: 0;
-    font-size: 0.875rem; /* text-size-sm */
-    color: var(--music-text-secondary);
-  }
-
-  /* --- 链接区域 (右侧) --- */
-  /* flex gap-2 items-center */
-  .music-links {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  /* 链接按钮 */
-  /* block rounded-full px-3 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center bg... */
-  .music-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0 0.75rem; /* px-3 */
-    height: 2rem;
-    border-radius: 9999px; /* rounded-full */
-    text-decoration: none !important;
-    font-size: 0.75rem; /* text-size-xs */
-    transition: background-color 0.3s ease;
-
-    /* 浅色模式背景 */
-    background-color: var(--music-bg-light);
-    color: inherit;
-  }
-
-  .music-btn:hover {
-    background-color: var(--music-bg-hover-light);
-  }
-
-  /* 图标 */
-  /* w-3 h-3 m-0! */
-  .music-icon {
-    display: block;
-    width: 0.75rem;
-    height: 0.75rem;
-    margin: 0 !important;
-  }
-
-  /* 按钮文字 */
-  .music-btn-text {
-    display: inline;
-  }
-
-  /* --- 桌面端/大屏适配 (Media Query: md / min-width: 768px) --- */
-  @media (min-width: 768px) {
-    /* 容器变为横向排列，两端对齐 */
-    /* md:flex-row md:justify-between md:items-center */
-    .music-card {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    /* 按钮在大屏下变为方形图标按钮 */
-    /* md:p-4 */
-    .music-btn {
-      padding: 1rem;
-      justify-content: center;
-      width: auto;
-      height: auto;
-    }
-
-    /* 图标变大 */
-    /* md:w-5 md:h-5 */
-    .music-icon {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    /* 文字在大屏下隐藏 */
-    /* md:hidden */
-    .music-btn-text {
-      display: none;
-    }
-  }
-
-  /* 暗色模式 */
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --summary-text-color: #b4b4b4;
-      --body-bg-color: #121212;
-      --bold-text-color: #eee;
-      --body-text-color: #ddd;
-      --link-color: #ddd;
-      --link-visited-color: #c3b1ee;
-      --table-border-color: #999;
-      --table-th-bg-color: #999;
-      --img-border-color: #999;
-      --code-bg-color: #141414;
-      --code-text-color: #ddd;
-      --blockquote-border-color: #7b7b7b;
-      --blockquote-text-color: #acacac;
-      --caption-text-color: #aaa;
-      --toc-text-color: #373737;
-      --toc-hover-color: #cac3c3;
-      --music-bg-hover-dark: #525252; /* neutral-600 */
-      --music-bg-dark: rgba(82, 82, 82, 0.5); /* neutral-600/50 */
-      --music-text-secondary: #a3a3a3;
-      --color-background: var(--body-bg-color) !important;
-    }
-
-    div.summary a {
-      text-decoration: underline 0.2px #6f6f6f;
-    }
-
-    strong {
-      font-weight: 650;
-    }
-
-    article p {
-      font-weight: 400;
-    }
-
-    .music-btn {
-      background-color: var(--music-bg-dark);
-    }
-    .music-btn:hover {
-      background-color: var(--music-bg-hover-dark);
-    }
-
-    .category-link {
-      color: #dbdbdb;
-    }
-
-    .wm {
-      background-color: #161b22;
-      border-color: #30363d;
-      color: var(--body-text-color);
-      padding: 10px;
-    }
-
-    .wm input {
-      background-color: #010409;
-      border: #30363d 1px solid;
-      color: var(--body-text-color);
-      outline: none;
-      transition: border-color 0.2s ease-in-out;
-    }
-
-    #webmention-source:focus {
-      border-color: var(--color-accent-fg, #0969da);
-      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
-    }
-
-    .wm button {
-      color: var(--body-text-color);
-      background-color: #161b22;
-      border: #30363d 1px solid;
-    }
-
-    .post-title a,
-    .blog-posts a {
-      color: #fff !important;
-    }
-
-    .post-summary {
-      color: var(--text-color-primary) !important;
-    }
-
-    .post-item {
-      border-bottom: 1px solid #414141 !important;
-    }
-
-    .pagination-link {
-      border: 1px solid #414141 !important;
-    }
-
-    a {
-      font-weight: 500 !important;
-    }
-  }
-
-  body {
-    font-family: var(--font-primary);
-    font-size: var(--font-size-primary);
-    margin: auto;
-    padding: 20px;
-    max-width: var(--width-max);
-    text-align: left;
-    background-color: var(--body-bg-color);
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    line-height: 1.6;
-    color: var(--body-text-color);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  strong,
-  b {
-    color: var(--bold-text-color);
-  }
-
-  article h1,
-  article h2,
-  article h3,
-  article h4,
-  article h5,
-  article h6 {
-    margin: 16px 0;
-  }
-
-  a {
-    color: var(--link-color);
-    cursor: pointer;
-    text-decoration: underline 0.2px #d4d4d4;
-    transition-duration: 0.3s;
-    font-weight: 600;
-  }
-
-  .posts-list li {
-    margin-bottom: 12px;
-  }
-
-  .title {
-    text-align: center;
-    text-decoration: none !important;
-  }
-
-  a.title h1 {
-    margin: 15px;
-    margin-bottom: 15px;
-  }
-
-  header {
-    margin-top: 30px;
-  }
-
-  .title:hover {
-    text-decoration: none;
-  }
-
-  .title span {
-    font-weight: 400;
-  }
-
-  nav {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  nav a {
-    margin-right: 8px;
-  }
-
-  textarea {
-    width: 100%;
-    font-size: 16px;
-  }
-
-  input {
-    font-size: 14px;
-  }
-
-  article {
-    line-height: 1.6;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    border: 1px solid var(--table-border-color);
-    border-radius: 4px;
-    margin-top: 16px;
-  }
-
-  th,
-  td {
-    border: 1px solid var(--table-border-color);
-    padding: 4px;
-  }
-
-  th {
-    background-color: var(--table-th-bg-color);
-  }
-
-  hr {
-    border: 0;
-    border-top: 1px dashed;
-  }
-
-  img {
-    max-width: 100%;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid var(--img-border-color);
-    border-radius: 4px;
-    content-visibility: auto;
-    loading: lazy;
-  }
-
-  img[src*="#minipic"] {
-    max-width: 50%;
-    margin-left: 0;
-    margin-right: auto;
-  }
-
-  .image-caption figcaption {
-    text-align: center;
-    font-style: italic;
-    font-size: 0.8em;
-    margin-top: 0.6em;
-    color: var(--caption-text-color);
-  }
-
-  .image-caption {
-    margin: auto;
-  }
-
-  i {
-    font-style: normal;
-  }
-
-  time {
-    font-family: var(--font-secondary);
-    font-size: 15px;
-    color: rgb(139, 139, 139);
-  }
-
-  code {
-    font-family: var(--font-secondary);
-    background-color: var(--code-bg-color);
-    color: var(--code-text-color);
-    padding: 2px;
-    border-radius: 4px;
-  }
-
-  pre code {
-    display: block;
-    padding: 16px;
-    white-space: pre-wrap;
-    overflow-x: auto;
-  }
-
-  div.highlight pre {
-    border-radius: 4px;
-  }
-
-  div.highlight code {
-    background-color: var(--code-bg-color);
-    color: var(--code-text-color);
-  }
-
-  blockquote {
-    /* border-left: 4px solid var(--blockquote-border-color); */
-    color: var(--blockquote-text-color);
+ @font-face {
+     font-family: "Source Serif Pro";
+     src: url("/fonts/SourceSerifPro-Regular.otf");
+ }
+
+ div.footnotes hr::before {
+     content: "Footnotes";
+     display: block;
+     font-size: 1.5em;
+     color: var(--bold-text-color);
+     margin-top: 16px;
+
+ }
+
+ .recent-posts p {
+     line-height: 35px;
+ }
+
+ .recent-posts-item {
+     margin: 0;
+     margin-bottom: 120px;
+ }
+
+ .recent-post-title {
+     margin: 2px 0 -10px 0;
+ }
+
+ .post-meta {
+     margin-top: 20px;
+     margin-bottom: 5px;
+ }
+
+ .recent-item {
+     position: relative;
+     margin-bottom: 8px;
+     display: flex;
+     align-items: flex-start;
+ }
+
+ .item-link {
+     width: 100%;
+     display: inline-block;
+     text-decoration: none;
+     flex: 1;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     font-size: 1.6em;
+     word-wrap: break-word;
+     white-space: normal;
+     word-wrap: break-word;
+ }
+
+ .post-date {
+     font-size: 0.9em;
+     color: #666;
+     display: inline-block;
+     min-width: 80px;
+     flex-shrink: 0;
+ }
+
+ .recent-empty {
+     text-align: center;
+     font-style: italic;
+ }
+
+ /* 如果没有实际使用这个类，可以删除 */
+ /*
+    .recent-list {
     margin: 0;
-    margin-top: 17px;
-    padding-left: 20px;
-    font-style: normal;
-  }
-
-  footer {
-    padding: 25px 0;
-    text-align: left;
-    font-size: var(--font-size-secondary);
-  }
-
-  ul li:has(input) {
-    list-style-type: none;
-    margin-left: -25.5px;
-  }
-
-  /* blog post list */
-  ul.blog-posts {
-    list-style-type: none;
-    padding: unset;
-  }
-
-  ul.blog-posts li {
-    display: flex;
-    margin-bottom: 8px;
-  }
-
-  ul.blog-posts li span {
-    flex: 0 0 130px;
-  }
-
-  ul.blog-posts li span.grouped {
-    flex: 0 0 80px;
-  }
-
-  ul.blog-posts li a:visited {
-    color: var(--link-visited-color);
-  }
-
-  ul.blog-posts a {
-    margin-left: 10px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  /* TOC 样式 */
-  div.toc {
-    position: fixed; /* 固定定位 */
-    top: 50%; /* 垂直居中 */
-    left: calc(
-      (100vw + var(--width-max)) / 2
-    ); /* 水平定位，根据视口宽度和最大内容宽度计算 */
-    transform: translateY(-50%); /* 垂直居中调整 */
-    width: calc((90vw - var(--width-max)) / 2); /* 宽度计算 */
-    max-height: 80vh; /* 最大高度为视口高度的80% */
-    overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
-    border: none; /* 无边框 */
-    padding: 0; /* 无内边距 */
-    margin: 0; /* 无外边距 */
-    z-index: 99; /* 设置堆叠顺序，确保在其他元素之上 */
-
-    /* 隐藏滚动条 */
-    &::-webkit-scrollbar {
-      /* Webkit 浏览器（Chrome, Safari）滚动条样式 */
-      display: none; /* 隐藏滚动条 */
     }
 
-    -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
-    scrollbar-width: none; /* Firefox 隐藏滚动条 */
-  }
-
-  .toc-nav {
-    /* 目录导航容器样式 */
-    padding: 1.5rem; /* 内边距 */
-  }
-
-  .toc-nav ul {
-    /* 目录导航无序列表样式 */
-    list-style: none; /* 移除列表项标记 */
-    padding: 0; /* 移除内边距 */
-    margin: 0; /* 移除外边距 */
-  }
-
-  .toc-nav li {
-    /* 目录导航列表项样式 */
-    margin: 8px 0; /* 上下外边距 */
-  }
-
-  .toc-nav a {
-    /* 目录链接样式 */
-    display: block; /* 块级显示 */
-    text-decoration: none; /* 无下划线 */
-    color: transparent; /* 默认透明 */
-    padding: 0 12px; /* 内边距 */
-    transition: all 0.2s ease; /* 所有属性过渡效果 */
-    font-size: 0.9rem; /* 字体大小 */
-    line-height: 1.4; /* 行高 */
-    text-align: left; /* 文本左对齐 */
-    white-space: nowrap; /* 禁止换行 */
-    overflow: hidden; /* 隐藏溢出内容 */
-    text-overflow: ellipsis; /* 显示省略号 */
-    max-width: 100%; /* 限制最大宽度 */
-  }
-
-  .toc-nav:hover a {
-    color: var(--toc-text-color); /* hover时显示文字颜色 */
-  }
-
-  .toc-nav a::before {
-    /* 目录链接前的小横线样式 */
-    content: ""; /* 生成内容 */
-    display: inline-block; /* 行内块级显示 */
-    width: 16px; /* 宽度 */
-    height: 4px; /* 高度 */
-    background-color: var(--toc-text-color); /* 灰色背景 */
-    border-radius: 16px; /* 圆角 */
-    margin-right: 12px; /* 右外边距 */
-    vertical-align: middle; /* 垂直居中对齐 */
-  }
-
-  .toc-nav ul ul a::before {
-    /* 二级目录链接前的小横线样式 */
-    width: 12px; /* 显示宽度 */
-    margin-right: 16px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (12px + 12px = 24px) */
-  }
-
-  .toc-nav ul ul ul a::before {
-    /* 三级目录链接前的小横线样式 */
-    width: 8px; /* 显示宽度 */
-    margin-right: 20px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (8px + 16px = 24px) */
-  }
-
-  .toc-nav a.active, /* 活跃状态和鼠标悬停状态的目录链接样式 */
-     .toc-nav a:hover {
-    text-decoration: none; /* 无下划线 */
-    color: var(--toc-hover-color); /* 文字颜色变为深灰色 */
-  }
-
-  .toc-nav a.active::before, /* 活跃状态和鼠标悬停状态的目录链接前小横线样式 */
-     .toc-nav a:hover::before {
-    background-color: var(--toc-hover-color); /* 背景颜色变为深灰色 */
-  }
-
-  /* upvote button style */
-  button.upvote-btn {
+    .split {
     margin: 0;
-    margin-left: auto;
     padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: var(--body-text-color);
-  }
-
-  button.upvoted {
-    color: var(--upvoted-color);
-  }
-
-  span.upvote-count {
-    margin-top: -4px;
-    font-size: smaller;
-  }
-
-  @media (max-width: 800px) {
-    img[src*="#minipic"] {
-      max-width: 100%;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    div.toc {
-      display: none;
-    }
-  }
-
-  @media (max-width: 700px) {
-    .booklist {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 10px;
-    }
-  }
-
-  @media (max-width: 400px) {
-    .booklist {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 10px;
+    display: inline;
     }
-  }
+  */
+
+ @media (max-width: 720px) {
+     .post-date {
+         min-width: auto;
+         font-size: 0.85em;
+     }
+
+     .recent-post-title {
+         font-size: 1.05em;
+     }
+
+     .item-link {
+         white-space: normal;
+         overflow: visible;
+     }
+ }
+
+
+ .post-meta-item svg {
+     display: inline;
+     width: var(--svg-size);
+     height: var(--svg-size);
+ }
+
+ .post-meta-item {
+     margin-right: 0.8em;
+     display: inline-block;
+     font-size: var(--font-size-secondary);
+ }
+
+ .post-tag a {
+     font-size: var(--font-size-secondary) !important;
+ }
+ .post-meta-item p {
+     margin: 0;
+ }
+
+ .recent-posts .post-meta {
+     margin-bottom: 6em;
+ }
+
+ :root {
+     --width-max: 700px;
+     --font-primary: "Source Serif Pro", "Source Han Serif SC", serif;
+     --font-secondary: monospace;
+     --font-size-primary: 1.15rem;
+     --font-size-secondary: 1rem;
+     --body-bg-color: #fffaed;
+     --bold-text-color: #222;
+     --body-text-color: #444;
+     --link-color: #222;
+     --link-visited-color: #222;
+     --table-border-color: #f2f2f2;
+     --table-th-bg-color: #f2f2f2;
+     --img-border-color: #f2f2f2;
+     --code-bg-color: #f2f2f2;
+     --code-text-color: #222;
+     --blockquote-border-color: #666;
+     --blockquote-text-color: #646464;
+     --upvoted-color: #fa8072;
+     --caption-text-color: #666;
+     --toc-text-color: #e5e5e5;
+     --toc-hover-color: #655e5e;
+
+     --music-bg-hover-light: #e5e5e5; /* neutral-200 */
+     --music-bg-light: rgba(229, 229, 229, 0.5); /* neutral-200/50 */
+     --music-text-secondary: #666;
+     --music-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+     0 4px 6px -2px rgba(0, 0, 0, 0.05);
+     --summary-text-color: #4e4e4e;
+     --svg-size: 0.85em;
+ }
+
+ div.summary a,
+ div.summary strong,
+ div.summary p {
+     margin-bottom: 0;
+ }
+
+ .social-icons {
+     margin: 15px;
+     margin-top: 5px;
+     text-align: center;
+ }
+
+ .social-icons a {
+     padding: 5px 5px;
+ }
+
+ .booklist {
+     display: grid;
+     grid-template-columns: repeat(5, 1fr);
+     gap: 20px;
+ }
+
+ .booklist-item {
+     transform: translateZ(0);
+     transition: transform 0.25s, box-shadow 0.25s;
+     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .booklist-item img {
+     height: 100%;
+ }
+
+ .booklist-item:hover {
+     transform: translateY(-5px) translateZ(20px);
+     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+ }
+
+ .rss-icon {
+     display: inline;
+     font-size: 16px;
+     float: right;
+     font-family: var(--font-primary);
+ }
+
+ img.missing {
+     display: none;
+ }
+
+ nav a,
+ h1.post-title a,
+ .blog-posts li a {
+     text-decoration: none !important;
+ }
+
+ nav a:hover,
+ .post-title a:hover,
+ .blog-posts a:hover {
+     text-decoration: underline 0.5px !important;
+ }
+
+ .wm {
+     border: 1px #d0d7de solid;
+     border-radius: 0.25em;
+     padding-top: 0;
+     padding: 1.5vw;
+     background-color: #fffaed;
+     margin-top: 1vh;
+ }
+
+ .wm p {
+     margin-top: 1px;
+ }
+
+ article p, .summary p {
+     line-height: 35px;
+     margin-top: 20px;
+     font-weight: 400;
+ }
+
+ .item-link {
+     white-space: nowrap;
+     overflow: hidden;
+ }
+
+ h1.post-title {
+     margin-top: 2vh;
+     margin-bottom: 10px;
+ }
+
+ h1.post-title a {
+     font-weight: 700;
+ }
+
+ .recent-list {
+     padding-left: 2vw;
+ }
+
+ .recent-item {
+     list-style-type: none;
+ }
+
+ .post-date {
+     display: inline;
+ }
+
+ .post-date,
+ .post-date-shortcode {
+     margin-left: auto;
+ }
+
+ .music-card img {
+     border: none !important;
+ }
+
+ /* --- 主容器 --- */
+ /* flex flex-col gap-2 */
+ .music-card {
+     display: flex;
+     flex-direction: column;
+     gap: 0.5rem;
+     width: 100%;
+ }
+
+ /* --- 信息区域 (左侧) --- */
+ /* flex gap-5 items-center */
+ .music-info {
+     display: flex;
+     align-items: center;
+     gap: 1.25rem;
+ }
+
+ /* 封面图 */
+ /* w-15 h-15 rounded-lg shadow-lg m-0! */
+ .music-cover {
+     width: 3.75rem; /* 15 * 0.25rem */
+     height: 3.75rem;
+     border-radius: 0.5rem;
+     box-shadow: var(--music-shadow);
+     margin: 0 !important;
+     object-fit: cover;
+ }
+
+ /* 文本信息 */
+ .music-title {
+     margin: 0;
+     font-size: 1rem; /* text-size-base */
+     font-weight: bold;
+     line-height: 1.2;
+ }
+
+ .music-artist {
+     margin: 0;
+     font-size: 0.875rem; /* text-size-sm */
+     color: var(--music-text-secondary);
+ }
+
+ /* --- 链接区域 (右侧) --- */
+ /* flex gap-2 items-center */
+ .music-links {
+     display: flex;
+     align-items: center;
+     gap: 0.5rem;
+ }
+
+ /* 链接按钮 */
+ /* block rounded-full px-3 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center bg... */
+ .music-btn {
+     display: inline-flex;
+     align-items: center;
+     gap: 0.25rem;
+     padding: 0 0.75rem; /* px-3 */
+     height: 2rem;
+     border-radius: 9999px; /* rounded-full */
+     text-decoration: none !important;
+     font-size: 0.75rem; /* text-size-xs */
+     transition: background-color 0.3s ease;
+
+     /* 浅色模式背景 */
+     background-color: var(--music-bg-light);
+     color: inherit;
+ }
+
+ .music-btn:hover {
+     background-color: var(--music-bg-hover-light);
+ }
+
+ /* 图标 */
+ /* w-3 h-3 m-0! */
+ .music-icon {
+     display: block;
+     width: 0.75rem;
+     height: 0.75rem;
+     margin: 0 !important;
+ }
+
+ /* 按钮文字 */
+ .music-btn-text {
+     display: inline;
+ }
+
+ /* --- 桌面端/大屏适配 (Media Query: md / min-width: 768px) --- */
+ @media (min-width: 768px) {
+     /* 容器变为横向排列，两端对齐 */
+     /* md:flex-row md:justify-between md:items-center */
+     .music-card {
+         flex-direction: row;
+         justify-content: space-between;
+         align-items: center;
+     }
+
+     /* 按钮在大屏下变为方形图标按钮 */
+     /* md:p-4 */
+     .music-btn {
+         padding: 1rem;
+         justify-content: center;
+         width: auto;
+         height: auto;
+     }
+
+     /* 图标变大 */
+     /* md:w-5 md:h-5 */
+     .music-icon {
+         width: 1.25rem;
+         height: 1.25rem;
+     }
+
+     /* 文字在大屏下隐藏 */
+     /* md:hidden */
+     .music-btn-text {
+         display: none;
+     }
+ }
+
+ /* 暗色模式 */
+ @media (prefers-color-scheme: dark) {
+     :root {
+         --summary-text-color: #c9c6c5;
+         --body-bg-color: #121212;
+         --bold-text-color: #eee;
+         --body-text-color: #ddd;
+         --link-color: #ddd;
+         --link-visited-color: #c3b1ee;
+         --table-border-color: #999;
+         --table-th-bg-color: #999;
+         --img-border-color: #999;
+         --code-bg-color: #141414;
+         --code-text-color: #ddd;
+         --blockquote-border-color: #7b7b7b;
+         --blockquote-text-color: #acacac;
+         --caption-text-color: #aaa;
+         --toc-text-color: #373737;
+         --toc-hover-color: #cac3c3;
+         --music-bg-hover-dark: #525252;
+         --music-bg-dark: rgba(82, 82, 82, 0.5);
+         --music-text-secondary: #a3a3a3;
+         --color-background: var(--body-bg-color) !important;
+     }
+
+     .post-meta-item svg {
+         filter: invert(1) hue-rotate(180deg);
+     }
+
+
+
+     div.summary a {
+         text-decoration: underline 0.1px #5e5e5e;
+     }
+
+     strong {
+         font-weight: 650;
+     }
+
+     .music-btn {
+         background-color: var(--music-bg-dark);
+     }
+     .music-btn:hover {
+         background-color: var(--music-bg-hover-dark);
+     }
+
+     .category-link {
+         color: #dbdbdb;
+     }
+
+     .wm {
+         background-color: #161b22;
+         border-color: #30363d;
+         color: var(--body-text-color);
+         padding: 10px;
+     }
+
+     .wm input {
+         background-color: #010409;
+         border: #30363d 1px solid;
+         color: var(--body-text-color);
+         outline: none;
+         transition: border-color 0.2s ease-in-out;
+     }
+
+     #webmention-source:focus {
+         border-color: var(--color-accent-fg, #0969da);
+         box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+     }
+
+     .wm button {
+         color: var(--body-text-color);
+         background-color: #161b22;
+         border: #30363d 1px solid;
+     }
+
+     .post-title a,
+     {
+         color: #fff !important;
+     }
+
+     .post-summary {
+         color: var(--text-color-primary) !important;
+     }
+
+     .post-item {
+         border-bottom: 1px solid #414141 !important;
+     }
+
+     .pagination-link {
+         border: 1px solid #414141 !important;
+     }
+
+     a {
+         font-weight: 500 !important;
+     }
+ }
+
+ body {
+     font-family: var(--font-primary);
+     font-size: var(--font-size-primary);
+     margin: auto;
+     padding: 20px;
+     max-width: var(--width-max);
+     text-align: left;
+     background-color: var(--body-bg-color);
+     word-wrap: break-word;
+     overflow-wrap: break-word;
+     line-height: 1.6;
+     color: var(--body-text-color);
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ strong,
+ b {
+     color: var(--bold-text-color);
+ }
+
+ article h1,
+ article h2,
+ article h3,
+ article h4,
+ article h5,
+ article h6 {
+     margin: 16px 0;
+ }
+
+ a {
+     color: var(--link-color);
+     cursor: pointer;
+     text-decoration: underline 0.2px #5e5e5e;
+     transition-duration: 0.3s;
+     font-weight: 600;
+ }
+
+ .posts-list li {
+     margin-bottom: 12px;
+ }
+
+ .title {
+     text-align: center;
+     text-decoration: none !important;
+ }
+
+ a.title h1 {
+     margin: 15px;
+     margin-bottom: 15px;
+ }
+
+ header {
+     margin-top: 30px;
+ }
+
+ .title:hover {
+     text-decoration: none;
+ }
+
+ .title span {
+     font-weight: 400;
+ }
+
+ nav {
+     text-align: center;
+     margin-bottom: 20px;
+ }
+
+ nav a {
+     margin-right: 8px;
+ }
+
+ textarea {
+     width: 100%;
+     font-size: 16px;
+ }
+
+ input {
+     font-size: 14px;
+ }
+
+ article {
+     line-height: 1.6;
+ }
+
+ table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid var(--table-border-color);
+     border-radius: 4px;
+     margin-top: 16px;
+ }
+
+ th,
+ td {
+     border: 1px solid var(--table-border-color);
+     padding: 4px;
+ }
+
+ th {
+     background-color: var(--table-th-bg-color);
+ }
+
+ hr {
+     border: 0;
+     border-top: 1px dashed;
+ }
+
+ img {
+     max-width: 100%;
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     content-visibility: auto;
+     loading: lazy;
+ }
+
+ img[src*="#minipic"] {
+     max-width: 50%;
+     margin-left: 0;
+     margin-right: auto;
+ }
+
+ .image-caption figcaption {
+     text-align: center;
+     font-style: italic;
+     font-size: 0.8em;
+     margin-top: 0.6em;
+     color: var(--caption-text-color);
+ }
+
+ .image-caption {
+     margin: auto;
+ }
+
+ i {
+     font-style: normal;
+ }
+
+ time {
+     font-family: var(--font-primary);
+     color: var(--body-text-color);
+ }
+
+ code {
+     font-family: var(--font-secondary);
+     background-color: var(--code-bg-color);
+     color: var(--code-text-color);
+     padding: 2px;
+     border-radius: 4px;
+ }
+
+ pre code {
+     display: block;
+     padding: 16px;
+     white-space: pre-wrap;
+     overflow-x: auto;
+ }
+
+ div.highlight pre {
+     border-radius: 4px;
+ }
+
+ div.highlight code {
+     background-color: var(--code-bg-color);
+     color: var(--code-text-color);
+ }
+
+ blockquote {
+     /* border-left: 4px solid var(--blockquote-border-color); */
+     color: var(--blockquote-text-color);
+     margin: 0;
+     margin-top: 17px;
+     padding-left: 20px;
+     font-style: normal;
+ }
+
+ footer {
+     padding: 25px 0;
+     text-align: left;
+     font-size: var(--font-size-secondary);
+ }
+
+ ul li:has(input) {
+     list-style-type: none;
+     margin-left: -25.5px;
+ }
+
+ /* blog post list */
+ ul.blog-posts {
+     list-style-type: none;
+     padding: unset;
+ }
+
+ ul.blog-posts li {
+     display: flex;
+     margin-bottom: 8px;
+ }
+
+ ul.blog-posts li span {
+     flex: 0 0 130px;
+ }
+
+ ul.blog-posts li span.grouped {
+     flex: 0 0 80px;
+ }
+
+ ul.blog-posts li a:visited {
+     color: var(--link-visited-color);
+ }
+
+ ul.blog-posts a {
+     margin-left: 10px;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+ }
+ /* TOC 样式 */
+ div.toc {
+     position: fixed; /* 固定定位 */
+     top: 50%; /* 垂直居中 */
+     left: calc(
+         (100vw + var(--width-max)) / 2
+     ); /* 水平定位，根据视口宽度和最大内容宽度计算 */
+     transform: translateY(-50%); /* 垂直居中调整 */
+     width: calc((90vw - var(--width-max)) / 2); /* 宽度计算 */
+     max-height: 80vh; /* 最大高度为视口高度的80% */
+     overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
+     border: none; /* 无边框 */
+     padding: 0; /* 无内边距 */
+     margin: 0; /* 无外边距 */
+     z-index: 99; /* 设置堆叠顺序，确保在其他元素之上 */
+
+     /* 隐藏滚动条 */
+     &::-webkit-scrollbar {
+         /* Webkit 浏览器（Chrome, Safari）滚动条样式 */
+         display: none; /* 隐藏滚动条 */
+     }
+
+     -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
+     scrollbar-width: none; /* Firefox 隐藏滚动条 */
+ }
+
+ .toc-nav {
+     /* 目录导航容器样式 */
+     padding: 1.5rem; /* 内边距 */
+ }
+
+ .toc-nav ul {
+     /* 目录导航无序列表样式 */
+     list-style: none; /* 移除列表项标记 */
+     padding: 0; /* 移除内边距 */
+     margin: 0; /* 移除外边距 */
+ }
+
+ .toc-nav li {
+     /* 目录导航列表项样式 */
+     margin: 8px 0; /* 上下外边距 */
+ }
+
+ .toc-nav a {
+     /* 目录链接样式 */
+     display: block; /* 块级显示 */
+     text-decoration: none; /* 无下划线 */
+     color: transparent; /* 默认透明 */
+     padding: 0 12px; /* 内边距 */
+     transition: all 0.2s ease; /* 所有属性过渡效果 */
+     font-size: 0.9rem; /* 字体大小 */
+     line-height: 1.4; /* 行高 */
+     text-align: left; /* 文本左对齐 */
+     white-space: nowrap; /* 禁止换行 */
+     overflow: hidden; /* 隐藏溢出内容 */
+     text-overflow: ellipsis; /* 显示省略号 */
+     max-width: 100%; /* 限制最大宽度 */
+ }
+
+ .toc-nav:hover a {
+     color: var(--toc-text-color); /* hover时显示文字颜色 */
+ }
+
+ .toc-nav a::before {
+     /* 目录链接前的小横线样式 */
+     content: ""; /* 生成内容 */
+     display: inline-block; /* 行内块级显示 */
+     width: 16px; /* 宽度 */
+     height: 4px; /* 高度 */
+     background-color: var(--toc-text-color); /* 灰色背景 */
+     border-radius: 16px; /* 圆角 */
+     margin-right: 12px; /* 右外边距 */
+     vertical-align: middle; /* 垂直居中对齐 */
+ }
+
+ .toc-nav ul ul a::before {
+     /* 二级目录链接前的小横线样式 */
+     width: 12px; /* 显示宽度 */
+     margin-right: 16px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (12px + 12px = 24px) */
+ }
+
+ .toc-nav ul ul ul a::before {
+     /* 三级目录链接前的小横线样式 */
+     width: 8px; /* 显示宽度 */
+     margin-right: 20px; /* 调整右外边距，使其与默认 a::before 占据的总宽度一致 (8px + 16px = 24px) */
+ }
+
+ .toc-nav a.active, /* 活跃状态和鼠标悬停状态的目录链接样式 */
+ .toc-nav a:hover {
+     text-decoration: none; /* 无下划线 */
+     color: var(--toc-hover-color); /* 文字颜色变为深灰色 */
+ }
+
+ .toc-nav a.active::before, /* 活跃状态和鼠标悬停状态的目录链接前小横线样式 */
+ .toc-nav a:hover::before {
+     background-color: var(--toc-hover-color); /* 背景颜色变为深灰色 */
+ }
+
+ /* upvote button style */
+ button.upvote-btn {
+     margin: 0;
+     margin-left: auto;
+     padding: 0;
+     border: none;
+     background: none;
+     cursor: pointer;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     color: var(--body-text-color);
+ }
+
+ button.upvoted {
+     color: var(--upvoted-color);
+ }
+
+ span.upvote-count {
+     margin-top: -4px;
+     font-size: smaller;
+ }
+
+ @media (max-width: 800px) {
+     img[src*="#minipic"] {
+         max-width: 100%;
+         margin-left: auto;
+         margin-right: auto;
+     }
+
+     div.toc {
+         display: none;
+     }
+ }
+
+ @media (max-width: 700px) {
+     .booklist {
+         display: grid;
+         grid-template-columns: repeat(3, 1fr);
+         gap: 10px;
+     }
+ }
+
+ @media (max-width: 400px) {
+     .booklist {
+         display: grid;
+         grid-template-columns: repeat(2, 1fr);
+         gap: 10px;
+     }
+ }
 </style>