@font-face {
    font-family: "JetBrains Mono";
    src: local('JetBrains Mono'), url("/_assets/fonts/JetBrainsMono-Regular.woff2") format('woff2');
}

*{
  box-sizing: border-box;
}

.hidden{
  display: none !important;
}

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

html {
  font-feature-settings: "kern", "liga";
  font-family: 微软雅黑,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  /* font-size: 1rem; */
  color: #52525b;
}

body {
  margin: 0;  
  height: 100vh;
  line-height: 1.25rem;
  
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap:2rem;
  
  -webkit-text-size-adjust: 100%;  /* 否则苹果手机浏览器会自动缩放字体，导致代码特别大 */  
}

.rounded-img {
  /* 
  width: 100px;          
  height: 100px; 
  */
  border-radius: 50%;    /* 关键：50% = 圆形 */
  object-fit: cover;     /* 保持图片比例并填满容器 */
  object-position: center; /* 居中裁剪 */
}

pre {
    overflow: auto;
    /* width: 100%; */
    box-sizing: border-box;
    line-height: 1.5;
}

a {
    color: #575151;
    text-decoration: none;
}


img{
  max-width: 100%;
}

table {
  border-collapse: collapse; /* 关键：合并边框 */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

tbody tr:hover {
  background-color: #f9f9f9;
}

table.hljs-ln th, table.hljs-ln td {
  border: none;
}


/* 顶部导航栏 - 样式 */
nav {
  background-color: #e0f2fe;
  padding: 0.5rem 1rem;
  display: flex;  
  gap: 4rem;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  user-select: none;
}

nav .logo-area{
  display: flex; 
  gap: 1rem;
  font-size: 1.1rem;
  align-items: center;
}


nav .site-name{
  min-width: 80px;
}

nav .logo-area a{
  color:#3174a8 !important;
}

#nav-topics { 
  /* max-width: 1800px; */
  display: flex;
  /* flex: 8 0 auto; */
  gap: 2rem;
  justify-content: start;
  min-width: 900px;
  font-size: .9rem;
}

.menu-icon {
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}






/* 主体内容区（包括左侧菜单栏、文档主体内容、右侧目录） - 样式 */

main{
  align-items: start; /* 保证 左侧菜单 和 TOC 的 position: sticky 有效 */
  
  display: flex;
  justify-content:center;
  gap: 2rem;
  overflow-wrap: break-word;
}   







/* 左侧菜单栏 - 样式 */

#left-side-bar {
  /* flex : 1 0 200px; */
  max-width: 320px;
  position: sticky;
  top: 0rem;
  /* border-right: 1px solid #e7e5e4; */
  font-size: .94rem;
  padding: 0 0 1rem 1rem;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
}

#left-menu-container {
  height: 100%;
  /* background-color: #f9fafb; */
}


/* 左侧导航菜单的基本样式 */
.left-menu {
  list-style-type: none;
  padding-left: 0;
  width: 250px;
  font-family: sans-serif;
}

/* 菜单项和文件夹的通用样式 */
.left-menu li {
  padding: 1px 0;
}

/* 文件夹标题的样式 */
.left-menu .folder {
  color: #1d739a;
  cursor: pointer;
  /* font-weight: bold; */
  display: block;
  padding: 8px 15px;
  position: relative;
}

/* 使用 ::before 伪元素创建展开/折叠的图标 */
.left-menu .folder::before {
  content: '';   
  position: absolute;
  left: -.2rem;
  top: 50%;
  width: 1em;
  height: 1em;

  /* 核心：使用 Mask 技术 */
  /* 指定图标的颜色，可以随意更改 */
  background-color: teal; 
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  /* 为了浏览器兼容性 */
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;

  /* 设置旋转动画的中心点和初始状态 */
  transform: translateY(-50%) rotate(-90deg); /* 折叠状态，箭头指向右边 */
  transition: transform 0.2s ease-in-out;
}

/* 展开状态下文件夹标题的样式 */
.left-menu li.expanded > .folder::before {
  transform: translateY(-50%) rotate(0deg); /* 展开状态，箭头朝下 */
}

/* 子菜单的样式，实现缩进 */
.left-menu ul {
  list-style-type: none;
  padding-left: 20px;
}

/* 折叠状态下隐藏子菜单 */
.left-menu li.collapsed > ul {
  display: none;
}

