:root {
      --bg: #fafafa;
      --text: #4a4a4a;
      --link: #0077ff;
      --link-hover: #002f5a;
      --muted: #bdbdbd;
      --max-width: 720px;
      --gap: 12px;
      --font-sans: "LXGW WenKai Screen R", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    
    html, body {
      height: 100%;
      margin: 0;
      background: var(--bg);
      font-family: var(--font-sans);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: var(--text);
    }

    /* 居中容器 */
    .center-wrap {
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      box-sizing: border-box;
    }

    .card { 
      width: 100%; 
      max-width: var(--max-width); 
      text-align: left; 
      line-height: 1.65; 
    }

    /* 标题样式 - 修复字母g被遮挡的问题 */
    h1 {
      margin: 0 0 18px 0;
      font-size: 30px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: var(--text);
      min-height: 1.5em; /* 增加高度确保字母g有足够空间 */
      line-height: 1.5; /* 增加行高 */
      display: flex;
      align-items: center;
    }

    /* 打字机容器 - 确保正确显示 */
    .typed-container {
      display: inline-block;
      position: relative;
    }

    /* Typed.js 光标样式 */
    .typed-cursor {
      color: var(--text);
      font-weight: 400;
      opacity: 1;
      animation: typedjsBlink 0.7s infinite;
      -webkit-animation: typedjsBlink 0.7s infinite;
      animation: typedjsBlink 0.7s infinite;
    }

    @keyframes typedjsBlink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }

    /* 链接行 - 允许换行 */
    .links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--gap);
      font-size: 16px;
      margin-bottom: 18px;
      opacity: 0;
      transform: translateY(5px); /* 调整为5px */
      transition: opacity 0.8s ease, transform 0.8s ease;
      pointer-events: none; /* 防止在动画完成前点击 */
    }

    .links.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; /* 动画完成后启用点击 */
    }

    /* 分隔符样式 */
    .sep {
      color: var(--muted);
      font-weight: 600;
      user-select: none;
      pointer-events: none;
      /* 移除了分隔符的过渡效果 */
    }

    a.link {
      color: var(--link);
      text-decoration: none;
      font-weight: 500;
      transition: color 160ms ease, transform 0.2s ease; /* 添加transform过渡 */
      display: inline-block; /* 使transform生效 */
    }

    a.link:hover,
    a.link:focus {
      color: var(--link-hover);
      outline: none;
      transform: translateY(-1px); /* 添加上浮效果 */
    }

    /* 移除了分隔符跟随移动的样式 */

    /* 版权行（首页：起始隐藏并淡入） */
    .text-muted.small {
      font-size: 13px;
      color: var(--text);
      opacity: 0;
      transform: translateY(3px); /* 调整为3px */
      transition: opacity 0.8s ease, transform 0.8s ease;
      transition-delay: 0.5s;
      pointer-events: none; /* 防止在动画完成前点击 */
    }

    .text-muted.small.show {
      opacity: 0.85;
      transform: translateY(0);
      pointer-events: auto; /* 动画完成后启用点击 */
    }

    /* 版权区域 — 链接默认与文本一致；hover/touch 显示蓝色 */
    .text-muted.small a {
      color: inherit; /* 和周边文字同色 */
      text-decoration: none;
      transition: color 160ms ease;
      display: inline-block;
    }

    .text-muted.small a:hover,
    .text-muted.small a:focus,
    .text-muted.small a:active {
      color: var(--link); /* 触碰或 hover 时显示蓝色 */
      outline: none;
    }

    /* 小屏幕调整 */
    @media (max-width: 576px) {
      h1 { 
        font-size: 32px; 
        margin-bottom: 20px;
      }
      .links { 
        font-size: 20px; 
        margin-bottom: 20px;
      }
      /* 移动端减少顶部空白 */
      .center-wrap {
        padding-top: 20px;
        align-items: flex-start; /* 顶部对齐 */
      }
    }