/* ============================================================



   吃土皮皮虎 · 页面层：首页 / 长图文（知乎式）/ 短图文（小红书式）



   ============================================================ */







/* ================================ 首页 Hero ================================ */



.hero {



  padding: 44px 0 34px;



  border-bottom: 1px solid var(--border);



  margin-bottom: 32px;



  position: relative;



  overflow: clip;



  overflow-clip-margin: 220px;



}



.hero::before {



  content: '';



  position: absolute;



  top: -140px;



  right: -80px;



  width: 380px;



  height: 380px;



  border-radius: 50%;



  background: radial-gradient(circle, var(--accent-soft), transparent 68%);



  pointer-events: none;



}



.hero-inner {



  position: relative;



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  gap: 30px;



  flex-wrap: wrap;



}



.hero h1 {



  font-size: 34px;



  font-weight: 800;



  letter-spacing: -1px;



  margin-bottom: 10px;



}



.hero h1 em {



  font-style: normal;



  color: var(--accent);



}



.hero p {



  font-size: 15.5px;



  color: var(--text-secondary);



  max-width: 560px;



  line-height: 1.75;



}



.hero-stats {



  display: flex;



  gap: 30px;



}



.hero-stat {



  text-align: right;



}



.hero-stat b {



  display: block;



  font-size: 25px;



  font-weight: 700;



  letter-spacing: -0.5px;



  font-variant-numeric: tabular-nums;



}



.hero-stat span {



  font-size: 12.5px;



  color: var(--text-tertiary);



}







/* 双栏布局：主内容 + 侧栏 */



.layout-2col {



  display: grid;



  grid-template-columns: minmax(0, 1fr) 290px;



  gap: 32px;



  align-items: start;




  max-width: 100%; overflow-x: hidden;}



.sidebar {



  position: sticky;



  top: calc(var(--header-h) + 20px);



  display: flex;



  flex-direction: column;



  gap: 16px;



}



.side-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 18px;



}



.side-card h3 {



  font-size: 14px;



  font-weight: 700;



  margin-bottom: 14px;



  display: flex;



  align-items: center;



  gap: 7px;



}



.side-card h3 svg {



  width: 15px;



  height: 15px;



  color: var(--accent);



}



.side-cat {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 8px 10px;



  border-radius: 8px;



  font-size: 14px;



  color: var(--text-secondary);



  transition: all 0.15s var(--ease);



}



.side-cat:hover {



  background: var(--bg-subtle);



  color: var(--accent);



}



.side-cat b {



  font-weight: 500;



}



.side-cat span {



  font-size: 12px;



  color: var(--text-tertiary);



  font-variant-numeric: tabular-nums;



}



.tag-cloud {



  display: flex;



  flex-wrap: wrap;



  gap: 7px;



}







/* ========================= 长图文列表（知乎式信息流） ========================= */



.article-list {



  display: flex;



  flex-direction: column;




  max-width: 100%; overflow-x: hidden;}



.article-item {



  display: block;



  padding: 20px 0;



  border-bottom: 1px solid var(--border);



  transition: all 0.18s var(--ease);



}



.article-item:first-child {



  padding-top: 4px;



}



.article-item:hover .article-title {



  color: var(--link);



}



.article-item:hover .article-cover img {



  transform: scale(1.045);



}



.article-meta-top {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 12.5px;



  color: var(--text-tertiary);



  margin-bottom: 8px;



}



.article-cat {



  color: var(--accent);



  font-weight: 600;



}



.article-body {



  display: flex;



  gap: 20px;



  align-items: flex-start;




  max-width: 100%; min-width: 0;}



.article-main {



  flex: 1;



  min-width: 0;



}



.article-title {



  font-size: 18.5px;



  font-weight: 700;



  line-height: 1.45;



  margin-bottom: 8px;



  letter-spacing: -0.3px;



  transition: color 0.15s var(--ease);















}



.article-summary {



  font-size: 14.5px;



  line-height: 1.68;



  color: var(--text-secondary);



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



  margin-bottom: 12px;



}



.article-meta-bottom {



  display: flex;



  align-items: center;



  gap: 14px;



  font-size: 12.5px;



  color: var(--text-tertiary);



  flex-wrap: wrap;



}



.article-meta-bottom span {



  display: inline-flex;



  align-items: center;



  gap: 4px;



}



.article-meta-bottom svg {



  width: 13px;



  height: 13px;



}



.article-cover {



  width: 172px;






  border-radius: var(--radius);



  overflow: hidden;



  flex-shrink: 0;



  background: var(--bg-subtle);



}



.article-cover img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.45s var(--ease);



}



.pin-flag {



  display: inline-flex;



  align-items: center;



  gap: 3px;



  color: var(--accent);



  font-weight: 600;



}







/* 分类筛选条 */



.filter-bar {



  display: flex;



  gap: 8px;



  overflow-x: auto;



  padding-bottom: 4px;



  margin-bottom: 18px;



  scrollbar-width: none;



  border-bottom: 1px solid var(--border);



}



.filter-bar::-webkit-scrollbar {



  display: none;



}



.filter-chip {



  padding: 8px 15px;



  font-size: 14.5px;



  color: var(--text-secondary);



  white-space: nowrap;



  border-bottom: 2px solid transparent;



  margin-bottom: -1px;



  transition: all 0.15s var(--ease);



}



.filter-chip:hover {



  color: var(--text);



}