/* 展开状态下显示子菜单 */
.left-menu li.expanded > ul {
  display: block;
}

/* 菜单链接的样式 */
.left-menu a {
  text-decoration: none;
  color: #5b5a5a;
  display: block;
  padding: 4px 10px;
  border-radius: 4px;
}

/* 鼠标悬停在链接上时的样式 */
.left-menu a:hover {
  background-color: #f0f0f0;
}

/* 当前活动页面链接的高亮样式 */
.left-menu li.active > a {
  color: #e27c19;
  /* font-weight: bold; */
}







/* 文档主体内容 - 样式 */
#main-content { 
  flex : 6 0 auto;  
  max-width: 1000px;
  min-width: 500px;
  width: 0; /*强制初始宽度为 0，完全依赖flex属性分配空间; 如果没有这个，pre code 宽度会被长行 撑的很宽*/
  line-height: 1.6;
}

#main-content a {
    color: #e67208;
}


#main-content h1 {
    color: #3f6ec6;
    text-align: center;
    font-weight: 300;
    font-size: 1.9rem;
    letter-spacing: -.01em;
    margin: 0;
}

#main-content h2 {
    color: #a94b54;
    padding: 0.8rem 0;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: -.01em;
    border-bottom: 1px #e7e7e7 solid;
    /* background: linear-gradient(to right, #fdf9f1 10%, #fff5e7 25%, #fcf0df 50%, #fff0da 75%, #fff3de 100%); */
}

#main-content h3 {
    color: #3d6a92;
    padding: 0.5rem 0;
    font-weight: 300;
    font-size: 1.4rem;
    border-bottom: 1px #e7e7e7 solid;
}

/* 标题右边的 #链接 */
.heading-anchor{
  margin-left: 8px;
  text-decoration: none;
  font-size: .8em;
  padding: 0 .8rem;
}

code {
    font-family: "JetBrains Mono", "Roboto Mono", SFMono-Regular, Consola;
}

code:not([class]) {
    color:#2d84ac;
}


pre code.hljs {
    display: block;    
    /* padding: 1em; */    
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 10px;        
    overflow: auto;
    font-size: .94rem;  
}


.hljs-comment{
    color: #00000061 !important;
}

table.hljs-ln{ 
    width: 100%;
}



td.hljs-ln-line.hljs-ln-numbers {
    color: #9a9a97;
    margin-right: .8rem;
    border-right: 1px #c4d8ea solid;
    /* display: inline-block; */
    padding-right: .6rem;
    width: 1rem;
}

td.hljs-ln-line.hljs-ln-code {
    padding-left: 1rem;
}

/* 代码行高亮 */
pre>code .bg-highlight {
    background: #e3eeff;
    border-left: 2px solid #2196F3;
}

.code-block-copy-btn{
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    border-radius: 4px;
    padding: 6px 8px 2px 8px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.4s;
    z-index: 10;
}

.code-block-copy-btn:hover{
    opacity: 1;
}

.code-block-copy-btn svg {
    width: 1rem;
    fill: #0e9dde;
}


/* 目录 - 样式 */
#table-of-contents {
  /* flex : 1 0 200px; */
  width: 320px;
  position: sticky;
  top: 0;
  color: #657487;
  line-height: 1.6;  
  padding: 0 1rem;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

#table-of-contents .toc-header {
  /* text-align: center; */
  color: #b77178;
  padding: 0 0 0.5rem 1.1rem;
  font-weight: 350;
  border-bottom: 1px #e7e7e7 solid;
  font-size: 1.1rem;
  cursor: pointer;
}


#table-of-contents ul {
  color: #828585;
  font-weight: 350;
  font-size: .9rem;
  /* text-align: center;   */
  /* font-family: fangsong; */
}




/* 底部 上下页 */
#footer-pre-next-page{
  display: flex;
  justify-content: space-evenly;
  overflow: auto;
  padding: 1rem;
  background-color: #fffdec;
}

#footer-pre-next-page a{ 
  padding: 1rem;
}

#footer-pre-next-page a:hover{ 
  color:#2196F3
}

/* 底部（版权，联系方式） - 样式 */
#footer-copyright {
  background-color: #f5f5f4;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: .9rem;
}

#footer-copyright > * {
    padding: .5rem;
}

