:root {
  --logo: #009cff;
  --nav: #f5f6f7;
  --body: #d67738;
  --font: #333;
  --a: #333;
  --theme: #4d9e76;
}

.article-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--font);
    line-height: 2; /* 增大行距 */
}

/* 标题样式：字号分级与间距 */
.article-content h1 { font-size: 2.5rem; font-weight: 800; margin: 1.5em 0 0.8em; line-height: 1.2; }
.article-content h2 { font-size: 1.8rem; font-weight: 700; margin: 1.5em 0 0.8em; border-bottom: 2px solid var(--nav); padding-bottom: 5px; }
.article-content h3 { font-size: 1.4rem; font-weight: 700; margin: 1.2em 0 0.6em; }
.article-content p { margin-bottom: 1.5em; font-size: 17px; text-align: justify; }

/* 列表样式 */
.article-content ul { margin-bottom: 1.5em; padding-left: 25px; list-style-type: disc; }
.article-content ol { margin-bottom: 1.5em; padding-left: 25px; list-style-type: decimal; }
.article-content li { margin-bottom: 0.8em; }

/* 增强表格样式 */
.article-content table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    margin: 30px 0; 
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.article-content th { background-color: var(--theme); color: white; padding: 15px; font-weight: bold; }
.article-content td { border-bottom: 1px solid #eee; padding: 12px 15px; background: #fff; }

/* Metadata info styles */
.metadata-info {
    border-left: 4px solid var(--theme);
}
.metadata-info h1 {
    margin-top: 0;
    color: var(--theme);
}
.meta-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.meta-item {
    display: flex;
    align-items: center;
}
.meta-item strong {
    margin-right: 0.5rem;
}
.meta-description {
    font-size: 16px;
}
.sidebar-enter {
            transform: translateX(-100%);
        }

        .sidebar-visible {
            transform: translateX(0);
        }

        .overlay-enter {
            opacity: 0;
        }

        .overlay-visible {
            opacity: 1;
        }

        .border-dashed-green {
            border: 2px dashed #4CAF50;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-25%);
            }
        }

        .marquee-track {
            animation: marquee 30s linear infinite;
        }

        .paused {
            animation-play-state: paused;
        }
        @layer utilities {
  @keyframes spin-clockwise {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-slow-spin {
    animation: spin-clockwise 15s linear infinite;
  }
/* 图片点击放大效果 */
.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 30px auto;
    border-radius: 12px;
    cursor: zoom-in; /* 提示可放大 */
    transition: transform 0.3s ease;
}
.article-content img:hover { transform: scale(1.01); }

@media (max-width: 768px) {
    .article-content { padding: 20px 15px; line-height: 1.8; }
    .article-content h1 { font-size: 1.8rem; }
    .article-content h2 { font-size: 1.4rem; }
    .article-content table { font-size: 14px; display: block; overflow-x: auto; }
}