.filter-chip.active {



  color: var(--accent);



  font-weight: 600;



  border-bottom-color: var(--accent);



}







/* ============================ 长图文详情（知乎阅读页） ============================ */



.reader {



  display: grid;



  grid-template-columns: minmax(0, 1fr) 232px;



  gap: 40px;



  align-items: start;



  max-width: 1000px;



  margin: 0 auto;



}



.reader-main {



  min-width: 0;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 36px 40px 44px;




  max-width: 100%; overflow-x: hidden;}



.reader-head {



  margin-bottom: 26px;



}



.reader-cover {



  margin-bottom: 22px;



  border-radius: var(--radius-lg);



  overflow: hidden;



}



.reader-cover img {



  display: block;



  width: 100%;



  height: auto;



  max-height: 480px;



  object-fit: cover;



}



.reader-title {



  font-size: 27px;



  font-weight: 800;



  line-height: 1.4;



  letter-spacing: -0.7px;



  margin-bottom: 16px;



}



.reader-meta {



  display: flex;



  align-items: center;



  gap: 12px;



  flex-wrap: wrap;



  font-size: 13px;



  color: var(--text-tertiary);



  padding-bottom: 18px;



  border-bottom: 1px solid var(--border);



}



.reader-author {



  display: flex;



  align-items: center;



  gap: 8px;



}



.avatar {



  width: 30px;



  height: 30px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--accent), #ff9a5c);



  display: grid;



  place-items: center;



  color: #fff;



  font-size: 13px;



  font-weight: 700;



  flex-shrink: 0;



}



.reader-author b {



  font-size: 14px;



  color: var(--text);



  font-weight: 600;



}



.meta-dot::before {



  content: '·';



  margin-right: 12px;



}







/* -------- 正文排版 -------- */



.prose {



  font-size: 16px;



  line-height: 1.85;



  color: var(--text);



  letter-spacing: 0.1px;



}



.prose > *:first-child {



  margin-top: 0;



}



.prose p {



  margin: 1.05em 0;



}



.prose h2 {



  font-size: 21px;



  font-weight: 700;



  margin: 1.9em 0 0.75em;



  letter-spacing: -0.3px;



  padding-left: 12px;



  border-left: 3.5px solid var(--accent);



  line-height: 1.4;



}



.prose h3 {



  font-size: 18px;



  font-weight: 700;



  margin: 1.6em 0 0.6em;



}



.prose h4 {



  font-size: 16.5px;



  font-weight: 700;



  margin: 1.4em 0 0.5em;



  color: var(--text-secondary);



}



.prose a {



  color: var(--link);



  text-decoration: none;



  border-bottom: 1px solid transparent;



  transition: all 0.15s var(--ease);



}



.prose a:hover {



  color: var(--link-hover);



  border-bottom-color: currentColor;



}



.prose strong {



  font-weight: 700;



}



.prose em {



  font-style: italic;



}



.prose ul,



.prose ol {



  margin: 1.05em 0;



  padding-left: 1.5em;



}



.prose ul {



  list-style: disc;



}



.prose ol {



  list-style: decimal;



}



.prose li {



  margin: 0.45em 0;



  padding-left: 0.25em;



}



.prose li::marker {



  color: var(--accent);



}



.prose ul ul,



.prose ol ol,



.prose ul ol,



.prose ol ul {



  margin: 0.4em 0;



}



.prose blockquote {



  margin: 1.4em 0;



  padding: 14px 18px;



  border-left: 3px solid var(--border-strong);



  background: var(--bg-subtle);



  border-radius: 0 var(--radius) var(--radius) 0;



  color: var(--text-secondary);



}



.prose blockquote p {



  margin: 0.4em 0;



}



.prose blockquote > *:first-child {



  margin-top: 0;



}



.prose blockquote > *:last-child {



  margin-bottom: 0;



}



.prose hr {



  border: none;



  height: 1px;



  background: var(--border);



  margin: 2.2em 0;



}



.prose img,



.md-img {



  margin: 1.5em auto;



  border-radius: var(--radius);



  cursor: zoom-in;



  background: var(--bg-subtle);



  box-shadow: var(--shadow-sm);



  transition: opacity 0.2s var(--ease);



}



.prose img:hover {



  opacity: 0.92;



}



.prose code {



  font-family: var(--font-mono);



  font-size: 0.88em;



  padding: 2px 6px;



  border-radius: 4px;



  background: var(--bg-subtle);



  color: var(--accent);



  border: 1px solid var(--border);



}



.prose pre {



  margin: 1.4em 0;



  padding: 16px 18px;



  border-radius: var(--radius);



  background: #1a1c20;



  overflow-x: auto;



  line-height: 1.6;



}



.prose pre code {



  background: none;



  border: none;



  padding: 0;



  color: #e6e6e6;



  font-size: 13.5px;



}



.table-wrap {



  margin: 1.5em 0;



  overflow-x: auto;



  border: 1px solid var(--border);



  border-radius: var(--radius);



  -webkit-overflow-scrolling: touch;



}



.prose table {



  width: 100%;



  border-collapse: collapse;



  font-size: 14px;



  min-width: 460px;



}



.prose th,



.prose td {



  padding: 10px 14px;



  text-align: left;



  border-bottom: 1px solid var(--border);



  white-space: nowrap;



}



.prose th {



  background: var(--bg-subtle);



  font-weight: 600;



  font-size: 13.5px;



  position: sticky;



  top: 0;



}