.pre-page, .next-page{ 
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* 移动端样式 */
@media all and (max-width: 720px) {

    /* 1. 基础样式：默认隐藏 + 允许离散过渡 */
    .mobile-hide{
      display: none;/* 默认隐藏 */
      opacity: 0;
      
      /* 定义过渡：包含 opacity、transform，且允许 display 离散过渡 */
      /* transform: translateY(0.8);  */
      transition: 
        display 1s ease,
        opacity 1s ease,
        transform 1s ease;
      transition-behavior: allow-discrete; /* 关键：允许 display 触发动画 */
    }
    
    
    /* 2. 定义“显示时”的起始样式（滑入的初始状态） */
    @starting-style {
        .mobile-hide.show {
            opacity: 0;/* 开始时透明 */
            transform: translateY(20px); /* 开始时向下偏移 20px */
        }
    }


    /* 3. 显示状态的样式 */
    .mobile-hide.show{
        display: block; /* 切换为可见 */
        opacity: 1;  /* 结束时不透明 */
        transform: translateY(0); /* 结束时回到原位 */
    }


    .mobile-only{
      display: default;
    }

    .pc-only{
      display: none !important;
    }

    
    html{
      font-size: .95rem;
    }

    /* body{
    grid-template-rows: 1fr auto;
    } */

    nav{
      /* position: fixed; */
      
      justify-content: space-around;
      width: 100%;
      z-index: 100;
      box-sizing: border-box;
    }

    main{
      display: flex;
      flex-direction: column;
    /* margin-top: 3.2rem; */
    }


    #left-side-bar{
      background-color: #f3faff;
      position: fixed;
      max-width: 100%;
      width: 100%;
      z-index: 50;  
      border: 1px dashed #d6938e;
      padding: 2rem 0 1rem 1rem;

      /* 过渡属性：包括 opacity 和 transform，支持离散属性 */
      transition: opacity 0.5s ease, transform 0.5s ease;
      transition-behavior: allow-discrete;  /* 关键：允许 display 等离散属性过渡 */

      /* 默认可见状态 */
      opacity: 1;
      transform: translateY(0);
      /* padding: 20px;
      width: 200px; */
    }



    .left-menu {
      width: auto;    
    }

    #main-content{
      width: 100vw;
      min-width: auto;
      padding: 0 0.8rem;
      box-sizing: border-box;
    }

    

    #table-of-contents{
      position: fixed;
      max-width: 100%;      
      width: 100vw;
      z-index: 50;        
      background-color: #fffbf5;
      border: 1px dashed #d6938e;
      padding-top: 3.5rem;
    }



    /* .timeline-step{
    gap: 1rem;
    } */

    #back-to-top {
      position: fixed;
      bottom: 80px;
      right: 20px;
      background-color: rgba(0, 0, 0, 0.2);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      text-decoration: none;
      font-size: 1.5rem;
      display: none; /* Initially hidden */
    }

    #footer-pre-next-page {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
    

    #footer-copyright {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
}

@media all and (min-width: 720px) {

    .mobile-only{
      display: none;
    }

}





/* 提示块 - 样式 */
.admonition{
    background-color: var(--md-admonition-bg-color);
    border: .075rem solid #448aff;
    border-radius: .2rem;
    box-shadow: var(--md-shadow-z1);
    color: var(--md-admonition-fg-color);
    display: flow-root;
    font-size: .96rem;
    padding: 0 .6rem;
    margin: 1.5rem 0;
    page-break-inside: avoid;
    transition: box-shadow 125ms;
}

.admonition-title {
    background-color: #448aff1a;
    padding: .4rem;
    margin: 0 -.6rem;
}


/* 多标签块 - 样式 */
.tabbed-set {
    border: 1px solid #ded9d9;
}

.tabbed-labels { 
  display: flex;
  gap: .5rem;
  /* border-bottom: 1px solid #ded9d9; */    
  background-color: #f1f5fc1a;
  font-size: .9rem;
  font-weight: bold;
}

.tabbed-labels > label { 
    padding: .5rem;
    cursor: pointer;
    /* border-right: 1px solid #458ece; */
}

.tabbed-labels > label.selected { 
  border-bottom: 2px solid #488dc4;
}


.tabbed-body {
    border-top:1px dotted #e7dede;
    padding: .5rem;
}

.tabbed-body pre {
    margin: 0;
}