:root{
  /* Modern academic color palette */
  --bg:#ffffff;
  --bg-secondary:#ffffff;
  --text:#1a202c;
  --text-secondary:#4a5568;
  --muted:#718096;
  --line:#e2e8f0;
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --border-radius:8px;
  --maxw:1000px;

  /* 使用说明：
     现在所有字体大小都使用rem单位，可以通过修改html的font-size来调整整个网站字体大小
     示例：
     - html { font-size: 16px; } - 默认大小
     - html { font-size: 18px; } - 增大字体
     - html { font-size: 14px; } - 减小字体
     - html { font-size: 100%; } - 使用用户浏览器默认字体大小
  */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
html{
  font-size: 20px; /* 基准字体大小，可以修改此值来调整整个网站字体大小 */
}

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Import Google Fonts for academic feel */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Academic typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin-top: 0;
  text-align: left;
}

p, li {
  color: var(--text-secondary);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{
  color:var(--accent);
  text-decoration:none;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
a:hover{
  color:var(--accent-hover);
  text-decoration:none;
  box-shadow: inset 0 -1.5px 0 0 currentColor;
}

/* Header */
.site-header{
  border-bottom: 1px solid var(--line);
  background:var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.logo{
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
}
.mobile-menu-toggle{
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  gap: 4px;
  position: relative;
  z-index: 101;
}
.mobile-menu-toggle span{
  width: 24px;
  height: 3px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.mobile-menu-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(4px, 4px);
}
.mobile-menu-toggle.active span:nth-child(2){
  opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(6px, -6px);
}
.topnav{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  font-size:0.875rem;
  font-weight: 500;
}
.topnav a{
  color:var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  transition: all 0.2s ease;
  box-shadow: inset 0 -0px 0 transparent;
  white-space: nowrap;
}
.topnav a:hover{
  color: var(--accent);
  background: rgba(37,99,235,0.12);
}
.topnav a.active{
  color: var(--accent);
  background: rgba(37,99,235,0.16);
}
.skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;margin:8px}

/* Title block */
.title-block{
  padding:24px 0 8px;
  text-align: left;
  position: relative;
  margin-bottom: 8px;
}
.title-block::before{ display:none; }
.title{
  font-weight:700;
  margin:8px 0 8px;
  font-size: clamp(1.625rem, 3.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.authors{
  font-size: 1rem;
  font-weight: 500;
  margin: 6px 0 4px;
  color: var(--text-secondary);
  text-align: justify;
  text-justify: inter-word;
}
.aff{
  font-size: 0.875rem;
  margin: 4px 0 10px;
  color: var(--muted);
  text-align: justify;
  text-justify: inter-word;
}
.meta{
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 12px;
  text-align: justify;
  text-justify: inter-word;
}
.links{
  margin:16px 0 0;
  font-size: 1rem;
}
.links a{
  white-space:nowrap;
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 8px 14px;
  background: transparent;
  color: var(--text) !important;
  border-radius: 9999px;
  border:1px solid var(--line);
  transition: all 0.2s ease;
}
.links a:hover{
  color: var(--accent) !important;
  border-color: var(--accent);
  background: rgba(0,0,0,0.03);
  box-shadow: none;
}

/* Figures */
.figure{
  margin:24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 6px;
}
.caption{
  font-size:0.875rem;
  color:var(--muted);
  text-align: center;
  text-justify: inter-word;
}

/* Make figure anchors scroll below sticky header and highlight when targeted */
.figure{ scroll-margin-top: 96px; }
.figure.is-target,
.figure:target{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Inline cross-reference styling: Fig./Table N */
.xref{
  color: var(--accent);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.xref:hover{
  color: var(--accent-hover);
  box-shadow: inset 0 -2px 0 0 currentColor;
}
.xref-label{ font-variant-caps: small-caps; letter-spacing: 0.02em; }
.xref-num{ font-weight: 600; }

/* Sections */
section{
  padding:20px 0;
  margin-bottom: 8px;
}
h2{
  font-weight:700;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  margin:20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
h3{
  font-weight:600;
  font-size: 1.25rem;
  margin:24px 0 16px;
  color: var(--text);
}
hr{
  border:none;
  border-top:1px solid var(--line);
  margin:32px 0;
}

/* Notes */
.note{
  border-left:4px solid var(--line);
  padding:12px 16px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size:0.9375rem;
  margin: 16px 0;
  color: var(--text-secondary);
  text-align: justify;
  text-justify: inter-word;
}
.note.small{
  font-size: 0.875rem;
  padding: 12px 16px;
  text-align: justify;
  text-justify: inter-word;
}

/* Tables */
.table-block{
  margin:16px 0 24px;
}
.table-title{
  font-weight:600;
  margin:0 0 8px;
  font-size: 1.125rem;
  color: var(--text);
  text-align: left;
}
.table-booktabs{
  width:100%;
  border-collapse:collapse;
  font-size:0.9375rem;
}
.table-booktabs thead th{
  font-weight:600;
  text-align:left;
  padding:12px 8px;
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.table-booktabs tbody td{
  padding:10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  text-align: justify;
  text-justify: inter-word;
}
.table-booktabs tbody tr:hover{
  background: rgba(0,0,0,0.02);
}
.table-booktabs tbody tr:last-child td{
  border-bottom: none;
}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top: 16px;
}
@media (max-width: 820px){
  .two-col{grid-template-columns:1fr}
}

/* Code block (BibTeX) */
.code{
  background:#f8fafc;
  border:1px solid var(--line);
  padding:16px;
  border-radius:6px;
  overflow:auto;
  font-size:0.875rem;
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  line-height: 1.6;
  margin: 12px 0;
  text-align: left;
}
.code:hover{
  border-color: var(--accent);
}

/* Citation card */
.cite-card{
  background: var(--bg-secondary);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 12px 8px;
}
.cite-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cite-select{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  background: white;
  color: var(--text);
}
.icon-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Copy button */
.copy-btn{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.copy-btn:hover{
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,0,0,0.03);
}

/* List styling */
ul, ol{
  margin: 16px 0;
  padding-left: 24px;
}
li{
  margin: 8px 0;
  line-height: 1.6;
}

/* Strong text */
strong{
  color: var(--text);
  font-weight: 600;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:32px 0;
  color:var(--muted);
  font-size:0.9375rem;
  text-align: center;
  background: var(--bg-secondary);
  margin-top: 48px;
}

/* Left Table of Contents */
.toc{
  position: fixed;
  top: 110px;
  left: 16px;
  width: 220px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow);
  display: none;
}
.toc h3{
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.toc ul{ list-style: none; padding: 0; margin: 8px 0 0; }
.toc li{ margin: 2px 0; }
.toc a{
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 10px;
  transition: all .15s ease;
}
.toc a:hover{
  color: var(--accent);
  background: #f2f4f8;
  box-shadow: none;
}
.toc a.active{
  color: var(--accent);
  background: #eef2ff;
}

@media (min-width: 1360px){
  .toc{ display: block; }
}

/* Mobile Navigation */
@media (max-width: 768px){
  .mobile-menu-toggle{
    display: flex;
  }
  
  .topnav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    gap: 0;
    padding: 72px 0 16px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  
  .topnav.show{
    transform: translateY(0);
  }
  
  .topnav a{
    display: block;
    padding: 16px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
    text-align: left;
    font-size: 1rem;
  }
  
  .topnav a:last-child{
    border-bottom: none;
  }
  
  .topnav a:hover,
  .topnav a.active{
    background: rgba(37,99,235,0.08);
  }
}

/* General Mobile Improvements */
@media (max-width: 768px){
  .container{
    padding: 0 16px;
    margin-left: 0;
  }

  .title-block{
    padding: 24px 0 0 0;
    margin-bottom: 6px;
  }

  .title{
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.2;
    margin: 8px 0 12px;
  }

  .authors{
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .aff, .meta{
    font-size: 0.8125rem;
  }

  .links{
    margin: 12px 0 0;
  }
  
  .links a{
    display: block;
    margin: 8px 0;
    text-align: center;
    padding: 12px 16px;
    font-size: 0.9375rem;
  }

  section{
    padding: 20px 0 0 0;
    margin-bottom: 4px;
  }

  h2{
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    margin: 16px 0 12px;
  }

  h3{
    font-size: 1rem;
    margin: 16px 0 12px;
  }

  p, li{
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .figure{
    margin: 16px 0;
  }
  
  .caption{
    font-size: 0.8125rem;
    margin-top: 6px;
  }

  .table-block{
    margin: 12px 0 16px;
  }
  
  .table-booktabs{
    font-size: 0.75rem;
    width: 100%;
  }

  .table-booktabs th,
  .table-booktabs td{
    padding: 8px 4px;
    font-size: 0.6875rem;
  }

  .table-booktabs th{
    font-size: 0.75rem;
  }
  
  .two-col{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .code{
    font-size: 0.75rem;
    padding: 12px;
    overflow-x: auto;
  }

  .cite-card{
    margin: 0;
  }

  .note{
    margin: 12px -8px;
    padding: 12px 16px;
    font-size: 0.875rem;
  }
  
  .back-to-top{
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  
  .back-to-top::before{
    width: 12px;
    height: 12px;
    border-width: 2.5px;
  }
}

/* Smooth scrolling for anchor links */
html{
  scroll-behavior: smooth;
}

/* Ensure headings are not hidden under sticky header on anchor jump */
section{ scroll-margin-top: 96px; }

/* Selection styling */
::selection{
  background: rgba(37, 99, 235, 0.2);
  color: var(--text);
}

/* Back to top */
.back-to-top{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--accent);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.back-to-top.show{ display: inline-flex; }
.back-to-top:hover{ background: var(--accent-hover); }
.back-to-top::before{
  content:"";
  width: 14px; height: 14px;
  border: 3px solid #fff;
  border-left: 0; border-bottom: 0;
  transform: rotate(-45deg) translateY(2px) translateX(-2px);
}

/* Focus styling for accessibility */
*:focus{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove blue outline for navigation links and interactive elements */
.topnav a:focus,
.toc a:focus,
.copy-btn:focus,
.cite-select:focus,
.mobile-menu-toggle:focus{
  outline: none;
}

/* Print styles */
@media print{
  .site-header,
  .skip,
  .copy-btn{
    display: none !important;
  }

  body{
    background: white;
    color: black;
  }

  .container{
    max-width: none;
    padding: 0;
  }
}