.prose tbody tr:nth-child(even) {



  background: color-mix(in srgb, var(--bg-subtle) 45%, transparent);



}



.prose tbody tr:hover {



  background: var(--bg-subtle);



}



.prose tbody tr:last-child td {



  border-bottom: none;



}



.heading-anchor {



  float: left;



  margin-left: -0.85em;



  padding-right: 0.25em;



  color: var(--text-tertiary);



  opacity: 0;



  border: none !important;



  font-weight: 400;



  transition: opacity 0.15s var(--ease);



}



.prose h2:hover .heading-anchor,



.prose h3:hover .heading-anchor,



.prose h4:hover .heading-anchor {



  opacity: 0.6;



}







/* 文末标签 / 上下篇 / 相关 */



.reader-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin: 34px 0 0;



  padding-top: 24px;



  border-top: 1px solid var(--border);



}



.reader-foot {



  margin-top: 22px;



  padding-top: 20px;



  border-top: 1px solid var(--border);



  font-size: 13px;



  color: var(--text-tertiary);



}



.adjacent {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 14px;



  margin-top: 24px;



}



.adjacent-item {



  padding: 15px 17px;



  border: 1px solid var(--border);



  border-radius: var(--radius);



  background: var(--bg-elevated);



  transition: all 0.18s var(--ease);



  min-width: 0;



}



.adjacent-item:hover {



  border-color: var(--accent);



  transform: translateY(-2px);



  box-shadow: var(--shadow-sm);



}



.adjacent-item small {



  font-size: 12px;



  color: var(--text-tertiary);



  display: block;



  margin-bottom: 6px;



}



.adjacent-item b {



  font-size: 14.5px;



  font-weight: 600;



  line-height: 1.5;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



}



.adjacent-next {



  text-align: right;



}







/* -------- 侧边目录 TOC -------- */



.toc {



  position: sticky;



  top: calc(var(--header-h) + 24px);



  max-height: calc(100vh - var(--header-h) - 60px);



  overflow-y: auto;



  padding-left: 18px;



  border-left: 1px solid var(--border);



  scrollbar-width: thin;



}



.toc-title {



  font-size: 12px;



  font-weight: 700;



  color: var(--text-tertiary);



  letter-spacing: 0.6px;



  margin-bottom: 12px;



  text-transform: uppercase;



}



.toc-list {



  font-size: 13.5px;



}



.toc-list a {



  display: block;



  padding: 5px 0 5px 11px;



  color: var(--text-tertiary);



  line-height: 1.5;



  border-left: 2px solid transparent;



  margin-left: -19px;



  padding-left: 17px;



  transition: all 0.15s var(--ease);



  overflow: hidden;



  text-overflow: ellipsis;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



}



.toc-list a:hover {



  color: var(--text);



}



.toc-list a.active {



  color: var(--accent);



  border-left-color: var(--accent);



  font-weight: 600;



}



.toc-l3 a {



  padding-left: 29px;



  font-size: 13px;



}



.toc-l4 a {



  padding-left: 41px;



  font-size: 12.5px;



}







/* 移动端目录浮层 */



.toc-fab {



  display: none;



  position: fixed;



  right: 14px;



  bottom: 66px;



  width: 42px;



  height: 42px;



  border-radius: 12px;



  background: var(--accent);



  color: #fff;



  place-items: center;



  box-shadow: 0 4px 14px rgba(244, 81, 30, 0.4);



  z-index: 90;



}



.toc-fab svg {



  width: 19px;



  height: 19px;



}



.toc-sheet {



  position: fixed;



  inset: 0;



  z-index: 300;



  display: none;



}



.toc-sheet.open {



  display: block;



}



.toc-sheet-mask {



  position: absolute;



  inset: 0;



  background: rgba(0, 0, 0, 0.4);



  animation: fadeIn 0.2s var(--ease);



}



.toc-sheet-panel {



  position: absolute;



  left: 0;



  right: 0;



  bottom: 0;



  max-height: 68vh;



  overflow-y: auto;



  background: var(--bg-elevated);



  border-radius: var(--radius-xl) var(--radius-xl) 0 0;



  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));



  animation: sheetUp 0.26s var(--ease);



}



@keyframes sheetUp {



  from {



    transform: translateY(100%);



  }



  to {



    transform: translateY(0);



  }



}



.toc-sheet-panel .toc-title {



  margin-bottom: 14px;



}



.toc-sheet-panel .toc-list a {



  padding: 9px 0 9px 12px;



  font-size: 14.5px;



  margin-left: 0;



}







/* ========================= 短图文瀑布流（小红书式） ========================= */



.masonry {



  columns: 5;



  column-gap: 14px;



}



.note-card {



  break-inside: avoid;



  margin-bottom: 14px;



  background: var(--bg-elevated);



  border-radius: var(--radius);



  overflow: hidden;



  display: block;



  transition: all 0.22s var(--ease);



  border: 1px solid transparent;



}



.note-card:hover {



  transform: translateY(-3px);



  box-shadow: var(--shadow-md);



  border-color: var(--border);



}



.note-cover {



  position: relative;



  background: var(--bg-subtle);



  overflow: hidden;



  line-height: 0;



}



.note-cover img {



  width: 100%;



  transition: transform 0.5s var(--ease);



}



.note-card:hover .note-cover img {



  transform: scale(1.04);



}



.note-cover-ph {



  aspect-ratio: 3 / 4;



  display: grid;



  place-items: center;



  color: var(--text-tertiary);



  font-size: 12px;



  background: var(--bg-subtle);



}



