:root {
  /* ---------------- 颜色 ---------------- */
  --color-bg: #08080b;                       /* 页面底色 */
  --color-bg-op: rgba(8, 8, 11, 0.7);        /* 半透明底色（吸顶标题配毛玻璃用） */
  --color-text: #f0f0f4;                     /* 主文字 */
  --color-text-secondary: #a9a9b8;           /* 次要文字：摘要、日期、未激活导航 */
  --color-primary: #000000;
  --color-primary-hover: #b490f0;            /* 高亮紫：hover / 激活 / 标签 */
  --color-primary-soft: rgb(122, 54, 235, 0.1); /* 高亮紫的淡底色（标签胶囊） */
  --color-surface-hover: #16161c;
  --color-border-subtle: rgba(255, 255, 255, 0.12);

  /* ---------------- 字体与字号 ---------------- */
  --font-family-base: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* 字号阶梯：都用 clamp(最小, 视口比例, 最大)，随窗口平滑缩放 */
  --fs-name: clamp(20px, 6vw, 50px);         /* 左栏大标题（Hua-2006） */
  --fs-role: clamp(8px, 3vw, 18px);          /* 副标题（Computer Apprentice） */
  --fs-intro: clamp(4px, 3vw, 15px);         /* 左栏简介正文 */
  --fs-nav: clamp(8px, 3vw, 13px);           /* 导航项 */
  --fs-section-title: clamp(10px, 3vh, 20px);/* 窄屏吸顶的分类标题 */
  --fs-title: clamp(10px, 3vh, 18px);        /* 文章标题 */
  --fs-summary: clamp(10px, 3vh, 16px);      /* 文章摘要 */
  --fs-caption: clamp(5px, 3vh, 10px);       /* 发布时间 */
  --fs-cover: clamp(6px, 3vh, 12px);         /* 封面文字 */
  --fs-tag: clamp(5px, 3vw, 13px);           /* 标签 */

  /* ---------------- 间距 ---------------- */
  --space-page-x: clamp(1rem, 3vw, 3rem);    /* 页面左右留白 */
  --space-band-y: clamp(5vh, 3vh, 10vh);                      /* 竖向"带"留白：左栏内边距 / 区块上下间距 / 锚点偏移 */
  --space-intro-gap: clamp(20px, 7vh, 60px); /* 简介与导航之间的最小间距 */
  --space-card-gap: clamp(10px, 5vh, 20px);  /* 卡片之间 */
  --space-card-pad: clamp(12px, 1.5vw, 20px);/* 卡片内容四周的内边距（hover 背景比内容大一圈） */
  --space-cover-gap: clamp(10px, 1.5vw, 22px);/* 卡片内：封面栏与文字栏之间 */
  --space-block-gap: clamp(5px, 3vh, 8px);   /* 卡片内部元素之间（标题/摘要/时间） */

  /* ---------------- 尺寸 ---------------- */
  --size-container: 1280px;                  /* 页面最大宽度 */
  --size-sidebar-min-h: 336px;               /* 左栏内容最小高度（宽屏） */
  --size-sidebar-min-h-narrow: 160px;        /* 同上，窄屏（导航被隐藏） */
  --size-cover-ratio: 26%;                   /* 卡片左栏宽度占卡片的比例 */
  --size-nav-line-w: 50px;                   /* 导航下划线：静息长度 */
  --size-nav-line-w-active: 100px;           /* 导航下划线：hover / 激活长度 */
  --size-nav-line-h: 2px;                    /* 导航下划线粗细 */
  --size-icon: clamp(20px, 3vw, 32px);       /* 社交图标 */
  --size-title-icon: clamp(8px, 3vh, 16px);  /* 标题后的 ↗ 箭头 */

  /* ---------------- 动效 ---------------- */
  --dur-fast: 0.25s;                         /* 颜色/位移等小变化 */
  --dur-base: 0.3s;                          /* 导航下划线伸缩 */
  --dur-slow: 0.5s;                          /* 卡片底色/边框渐显 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);/* 入场动画的缓动 */
  --reveal-offset: 60px;                     /* 入场动画起始下移距离 */
  --blur-sticky: 2px;                        /* 吸顶标题的毛玻璃模糊半径 */
}

