:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  --max-width: 900px;
  --padding-width: 80px;
  
  --nav-height: 55px;
  --nav-height-space: calc(var(--nav-height) + env(safe-area-inset-top) + 5px);
  
  --en-font:  ui-monospace, 'Roboto Mono', sans-serif;
  /* --zh-font: '楷体-简-粗体', 'STKaiti', 'KaiTi', '楷体', serif, --apple-system; */
}
@media screen and (max-width: 768px) {
  :root {
    --padding-width: 20px;
    --nav-height-space: calc(var(--nav-height) + var(--floating-bottom-gap) + 5px);
    --floating-bottom-gap: calc(5px + env(safe-area-inset-bottom));
  }
}

/* 默认：白天模式变量 */
:root {
  --bg-color: #ffffff;
  --bg-color-active: #f0f0f0;
  --text-color: #333333;
  --link-color: #2a6496;
  --link-hover-color: #16426d;
  --border-color: #d0d0d0;

}
/* 自动检测：黑夜模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a; 
    --bg-color-active: #2d2d2d;
    --text-color: #e0e0e0;
    --link-color: #79c0ff; 
    --link-hover-color: #a5d6ff;
    --border-color: #333333;

  }
}

:root {
  --bezier: cubic-bezier(0.16, 1, 0.3, 1); /* 定义一个复合变量作为模板 */
  --width-transform: width 0.5s var(--bezier), transform 0.5s var(--bezier);
  --appear-or-dis: opacity 0.2s ease-out;
}

.hidden {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* 设置平滑滚动，并防止导航栏遮挡标题 */
  scroll-padding-top: calc(var(--nav-height) + 20px); /* 大于导航栏高度 */
}
@media screen and (max-width: 768px) {
  html {
    scroll-padding-top: 20px; /* 大于导航栏高度 */
  }
}

/* 全局基础设置 */
body {
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--en-font);
  line-height: 1.4;
  /* 如果单行文字太长折行了，这是折行间距 */
  font-size: 16px;
}

/* 统一应用到所有链接 */
a {
  color: var(--link-color);
  transition: color 0.2s ease;
  text-decoration: none;
}
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;

  color: var(--link-color);
  transition: color 0.2s ease;
  text-decoration: none;

  appearance: none;
  -webkit-appearance: none;
}
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 0px;
  border-radius: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

pre {
  margin: 0px;
}

code::selection {
  background-color: var(--bg-color-active);
}

details::details-content {
  overflow: hidden; /* 极度重要！保证 JS 在算高度动画时，多余的内容会被切掉 */
}

footer {
  font-size: 0.9rem;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  ul {
    padding-left: 20px;
    margin-left: 0; 
    list-style-position: outside;
    list-style-type: circle;
  }
}

/* --------------------------- overlay --------------------------- */
@media screen and (max-width: 768px) {
  .overlay {
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    -webkit-tap-highlight-color: transparent
  }
  /* 第一个弟弟 */
  .overlay-toggle:checked + .overlay {
    visibility: visible;
  }
}