.note-imgcount {



  position: absolute;



  top: 8px;



  right: 8px;



  height: 21px;



  padding: 0 8px;



  border-radius: 11px;



  background: rgba(0, 0, 0, 0.55);



  color: #fff;



  font-size: 11.5px;



  display: inline-flex;



  align-items: center;



  gap: 4px;



  backdrop-filter: blur(6px);



}



.note-imgcount svg {



  width: 11px;



  height: 11px;



}



.note-info {



  padding: 10px 12px 12px;



}



.note-card-title {



  font-size: 14px;



  font-weight: 500;



  line-height: 1.48;



  color: var(--text);



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



  margin-bottom: 9px;



}



.note-card-foot {



  display: flex;



  align-items: center;



  justify-content: space-between;



  font-size: 12px;



  color: var(--text-tertiary);



}



.note-card-author {



  display: flex;



  align-items: center;



  gap: 5px;



  min-width: 0;



}



.note-card-author .avatar {



  width: 19px;



  height: 19px;



  font-size: 9px;



}



.note-card-author span {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.note-card-views {



  display: inline-flex;



  align-items: center;



  gap: 3px;



  flex-shrink: 0;



}



.note-card-views svg {



  width: 12px;



  height: 12px;



}







/* ========================== 短图文详情（小红书笔记页） ========================== */



.note-detail {



  max-width: 1080px;



  margin: 0 auto;



  background: var(--bg-elevated);



  border-radius: var(--radius-lg);



  overflow: hidden;



  display: grid;



  grid-template-columns: minmax(0, 1.25fr) 400px;



  box-shadow: var(--shadow-md);



  border: 1px solid var(--border);



}



.gallery {



  position: relative;



  background: #0c0c0e;



  display: flex;



  align-items: center;



  min-height: 420px;



}



.gallery-track {



  display: flex;



  overflow-x: auto;



  scroll-snap-type: x mandatory;



  scroll-behavior: smooth;



  width: 100%;



  height: 100%;



  scrollbar-width: none;



  -ms-overflow-style: none;



}



.gallery-track::-webkit-scrollbar {



  display: none;



}



.gallery-slide {



  flex: 0 0 100%;



  scroll-snap-align: center;



  display: grid;



  place-items: center;



  padding: 0;



  min-height: 420px;



  max-height: 74vh;



}



.gallery-slide img {



  max-width: 100%;



  max-height: 74vh;



  object-fit: contain;



  cursor: zoom-in;



}



.gallery-btn {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 34px;



  height: 34px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.9);



  color: #333;



  display: grid;



  place-items: center;



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);



  opacity: 0;



  transition: opacity 0.2s var(--ease);



  z-index: 2;



}



.gallery:hover .gallery-btn {



  opacity: 1;



}



.gallery-btn:disabled {



  opacity: 0 !important;



}



.gallery-btn svg {



  width: 17px;



  height: 17px;



}



.gallery-prev {



  left: 12px;



}



.gallery-next {



  right: 12px;



}



.gallery-dots {



  position: absolute;



  bottom: 14px;



  left: 50%;



  transform: translateX(-50%);



  display: flex;



  gap: 6px;



  padding: 6px 10px;



  background: rgba(0, 0, 0, 0.35);



  border-radius: 12px;



  backdrop-filter: blur(6px);



  z-index: 2;



  max-width: 82%;



  overflow-x: auto;



  scrollbar-width: none;



}



.gallery-dots::-webkit-scrollbar {



  display: none;



}



.gallery-dot {



  width: 6px;



  height: 6px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.45);



  transition: all 0.2s var(--ease);



  flex-shrink: 0;



}



.gallery-dot.active {



  background: #fff;



  width: 16px;



  border-radius: 3px;



}



.gallery-counter {



  position: absolute;



  top: 12px;



  right: 12px;



  padding: 3px 10px;



  border-radius: 11px;



  background: rgba(0, 0, 0, 0.5);



  color: #fff;



  font-size: 12px;



  backdrop-filter: blur(6px);



  z-index: 2;



  font-variant-numeric: tabular-nums;



}







.note-side {



  display: flex;



  flex-direction: column;



  min-width: 0;



  max-height: 74vh;



}



.note-side-head {



  padding: 18px 22px 14px;



  border-bottom: 1px solid var(--border);



  display: flex;



  align-items: center;



  gap: 10px;



  flex-shrink: 0;



}



.note-side-head .avatar {



  width: 38px;



  height: 38px;



  font-size: 15px;



}



.note-side-head b {



  font-size: 14.5px;



  font-weight: 600;



  display: block;



}



.note-side-head small {



  font-size: 12px;



  color: var(--text-tertiary);



}



.note-side-body {



  padding: 20px 22px 24px;



  overflow-y: auto;



  flex: 1;



}



.note-detail-title {



  font-size: 18px;



  font-weight: 700;



  line-height: 1.5;



  margin-bottom: 12px;



  letter-spacing: -0.2px;



}



.note-content {



  font-size: 15px;



  line-height: 1.78;



  color: var(--text);



  white-space: pre-wrap;



}



.note-content p {



  margin: 0.7em 0;



}



.note-content img {



  border-radius: var(--radius-sm);



  margin: 0.8em 0;



  cursor: zoom-in;



}



.note-content a {



  color: var(--link);



}



.note-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 7px;



  margin-top: 16px;



}



.note-tag {



  color: var(--link);



  font-size: 14px;



}