/* 基础的全局重置（可选，已经 import 后全局生效） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--color-bg);
  color: var(--color-text);


  /* 全局修改整个页面选中文字样式 */
  ::selection {
    color : var(--color-bg);
    background-color: var(--color-primary-hover);
  }
}

/* 告诉浏览器"这是深色页面"：滚动条、表单控件、overscroll（越过边界回弹）的底色
   都会跟着变深。不加这一条时，页面滚动条槽和回弹区会是系统浅色 ——
   你说的"白边/灰边"十有八九就是它 */
:root {
  color-scheme : dark;
}

html {
  scroll-behavior: smooth;
  /* 根元素的背景会被浏览器"传播"到整个画布：
     内容比视口矮时，下面（和某些浏览器的右侧）剩下的区域也是这个颜色，不会露白 */
  background-color: var(--color-bg);
}

a {
  text-decoration: none;
  color : var(--color-text);
}

button {
  border: none;
  font-family: inherit;
}
ul {
  list-style-type : none;
}


@font-face {
  font-family: 'Picaflor';
  src: url('../fonts/Picaflor-12pt.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-VariableFont_wght.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuanHengDuLiang';
  src: url('../fonts/Aa.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


.page-home .Home {                       
  max-width : var(--size-container);
  width : 100%;
  display : flex;
  margin : 0 auto;
  padding : 0 var(--space-page-x);
}
.page-home .TwoColumn {                  
  width : 100%;
  display : grid;
  grid-template-columns : repeat(2, 1fr);
}
.page-home .ArticleArea {                
  padding : var(--space-band-y) 0;
}
.page-home .Sidebar {
  display : flex;
  flex-direction : column;
  justify-content : space-between;   
  position : sticky;                 
  top : 0;
  height : 100vh;
  padding : var(--space-band-y) 0;
}
.page-home .SidebarIntro {               
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  gap : var(--space-intro-gap);      
  min-height : var(--size-sidebar-min-h);
}
.page-home .SidebarIntro h1 { font-size : var(--fs-name); }
.page-home .SidebarIntro h2 { font-size : var(--fs-role); }
.page-home .SidebarIntro p {
  font-size : var(--fs-intro);
  color : var(--color-text-secondary);
  margin-top : clamp(1px, 2vw, 10px);   
}
.page-home .NavList {
  display : flex;
  flex-direction : column;
}
.page-home .NavList a {
  display : flex;
  width : fit-content;      
  align-items : center;
  padding : 5px 0;          
  column-gap : 16px;        
  cursor : pointer;
  font-size : var(--fs-nav);
  font-weight : bold;
  color : var(--color-text-secondary);   
  transition : color var(--dur-base) ease;
}
.page-home .NavList a::before {
  content : '';
  flex : 0 0 auto;                    
  width : var(--size-nav-line-w);
  height : var(--size-nav-line-h);
  background : currentColor;          
  transition : width var(--dur-base) ease;
}
.page-home .NavList a.active { color : var(--color-text); }
.page-home .NavList a.active::before { width : var(--size-nav-line-w-active); }
.page-home .NavList a:hover { color : var(--color-primary-hover); }
.page-home .NavList a:hover::before { width : var(--size-nav-line-w-active); }
.page-home .SocialList {
  display : flex;
  gap : 20px;               
  align-items : center;
  margin-top : 30px;        
}
.page-home .SocialList li a {
  color : var(--color-text);
  transition : color var(--dur-fast);
}
.page-home .SocialList li a:hover { color : var(--color-primary-hover); }
.page-home .SocialList svg {
  width : var(--size-icon);
  height : var(--size-icon);
}
.page-home .button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.page-home .button {
  color : var(--color-text);
  transition : color var(--dur-fast);
}
.page-home .button:hover { color : var(--color-primary-hover); }
.page-home .CategorySection {
  height : auto;
  width : auto;
  margin-bottom : var(--space-band-y);
  scroll-margin-top : var(--space-band-y);   
}
.page-home .CategoryTitle {              
  display : none;
}
.page-home .ArticleCard {
  cursor : pointer;
  display : flex;
  align-items : baseline;    
  column-gap : var(--space-cover-gap);   
  
  padding : var(--space-card-pad);
  margin-inline : calc(-1 * var(--space-card-pad));
  border-radius : 8px;       
  transition : background-color var(--dur-slow),
               opacity var(--dur-slow);
}
.page-home .ArticleCard:hover {
  background-color : var(--color-surface-hover);
}
.page-home .ArticleCard + .ArticleCard {
  margin-top : var(--space-card-gap);
}
.page-home .ArticleCover {               
  flex : 0 0 var(--size-cover-ratio);   
  min-width : 0;              
  font-size : var(--fs-cover);
  color : var(--color-text-secondary);
}
.page-home .ArticleCover img,
.page-home .ArticleCover video {
  display : block;
  width : auto;
  height : auto;
  max-width : 100%;           
  max-height : 100%;          
  object-fit : contain;       
  border-radius : 4px;        
}
.page-home .ArticleCover.HasMedia {
  align-self : stretch;
  display : flex;
  align-items : center;       
  justify-content : center;   
  padding : 8px;              
}
.page-home .ArticleBody {                
  flex : 1 1 auto;            
  min-width : 0;              
  margin-bottom : var(--space-block-gap);
}
.page-home .ArticleTitle {
  color : var(--color-text);
  font-size : var(--fs-title);
}
.page-home .ArticleTitle svg {           
  width : var(--size-title-icon);
  transform : translateX(-2px) translateY(4px);   
  transition : transform var(--dur-fast);
}
.page-home .ArticleCard:hover .ArticleTitle { color : var(--color-primary-hover); }
.page-home .ArticleCard:hover .ArticleTitle svg { transform : translateX(0) translateY(0); }
.page-home .ArticleSummary {
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
  margin-bottom : var(--space-block-gap);
}
.page-home .ArticleDate {
  font-size : var(--fs-caption);
  color : var(--color-text-secondary);
}
.page-home .ArticleTags {                
  color : var(--color-primary-hover);
  font-size : var(--fs-tag);
  background-color : var(--color-primary-soft);
  padding : 5px 8px;          
  margin : 5px 5px 0 0;       
  border-radius : 9999px;     
}
.page-home .CoverMedia {
  display : block;
  width : 100%;        
  height : auto;
  border-radius : 4px;
  object-fit : cover;
}
.page-home .ViewAll {
  margin-top : clamp(1px, 3vw, 30px);   
}
.page-home .ViewAll p {
  width : fit-content;        
  cursor : pointer;
  font-weight : bold;
  transition : color var(--dur-fast), transform var(--dur-fast);
}
.page-home .ViewAll p:hover {
  color : var(--color-primary-hover);
  transform : translateX(10px);   
}
.page-home .is-reveal-hidden {
  opacity : 0;
  transform : translateY(var(--reveal-offset));
}
.page-home .is-reveal-visible {
  animation : reveal-up 0.8s var(--ease-out) forwards;   
}
.page-home .is-reveal-done {
  opacity : 1;
}
@keyframes reveal-up{
  from {
    opacity : 0;
    transform : translateY(var(--reveal-offset));
  }
  to {
    opacity : 1;
    transform : translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
.page-home .is-reveal-hidden {
    opacity : 1;
    transform : none;
  }
.page-home .is-reveal-visible {
    animation : none;
  }


}
@media (max-width: 1000px){
.page-home .TwoColumn {
    grid-template-columns : 1fr;
  }
.page-home .Sidebar {
    position : static;
    height : auto;
  }
.page-home .SidebarIntro {
    min-height : var(--size-sidebar-min-h-narrow);
  }
.page-home .SidebarIntro div:nth-child(2) {
    display : none;
  }
.page-home .CategoryTitle {
    display : block;
    position : sticky;
    top : 0;
    margin-bottom : 3vh;      
    background-color : var(--color-bg-op);
    backdrop-filter : blur(var(--blur-sticky));
    z-index : 9999;           
  }
.page-home .CategoryTitle h1 {
    font-size : var(--fs-section-title);
  }
.page-home .ArticleCover {
    flex-grow : 0;
    flex-shrink : 0;
    flex-basis : clamp(100px, 28%, 160px);
  }
.page-home .ArticleCover img,
.page-home .ArticleCover video {
    max-width : 100%;
    max-height : none;
  }


}
@media (min-width: 1001px){
.page-home .CategorySection:hover .ArticleCard { opacity : .3; }
.page-home .CategorySection:hover .ArticleCard:hover { opacity : 1; }


}


.page-tag .title {
  padding-top : 10vh;
  height : auto;
  max-width : 2000px;
  margin : 0 auto;
  padding: 3vh;
  font-family: 'Picaflor';
}
.page-tag .title {
  font-size : clamp(40px, 3vw, 60px);
  margin : 10vh 0 2vh 0;
}
.page-tag .contentCenter {
  max-width : 2000px;
  margin : 0 auto;
}
.page-tag .contentUl {
  
  padding : 3vh clamp(20px, 8vw, 128px);
  display : grid;
  
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap : 4vh 2vw;              
  list-style : none;          
}
@media (max-width: 1100px){
.page-tag .contentUl { grid-template-columns: repeat(2, minmax(0, 1fr)); }


}
@media (max-width: 700px){
.page-tag .contentUl { grid-template-columns: minmax(0, 1fr); }


}
.page-tag .addContent {
  margin : var(--space-band-y) 0;
  display : flex;
  align-items : safe center;
  justify-content: center;
}
.page-tag .addContent button {
  border : none;
  background : transparent;
  padding : 0;
  color : inherit;            
  cursor : pointer;
}
.page-tag .addContent button:disabled {
  cursor : default;
  opacity : .45;              
}
.page-tag .addContent svg {
  display : block;
  width : 48px;
  height : 48px;
  transition: transform 0.4s ease, color 0.4s ease;
}
.page-tag .addContent button:hover:not(:disabled) svg {
  color : var(--color-primary-hover);
  transform: rotate(360deg);
}
.page-tag .ArticleRow {                 
  min-width : 0;              
  cursor : pointer;           
  border-radius : 8px;        
}
.page-tag .Cover {
  position : relative;        
  overflow : hidden;          
  border-radius : 4px;
  margin-bottom : 0.7em;
}
.page-tag .Cover::after {
  content : '';
  position : absolute;
  inset : 0;
  border : 1px solid var(--color-primary-hover);
  border-radius : inherit;    
  opacity : 0;
  transition : opacity var(--dur-slow) ease;
  pointer-events : none;      
}
.page-tag .ArticleRow:hover .Cover::after {
  opacity : 1;
}
.page-tag .CoverMedia,
.page-tag .CoverText {
  width : 100%;
  aspect-ratio : 16 / 9;
}
.page-tag .CoverMedia {
  display : block;
  height : auto;
  object-fit : cover;
  transition : transform 0.8s ease;   
}
.page-tag .CoverText {
  display : flex;
  align-items : center;
  justify-content : center;
  text-align : center;
  padding : 0.4em;
  border-radius : 4px;
  background-color : var(--color-surface-hover); 
  font-size : clamp(10px, 1.6vh, 14px);
  letter-spacing : 0.08em;
  color : var(--color-text-secondary);
}
.page-tag .Summary {
  color : var(--color-text-secondary);
  font-size : clamp(11px, 1.8vh, 14px);
}
.page-tag .Date {
  color : var(--color-text-secondary);
  font-size : clamp(10px, 1.5vh, 12px);
}
.page-tag .ArticleRow:hover .CoverMedia {
  transform : scale(1.2);
}
.page-tag .is-reveal-hidden {
  opacity : 0;
  transform : translateY(var(--reveal-offset));
}
.page-tag .is-reveal-visible {
  animation : reveal-up 0.8s var(--ease-out) forwards;   
}
.page-tag .is-reveal-done {
  opacity : 1;
}
@keyframes reveal-up{
  from {
    opacity : 0;
    transform : translateY(var(--reveal-offset));
  }
  to {
    opacity : 1;
    transform : translateY(0);
  }
}



.page-content .ContentCoverStyle {
  margin-top : 10vh;
  position : relative;
  z-index : 999;
}
.page-content .ContentCover {
  display : block;
  width : 100%;
  height : 100vh;           
  object-fit : cover;
  border-radius : 6px;     
  margin-bottom : 3vh;    
}
@media (max-width : 1001px){
.page-content .ContentCover {
      height : 60vh; 
  }


}
.page-content .ContentPage {
  max-width : 1000px;         
  margin : 0 auto;
}
.page-content .Hint {
  margin-top : 3vh;
  color : var(--color-text-secondary);
}
.page-content .ContentTitle {
  max-width : 1000px;
  color : var(--color-text);
  margin : 0 auto;
  padding-bottom : 6vh;
  font-family: 'Picaflor', 'QuanHengDuLiang';
  font-size : clamp(22px, 4vh, 34px);
}
.page-content .ContentMeta {
  color : var(--color-text-secondary);
  font-size : clamp(4px, 3vw, 16px);
  font-family : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  
  margin:0 auto;
  width : 100%;
  max-width : 1000px;
  padding-bottom : 8vh;
}
.page-content .ContentBody p {
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
  line-height : 1.9;                  
  margin-bottom : 1.2em;
}
.page-content .ContentBody h2,
.page-content .ContentBody h3 {
  color : var(--color-text);
  font-size : var(--fs-title);
  margin : 2em 0 0.7em;
}
.page-content .ContentBody h2 {
  padding-bottom : 0.4em;
  border-bottom : 1px solid var(--color-border-subtle);
}
.page-content .ContentBody ul,
.page-content .ContentBody ol {
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
  line-height : 1.9;
  margin : 0 0 1.2em;
  padding-left : 1.4em;
}
.page-content .ContentBody ul { list-style : disc; }
.page-content .ContentBody ol { list-style : decimal; }
.page-content .ContentBody li { margin-bottom : 0.4em; }
.page-content .ContentBody a {
  color : var(--color-primary-hover);
  border-bottom : 1px solid transparent;
  transition : border-color var(--dur-fast);
}
.page-content .ContentBody a:hover { border-bottom-color : var(--color-primary-hover); }
.page-content .ContentBody code {
  font-family : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size : 0.9em;
  background-color : rgba(255, 255, 255, 0.06);   
  padding : 0.15em 0.4em;
  border-radius : 4px;
}
.page-content .ContentBody pre {
  background-color : rgba(255, 255, 255, 0.05);
  border : 1px solid var(--color-border-subtle);
  border-radius : 6px;
  padding : 1em 1.2em;
  margin : 0 0 1.4em;
  overflow-x : auto;                  
}
.page-content .ContentBody pre code {
  background-color : transparent;     
  padding : 0;
  font-size : 0.85em;
  line-height : 1.7;
}
.page-content .ContentBody blockquote {
  color : var(--color-text-secondary);
  border-left : 3px solid var(--color-primary-hover);
  padding-left : 1em;
  margin : 0 0 1.4em;
}
.page-content .ContentBody hr {
  border : none;
  border-top : 1px solid var(--color-border-subtle);
  margin : 2.4em 0;
}
.page-content .ContentBody table {
  width : 100%;
  border-collapse : collapse;
  margin : 0 0 1.4em;
  font-size : var(--fs-summary);
}
.page-content .ContentBody th,
.page-content .ContentBody td {
  border : 1px solid var(--color-border-subtle);
  padding : 0.5em 0.8em;
  text-align : left;
  color : var(--color-text-secondary);
}
.page-content .ContentBody th { color : var(--color-text); }
.page-content .ContentBody img { max-width : 100%; height : auto; }
@media (max-width : 1001px){
.page-content .ContentPage {
    padding-inline : 4vw;
  }
.page-content .ContentTitle {
    padding-inline : 4vw;
  }
.page-content .ContentMeta {
    margin:0;
    padding-inline : 4vw;
  }


}
.page-content .is-reveal-hidden {
  opacity : 0;
  transform : translateY(var(--reveal-offset));
}
.page-content .is-reveal-visible {
  animation : reveal-up 0.8s var(--ease-out) forwards;   
}
.page-content .is-reveal-done {
  opacity : 1;
}
@keyframes reveal-up{
  from {
    opacity : 0;
    transform : translateY(var(--reveal-offset));
  }
  to {
    opacity : 1;
    transform : translateY(0);
  }
}




  
  .navbar {
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 10vh;
    background-color : var(--color-bg);
    z-index : 900;
    transition : transform 0.5s ease;
  }
  .navbar-hide {                 
    transform : translateY(-100%);
  }

  
  .navbar-start-hide {
    transform : translateY(-100%);
    opacity : 0;
  }

  .scrollProgress {
    position : absolute;
    left : 0;
    bottom : 0;                     
    width : 100%;
    height : 2px;                   
    background-color : var(--color-primary-hover);
    transform-origin : left center;
    transform : scaleX(0);          
    will-change : transform;
  }

  .navbarContentStyle {
    display : grid;
    grid-template-columns : 1fr auto 1fr;
    align-items : center;
    width : 100%;
    max-width : 1280px;          
    height : 100%;
    padding : 0 3vw;             
    margin : 0 auto;
    transition : transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  }
  .navbarContentStyle > :first-child { justify-self : start; }
  .navbarContentStyle > :last-child  { justify-self : end; }

  .navbarContentHome {
    font-size : clamp(16px, 1.6vw, 26px);    
    font-family: 'Cormorant';
    font-weight : bold;
  }

  .navbarContentUl {
    display : flex;
    align-items : center;
    
    list-style : none;           
    margin : 0;
    padding : 0;
  }

  .navbarContentUl a {
    color : var(--color-text-secondary);
    font-size : clamp(12px, 0.9vw, 16px);    
  }

  .navbarContentSvg {
    width : clamp(20px, 3vw, 32px);
    aspect-ratio : 1;            
  }

  .navbarContentSvg svg {
    width : 100%;
    height : 100%;
  }

  .navbarContentSvg button {
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
  }

  .navbarContentLink {
    transition : color 0.5s ease;
  }

  .navbarContentLink:hover {
    color : var(--color-primary-hover);
  }

.searchBox {
  position : fixed;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  background-color: rgb(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top : clamp(48px, 12vh, 160px);   
}
.searchBox .content {
  position : relative;
  width : min(80vw, 1000px);
  aspect-ratio : 14/1;            
  min-height : 52px;
  background-color : #14111a;
  
  border : 1px solid rgba(180, 144, 240, 0.16);
  border-radius : 10px;
  
  box-shadow : 0 20px 50px rgba(0, 0, 0, 0.55);
  transition : border-color var(--dur-fast) ease,
               background-color var(--dur-fast) ease;
}
.searchBox .content:hover {
  border-color : rgba(180, 144, 240, 0.34);
}
.searchBox .content:focus-within {
  border-color : var(--color-primary-hover);
  background-color : #191521;
}
.searchBox input {
  width : 100%;
  height : 100%;
  outline : none;
  background-color : transparent;
  border : none;
  padding : 0 1.4em;                              
  color : var(--color-text);                      
  font-size : clamp(8px, 3vw, 18px);
  letter-spacing : 0.01em;
  caret-color : var(--color-primary-hover);
}
.searchBox input::placeholder {
  color : var(--color-text-secondary);
  font-size: clamp(8px, 3vw,14px);
  transition : color var(--dur-fast) ease;
}
.searchBox input:hover::placeholder {
  color : #c9c9d6;
}
.searchBox input:focus::placeholder {
  color : #7e7e8e;
}
.searchBox input::selection {
  color : var(--color-bg);
  background-color : var(--color-primary-hover);
}
.searchBox .notFoundArticle {
  position : absolute;
  top : 0;
  right : 1.4em;                 
  height : 100%;
  
  display : flex;
  align-items : center;
  margin : 0;                    
  color : var(--color-text-secondary);
  font-size : clamp(8px, 3vw, 14px);              
  font-weight : 400;             
  letter-spacing : 0.02em;
  pointer-events : none;         
}
.searchBox .articles {
  position : absolute;
  width : 100%;
  max-height : clamp(80px, 30vh, 400px);
  top : 100%;
  left : 0;
  overflow-y: auto;

  scrollbar-width : thin;                                    
  scrollbar-color : var(--color-primary-hover) transparent;  
}
.searchBox .articles ul {
  width : 100%;
  display : grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap : 8px;
}
.searchBox .articlesLi {
  display : flex;
  align-items : baseline;                
  column-gap : var(--space-cover-gap);   
  padding : var(--space-card-pad);       
  border-radius : 8px;
  cursor : pointer;
  transition : background-color var(--dur-slow), opacity var(--dur-slow);
  background-color : rgb(8, 8, 11, 0.9);
}
.searchBox .articlesLi:hover {
  background-color : var(--color-surface-hover);
}
.searchBox .articlesLi .Cover {
  flex : 0 0 var(--size-cover-ratio);
  min-width : 0;                 
  align-self : stretch;          
  display : flex;
  align-items : center;          
  justify-content : center;      
  padding : 8px;
  font-size : var(--fs-cover);   
  color : var(--color-text-secondary);
}
.searchBox .articlesLi .CoverText {
  align-self : flex-start;
  margin-right : auto;
  letter-spacing : 0.06em;
}
.searchBox .articlesLi .CoverMedia {
  display : block;
  width : auto;
  height : auto;
  max-width : 100%;
  max-height : 100%;
  object-fit : contain;
  border-radius : 4px;
}
.searchBox .articlesLi .Body {
  flex : 1 1 auto;
  min-width : 0;                         
  margin-bottom : var(--space-block-gap);
}
.searchBox .articlesLi h3 {
  color : var(--color-text);
  font-size : var(--fs-title);
  transition : color var(--dur-fast) ease;
}
.searchBox .articlesLi:hover h3 {
  color : var(--color-primary-hover);
}
.searchBox .articlesLi .Summary {
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
  margin-bottom : var(--space-block-gap);
}
.searchBox .articlesLi .Date {
  font-size : var(--fs-caption);
  color : var(--color-text-secondary);
}
.searchBox .articlesLi .Tag {
  display : inline-block;          
  color : var(--color-primary-hover);
  font-size : var(--fs-tag);
  background-color : var(--color-primary-soft);
  padding : 3px 8px;
  margin : 6px 6px 0 0;            
  border-radius : 9999px;          
  white-space : nowrap;            
}
.searchBox .articles::-webkit-scrollbar {
  width : 6px;
}
.searchBox .articles::-webkit-scrollbar-track {
  background : transparent;     
}
.searchBox .articles::-webkit-scrollbar-thumb {
  background-color : var(--color-primary-hover);
  border-radius : 9999px;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(24px);
}
.fade-enter-active {
  transition: all 0.55s cubic-bezier(0.21, 1.62, 0.4, 1);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.fade-leave-active {
  transition: all 0.22s ease-in;
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(12px);
}
.fadeText-enter-from {
  opacity: 0;
}
.fadeText-enter-active {
  transition: opacity 0.5s ease;
}
.fadeText-enter-to {
  opacity: 1;
}
.fadeText-leave-from {
  opacity: 1;
}
.fadeText-leave-active {
  transition: opacity 0.3s ease;
}
.fadeText-leave-to {
  opacity: 0;
}
.article-item-enter-from {
  opacity: 0;
  transform: translateY(8px);
}
.article-item-enter-active {
  transition: all 0.3s ease;
}
.article-item-leave-to {
  opacity:0;
  transform: translateY(-8px);
}
.article-item-leave-active {
  transition: all 0.2s ease;
}


.linksBox {
  position : fixed;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  background-color: rgb(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  align-items : safe center;
  justify-content: center;
  padding : 4vh 0;
}
.linksBox .content { min-height : 360px; }
.linksBox .content {
  position : relative;
  width : min(92vw, 880px);
  max-height : 100%;
  display : flex;
  flex-direction : column;
  background-color : #14111a;
  border : 1px solid rgba(180, 144, 240, 0.16);
  border-radius : 10px;
  box-shadow : 0 20px 50px rgba(0, 0, 0, 0.55);
}
.linksBox .panelLabel {
  position : absolute;
  top : 0;
  left : 22px;
  transform : translateY(-50%);
  margin : 0;
  padding : 0 12px;
  color : var(--color-text);
  font-size : 24px;              
  letter-spacing : 0.14em;
  font-weight: bold;
  z-index : 100;
}
.linksBox .hint {
  margin : 0;
  padding : 30px 20px;
  text-align : center;
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
}
.linksBox .links {
  width : 100%;
  min-height : 0;
  display : grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap : var(--space-card-gap);
  padding : 24px 18px 18px;      
  overflow-y : auto;
  border-radius : 9px;
  scrollbar-width : thin;
  scrollbar-color : var(--color-primary-hover) transparent;
}
.linksBox .linksCard {
  display : flex;
  align-items : baseline;                 
  column-gap : var(--space-cover-gap);    
  padding : var(--space-card-pad);
  border-radius : 8px;
  cursor : pointer;
  background-color : rgb(8, 8, 11, 0.6);  
  transition : background-color var(--dur-slow), opacity var(--dur-slow);
}
.linksBox .linksCard:hover {
  background-color : var(--color-surface-hover);
}
.linksBox .linksCard:focus-visible {
  outline : 1px solid var(--color-primary-hover);
  outline-offset : 2px;
}
.linksBox .linksAvatar {
  flex : 0 0 var(--size-cover-ratio);
  min-width : 0;
  align-self : stretch;
  display : flex;
  align-items : center;       
  justify-content : center;   
  padding : 6px;
}
.linksBox .linksAvatar img {
  display : block;
  width : 100%;
  max-width : 88px;
  aspect-ratio : 1;
  object-fit : contain;
  padding : 9px;
  border-radius : 10px;
  background-color : rgba(240, 240, 244, 0.92);
}
.linksBox .linksTextAvatar {
  display : flex;
  align-items : center;
  justify-content : center;
  width : 100%;
  max-width : 88px;
  aspect-ratio : 1;
  border-radius : 9999px;
  background-color : var(--color-primary-soft);
  color : var(--color-primary-hover);
  font-size : var(--fs-title);
  font-weight : 600;
}
.linksBox .LinksContent {
  flex : 1 1 auto;
  min-width : 0;                 
}
.linksBox .LinkTitle {
  color : var(--color-text);
  font-size : var(--fs-title);
}
.linksBox .LinkTitle svg {
  width : var(--size-title-icon);
  transform : translateX(-2px) translateY(4px);
  transition : transform var(--dur-fast);
}
.linksBox .linksCard:hover .LinkTitle { color : var(--color-primary-hover); }
.linksBox .linksCard:hover .LinkTitle svg { transform : translateX(0) translateY(0); }
.linksBox .LinkDetails {
  color : var(--color-text-secondary);
  font-size : var(--fs-summary);
  margin-top : var(--space-block-gap);
}
.linksBox .LinkHost {
  margin-top : var(--space-block-gap);
  color : var(--color-text-secondary);
  font-size : var(--fs-caption);
  font-family : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity : .75;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(24px);
}
.fade-enter-active {
  transition: all 0.55s cubic-bezier(0.21, 1.62, 0.4, 1);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.fade-leave-active {
  transition: all 0.22s ease-in;
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(12px);
}





/* ================= 静态站补充 ================= */
html { scroll-padding-top: 5rem; }
body { min-height: 100vh; }
body.modal-open { overflow: hidden; }

.searchBox, .linksBox { animation: static-modal-in .18s ease-out; }
@keyframes static-modal-in { from { opacity: 0; } to { opacity: 1; } }

.ArticleCard, .ArticleRow, .linksCard { cursor: pointer; }

/* 静态站：hidden 属性要压过组件的 display:flex */
[hidden] { display: none !important; }


/* ================= 首页 ABOUT：纯静态文字块 ================= */
.page-home .AboutStatic {
  max-width : 62ch;
  color : var(--color-text-secondary);
  font-size : var(--fs-intro);
  line-height : 1.9;
  margin-bottom : var(--space-card-gap);
}
.page-home .AboutStatic p + p { margin-top : 0.6em; }