.note-tag:hover {



  color: var(--accent);



}



.note-side-foot {



  padding: 14px 22px;



  border-top: 1px solid var(--border);



  font-size: 12.5px;



  color: var(--text-tertiary);



  display: flex;



  align-items: center;



  gap: 14px;



  flex-shrink: 0;



  flex-wrap: wrap;



}



.note-side-foot span {



  display: inline-flex;



  align-items: center;



  gap: 4px;



}



.note-side-foot svg {



  width: 13px;



  height: 13px;



}







/* ============================== 其他页面 ============================== */



.cat-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));



  gap: 14px;



}



.cat-card {



  padding: 22px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  transition: all 0.2s var(--ease);



}



.cat-card:hover {



  border-color: var(--accent);



  transform: translateY(-3px);



  box-shadow: var(--shadow-md);



}



.cat-card b {



  font-size: 17px;



  font-weight: 700;



  display: block;



  margin-bottom: 6px;



}



.cat-card p {



  font-size: 13.5px;



  color: var(--text-tertiary);



  margin-bottom: 14px;



  min-height: 20px;



}



.cat-card em {



  font-style: normal;



  font-size: 12.5px;



  color: var(--accent);



  font-weight: 600;



}







.timeline {



  position: relative;



  padding-left: 22px;



}



.timeline::before {



  content: '';



  position: absolute;



  left: 5px;



  top: 8px;



  bottom: 8px;



  width: 2px;



  background: var(--border);



}



.timeline-group {



  margin-bottom: 30px;



}



.timeline-ym {



  position: relative;



  font-size: 15px;



  font-weight: 700;



  margin-bottom: 12px;



  color: var(--text);



}



.timeline-ym::before {



  content: '';



  position: absolute;



  left: -21px;



  top: 7px;



  width: 10px;



  height: 10px;



  border-radius: 50%;



  background: var(--accent);



  box-shadow: 0 0 0 3px var(--bg);



}



.timeline-item {



  display: flex;



  gap: 14px;



  padding: 8px 0;



  font-size: 14.5px;



  align-items: baseline;



}



.timeline-item time {



  font-size: 12.5px;



  color: var(--text-tertiary);



  flex-shrink: 0;



  font-variant-numeric: tabular-nums;



}



.timeline-item a {



  color: var(--text-secondary);



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.timeline-item a:hover {



  color: var(--accent);



}







.about-card {



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 34px;



  max-width: 720px;



  margin: 0 auto;



}



.about-stats {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 14px;



  margin: 26px 0;



}



.about-stat {



  text-align: center;



  padding: 16px 10px;



  background: var(--bg-subtle);



  border-radius: var(--radius);



}



.about-stat b {



  display: block;



  font-size: 21px;



  font-weight: 700;



  font-variant-numeric: tabular-nums;



}



.about-stat span {



  font-size: 12px;



  color: var(--text-tertiary);



}







.search-tabs {



  display: flex;



  gap: 20px;



  border-bottom: 1px solid var(--border);



  margin-bottom: 20px;



}



.search-tab {



  padding: 10px 2px;



  font-size: 15px;



  color: var(--text-secondary);



  border-bottom: 2px solid transparent;



  margin-bottom: -1px;



  cursor: pointer;



}



.search-tab.active {



  color: var(--accent);



  font-weight: 600;



  border-bottom-color: var(--accent);



}



.search-panel {



  display: none;



}



.search-panel.active {



  display: block;



}







/* ================================ 响应式 ================================ */



@media (max-width: 1400px) {



  .masonry {



    columns: 4;



  }



}



@media (max-width: 1100px) {



  .layout-2col {



    grid-template-columns: 1fr;



  }



  .sidebar {



    position: static;



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));



  }



  .reader {



    grid-template-columns: minmax(0, 1fr);



    max-width: 760px;



  }



  .toc {



    display: none;



  }



  .toc-fab {



    display: grid;



  }



  .masonry {



    columns: 3;



  }



  .note-detail {



    grid-template-columns: 1fr;



    max-width: 620px;



  }



  .note-side {



    max-height: none;



  }



  .gallery-slide,



  .gallery {



    min-height: 300px;



  }



  .gallery-slide img {



    max-height: 62vh;



  }



  .gallery-btn {



    opacity: 1;



  }



}



@media (max-width: 860px) {



  .hero {



    padding: 30px 0 26px;



  }



  .hero h1 {



    font-size: 27px;



  }



  .hero-stats {



    gap: 22px;



  }



  .hero-stat b {



    font-size: 21px;



  }



  .reader-main {



    padding: 24px 20px 32px;



  }



  .reader-title {



    font-size: 22px;



  }



  .prose {



    font-size: 16px;



    line-height: 1.8;



  }



  .prose h2 {



    font-size: 19px;



  }



  .about-stats {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 700px) {



  .masonry {



    columns: 2;



    column-gap: 10px;



  }



  .note-card {



    margin-bottom: 10px;



  }



  .article-cover {



    width: 112px;



    border-radius: 8px;



  }



  .article-title {



    font-size: 16.5px;



  }



  .article-summary {



    -webkit-line-clamp: 2;



    font-size: 13.5px;



  }



  .article-body {



    gap: 12px;



  }



  .adjacent {



    grid-template-columns: 1fr;



  }



  .adjacent-next {



    text-align: left;



  }



  .note-detail {



    border-radius: var(--radius);



  }



  .note-side-body {



    padding: 16px 16px 20px;



  }



  .note-side-head {



    padding: 14px 16px 12px;



  }



  .note-side-foot {



    padding: 12px 16px;



  }



  .hero h1 {



    font-size: 26px;



  }



  .hero p {



    font-size: 14px;



    max-width: 100%;



  }



  .hero-inner {



    flex-direction: column;



    gap: 20px;



  }



  .hero-stats {



    gap: 20px;



    justify-content: flex-start;



  }



  .hero-stat b {



    font-size: 21px;



  }



  .hero-stat {



    text-align: left;



  }



  .about-card {



    padding: 22px 18px;



  }



}



@media (max-width: 420px) {

  

  .article-body {
    
    gap: 10px;
  }

  .article-cover {
    width: 100px;
    aspect-ratio: 4 / 3;
  }

.hero {

    padding: 24px 0 20px;

  }

  .hero::before {

    display: none;

  }

  .hero h1 {

    font-size: 22px;

    letter-spacing: -0.3px;

  }

  .hero p {

    font-size: 13px;

  }

  .hero-stats {

    gap: 14px;

  }

  .hero-stat b {

    font-size: 17px;

  }

  .hero-stat span {

    font-size: 11.5px;

  }

  .social-bar {

    gap: 5px;

    margin-top: 10px;

  }

  .social-btn {

    width: 30px;

    height: 30px;

    border-radius: 8px;

  }

  .article-cover {

    width: 80px;

    border-radius: 6px;

  }

  .article-title {

    font-size: 14.5px;

  }

  .article-summary {

    font-size: 12.5px;

    -webkit-line-clamp: 2;

  }

  .article-body {

    gap: 10px;

  }

  .article-item {

    padding: 14px 0;

  }

  .masonry {

    columns: 2;

    column-gap: 8px;

  }

  .note-card {

    margin-bottom: 8px;

  }

  .prose img {

    margin: 1.1em auto;

  }

  .section-title {

    font-size: 16px;

  }

  .reader-main {

    padding: 18px 16px 28px;

    border-radius: 10px;

  }

  .reader-title {

    font-size: 19px;

  }

  .reader-cover img {

    max-height: 200px;

  }

}







/* --------------------------------- 分享栏 --------------------------------- */



.share-bar {



  display: flex;



  align-items: center;



  flex-wrap: wrap;



  gap: 8px;



  margin-top: 22px;



  padding: 14px 16px;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius);



}



.share-label {



  font-size: 13px;



  font-weight: 600;



  color: var(--text-secondary);



  margin-right: 2px;



}



.share-btn {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  padding: 7px 12px;



  font-size: 13px;



  color: var(--text-secondary);



  background: var(--bg);



  border: 1px solid var(--border);



  border-radius: 999px;



  cursor: pointer;



  transition: all .15s ease;



}



.share-btn svg { width: 15px; height: 15px; }



.share-btn:hover {



  color: #fff;



  background: var(--accent);



  border-color: var(--accent);



  transform: translateY(-1px);



}



.share-copied {



  font-size: 12.5px;



  color: var(--accent);



  opacity: 0;



  transform: translateX(-4px);



  transition: all .2s ease;



  pointer-events: none;



}



.share-copied.show {



  opacity: 1;



  transform: translateX(0);



}







/* ------------------------------ 微信分享弹层 ------------------------------ */



.share-modal {



  position: fixed;



  inset: 0;



  z-index: 1200;



  display: none;



  align-items: center;



  justify-content: center;



}



.share-modal.open { display: flex; }



.share-modal-mask {



  position: absolute;



  inset: 0;



  background: rgba(0, 0, 0, .5);



  backdrop-filter: blur(2px);



}



.share-modal-box {



  position: relative;



  z-index: 1;



  width: 280px;



  max-width: 86vw;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 24px 22px 22px;



  text-align: center;



  animation: sharePop .22s ease;



}



@keyframes sharePop {



  from { opacity: 0; transform: scale(.92) translateY(8px); }



  to { opacity: 1; transform: scale(1) translateY(0); }



}



.share-modal-close {



  position: absolute;



  top: 8px;



  right: 12px;



  border: none;



  background: none;



  font-size: 24px;



  line-height: 1;



  color: var(--text-tertiary);



  cursor: pointer;



}



.share-modal-title {



  font-size: 14px;



  font-weight: 600;



  color: var(--text);



  margin-bottom: 14px;



}



.share-qr {



  width: 180px;



  height: 180px;



  margin: 0 auto 12px;



  padding: 10px;



  background: #fff;



  border: 1px solid var(--border);



  border-radius: var(--radius);



}



.share-qr img { width: 100%; height: 100%; display: block; }



.share-modal-url {



  font-size: 12px;



  color: var(--text-tertiary);



  word-break: break-all;



  margin-bottom: 14px;



  line-height: 1.5;



}







/* ------------------------------ 热门阅读榜单 ------------------------------ */



.hot-list {



  list-style: none;



  margin: 0;



  padding: 0;



}



.hot-item {



  display: flex;



  align-items: center;



  gap: 10px;



  padding: 9px 0;



  border-bottom: 1px solid var(--border);



}



.hot-item:last-child { border-bottom: none; }



.hot-rank {



  flex: 0 0 22px;



  height: 22px;



  line-height: 22px;



  text-align: center;



  font-size: 12px;



  font-weight: 700;



  color: var(--text-tertiary);



  background: var(--bg);



  border-radius: 6px;



}



.hot-rank.top {



  color: #fff;



  background: var(--accent);



}



.hot-link {



  flex: 1;



  min-width: 0;



  font-size: 13.5px;



  color: var(--text);



  text-decoration: none;



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.hot-link:hover { color: var(--accent); }



.hot-views {



  flex: 0 0 auto;



  font-size: 12px;



  color: var(--text-tertiary);



}







/* ------------------------------ 首页侧栏最新视频 ------------------------------ */



.side-video-list {



  display: flex;



  flex-direction: column;



  gap: 10px;



  margin-top: 2px;



}



.side-video {



  display: flex;



  gap: 10px;



  align-items: center;



}



.side-video-thumb {



  position: relative;



  flex: 0 0 64px;



  width: 64px;



  height: 44px;



  border-radius: 8px;



  overflow: hidden;



  background: var(--bg-subtle);



}



.side-video-thumb img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}



.side-video-badge {



  position: absolute;



  right: 3px;



  bottom: 3px;



  font-size: 10px;



  line-height: 1.4;



  padding: 0 5px;



  border-radius: 4px;



  background: rgba(0, 0, 0, 0.6);



  color: #fff;



}



.side-video-title {



  flex: 1;



  min-width: 0;



  font-size: 13px;



  color: var(--text);



  line-height: 1.45;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



}



.side-video:hover .side-video-title { color: var(--accent); }







/* ============================ 视频（抖音风展示） ============================ */



.hero-condensed {



  padding: 30px 0 18px;



  margin-bottom: 8px;



}



.hero-condensed h1 {



  font-size: 27px;



  margin-bottom: 6px;



}



.hero-condensed p {



  font-size: 14.5px;



}







.video-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));



  gap: 18px;



}



.video-card {



  display: block;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  overflow: hidden;



  transition: all 0.22s var(--ease);



}



.video-card:hover {



  transform: translateY(-3px);



  box-shadow: var(--shadow-md);



  border-color: var(--border-strong);



}



.video-cover {



  position: relative;



  aspect-ratio: 16 / 10;



  background: #0c0c0e;



  overflow: hidden;



  line-height: 0;



}



.video-cover img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.45s var(--ease);



}



.video-card:hover .video-cover img {



  transform: scale(1.04);



}



.video-cover-ph {



  display: grid;



  place-items: center;



  height: 100%;



  color: var(--text-tertiary);



  font-size: 13px;



  background: var(--bg-subtle);



}



.video-play {



  position: absolute;



  left: 50%;



  top: 50%;



  transform: translate(-50%, -50%);



  width: 50px;



  height: 50px;



  border-radius: 50%;



  background: rgba(0, 0, 0, 0.42);



  color: #fff;



  display: grid;



  place-items: center;



  backdrop-filter: blur(4px);



  transition: all 0.2s var(--ease);



}



.video-play svg {



  width: 24px;



  height: 24px;



  margin-left: 3px;



}



.video-card:hover .video-play {



  background: var(--accent);



  transform: translate(-50%, -50%) scale(1.08);



}



.video-badge {



  position: absolute;



  left: 10px;



  top: 10px;



  height: 22px;



  padding: 0 9px;



  border-radius: 11px;



  font-size: 12px;



  font-weight: 600;



  color: #fff;



  display: inline-flex;



  align-items: center;



  background: rgba(0, 0, 0, 0.5);



  backdrop-filter: blur(4px);



}



.video-badge-douyin { background: rgba(0, 0, 0, 0.62); }



.video-badge-bilibili { background: #00a1d6; }



.video-badge-other { background: var(--accent); }



.video-views {



  position: absolute;



  right: 10px;



  bottom: 10px;



  font-size: 11.5px;



  color: #fff;



  padding: 2px 8px;



  border-radius: 10px;



  background: rgba(0, 0, 0, 0.5);



  backdrop-filter: blur(4px);



}



.video-info {



  padding: 12px 13px 14px;



}



.video-title {



  font-size: 14.5px;



  font-weight: 600;



  line-height: 1.5;



  color: var(--text);



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



  margin-bottom: 10px;



  min-height: 42px;



}



.video-foot {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 8px;



}



.video-author {



  display: flex;



  align-items: center;



  gap: 6px;



  min-width: 0;



  font-size: 12.5px;



  color: var(--text-secondary);



}



.video-author .avatar {



  width: 20px;



  height: 20px;



  font-size: 10px;



}



.video-author span {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}



.video-date {



  flex-shrink: 0;



  font-size: 12px;



  color: var(--text-tertiary);



}







/* 视频详情页 */



.video-detail {



  max-width: 920px;



  margin: 0 auto;



}



.video-crumb {



  font-size: 13px;



  color: var(--text-tertiary);



  margin-bottom: 18px;



}



.video-crumb a { color: inherit; }



.video-crumb a:hover { color: var(--accent); }



.video-crumb span { margin: 0 6px; }



.video-hero {



  display: grid;



  grid-template-columns: minmax(0, 1.3fr) 1fr;



  gap: 24px;



  align-items: start;



  background: var(--bg-elevated);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 18px;



}



.video-hero-cover {



  position: relative;



  aspect-ratio: 16 / 10;



  border-radius: var(--radius);



  overflow: hidden;



  background: #0c0c0e;



  line-height: 0;



}



.video-hero-cover img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}



.video-hero-meta {



  display: flex;



  flex-direction: column;



  gap: 12px;



}



.video-detail-title {



  font-size: 23px;



  font-weight: 800;



  line-height: 1.4;



  letter-spacing: -0.4px;



}



.video-detail-sub {



  display: flex;



  align-items: center;



  gap: 10px;



  flex-wrap: wrap;



  font-size: 13.5px;



  color: var(--text-tertiary);



}



.video-detail-sub b { color: var(--text); font-weight: 600; }



.video-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 7px;



}



.video-jump {



  margin-top: 4px;



  align-self: flex-start;



}







@media (max-width: 860px) {



  .video-grid {



    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));



    gap: 12px;



  }



  .video-hero {



    grid-template-columns: 1fr;



    gap: 16px;



  }



  .video-detail-title { font-size: 19px; }



}







@media (max-width: 600px) {



  .share-bar { gap: 6px; padding: 12px; }



  .share-btn { padding: 6px 10px; font-size: 12.5px; }



  .share-label { width: 100%; margin-bottom: 2px; }



}







/* ---------------- 视频详情页内嵌播放器（B站） ---------------- */



.video-preview-btn { margin-left: 8px; }



.bili-embed { margin-top: 16px; border-radius: 12px; overflow: hidden; background: #000; }



.bili-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }

.douyin-embed { width: min(360px, 100%); aspect-ratio: 9 / 16; margin: 16px auto 0; border-radius: 12px; overflow: hidden; background: #000; }
.douyin-embed iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }







/* 列表卡片小窗预览弹层已删除 */







/* ================================ 归档页：发文频率热力图（GitHub 风格） ================================ */



.hm-card { margin-bottom: 24px; }



.hm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }



.hm-title { font-size: 16px; font-weight: 700; color: var(--text, #1f2329); }



.hm-sub { font-size: 13px; color: var(--text-tertiary, #8a9099); margin-top: 4px; }



.hm-sub b { color: var(--text, #1f2329); }



.hm-stats { display: flex; gap: 20px; }



.hm-stat { text-align: center; }



.hm-stat b { display: block; font-size: 20px; line-height: 1.2; color: var(--text, #1f2329); }



.hm-stat span { font-size: 12px; color: var(--text-tertiary, #8a9099); }







.hm-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }



.hm-days { display: flex; flex-direction: column; gap: 3px; padding-top: 20px; font-size: 10px; color: var(--text-tertiary, #8a9099); }



.hm-days span { width: 13px; height: 13px; line-height: 13px; text-align: center; }



.hm-main { flex: 1; min-width: 0; }



.hm-months { display: flex; gap: 3px; height: 16px; margin-bottom: 4px; }



.hm-month { width: 13px; font-size: 10px; line-height: 16px; color: var(--text-tertiary, #8a9099); white-space: nowrap; }



.hm-grid { display: flex; gap: 3px; }



.hm-week { display: flex; flex-direction: column; gap: 3px; }



.hm-cell { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; background: #ebedf0; }



.hm-cell.lvl-0 { background: #ebedf0; }



.hm-cell.lvl-1 { background: #9be9a8; }



.hm-cell.lvl-2 { background: #40c463; }



.hm-cell.lvl-3 { background: #30a14e; }



.hm-cell.lvl-4 { background: #216e39; }



.hm-cell.is-future { background: transparent; }



[data-theme="dark"] .hm-cell.lvl-0 { background: #161b22; }



[data-theme="dark"] .hm-cell.lvl-1 { background: #0e4429; }



[data-theme="dark"] .hm-cell.lvl-2 { background: #006d32; }



[data-theme="dark"] .hm-cell.lvl-3 { background: #26a641; }



[data-theme="dark"] .hm-cell.lvl-4 { background: #39d353; }







.hm-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--text-tertiary, #8a9099); }



.hm-legend .hm-cell { display: inline-block; }







@media (max-width: 640px) {



  .hm-stats { gap: 14px; }



  .hm-stat b { font-size: 17px; }



}







/* ============ 社交媒体按钮 ============ */



.social-bar {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin-top: 16px;



}



.social-btn {



  position: relative;



  width: 36px;



  height: 36px;



  border-radius: 10px;



  display: grid;



  place-items: center;



  



  text-decoration: none;



  transition: transform .18s, box-shadow .18s;



}



.social-btn:hover {



  transform: translateY(-3px);



  box-shadow: 0 4px 14px rgba(0,0,0,.15);



}



.social-btn svg,
.social-btn img {



  width: 100%;



  height: 100%;



  display: block; border-radius: 10px;
  object-fit: contain;



}







/* 二维码浮窗 */



.qr-pop {



  position: absolute;



  bottom: calc(100% + 10px);



  left: 50%;



  transform: translateX(-50%) translateY(6px);



  padding: 8px;



  background: var(--bg-elevated, #fff);



  border: 1px solid var(--border, #e5e7eb);



  border-radius: 10px;



  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));



  opacity: 0;



  pointer-events: none;



  transition: opacity .18s, transform .18s;



  z-index: 10;



  white-space: nowrap;



}



.qr-pop img {



  display: block;



  width: 140px;



  height: 140px;



  max-width: none;



  object-fit: contain;



}



.qr-pop.show {



  opacity: 1;



  transform: translateX(-50%) translateY(0);



  pointer-events: auto;



}







@media (max-width: 640px) {



  .social-bar { margin-top: 12px; gap: 6px; }



  .social-btn { width: 32px; height: 32px; }



}




/* author avatar = site logo */
.avatar.avatar-logo { background: none; object-fit: cover; border-radius: 12px; }