@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 221.2 83.2% 53.3%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%;
        --radius: 1rem;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --link: blue; /* 明亮蓝色 */
    }

    .dark {
        --background: 225 15% 12%; /* 深蓝灰，柔和护眼 */
        --foreground: 210 40% 98%; /* 亮白色字体 */
        --card: 225 15% 14%;
        --card-foreground: 210 40% 98%;
        --popover: 225 15% 14%;
        --popover-foreground: 210 40% 98%;
        --primary: 217 91% 60%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 220 16% 22%;
        --secondary-foreground: 210 40% 98%;
        --muted: 220 16% 22%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217 91% 60%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 220 16% 22%;
        --input: 220 16% 22%;
        --ring: 217 91% 60%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --link: #6cb6ff; /* 柔和亮蓝色，适合深色背景 */
    }
    }

        body {
            font-family: 'JetBrains Mono', monospace;
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            line-height: 1.5;
            padding: 1rem;
            padding-left: 2rem; /* 增加左侧padding */
            max-width: 100%; /* 允许内容占据全宽 */
            margin: 0;
            /* padding-top 32px， */
            margin-top: 16px;
            font-size: 0.9rem;
        }

        a {
            color: var(--link);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: var(--link);
            text-decoration-thickness: 1.5px;
        }

        .header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            /* font-weight: 500; */
            margin-bottom: 0.5rem;
            
        }

        .projects {
            margin-top: 20px;
            /* 每行文字如果超过1000px，则换行 */
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .projects h3 {
            /* 设置为p标签 */
            font-size: 0.9rem;
        }

        /* 项目列表中的ul中有h3标签，a标签，p标签，需要设置margin */
        .projects ul {
           margin-top: 16px;
        }

        .projects ul li {
            margin-top: 0px;
        }

        /* 新增：调整h5标签和其后文字的间距 */
        .projects h4 {
            margin-bottom: 0.2rem;
        }

        .projects h4 + p {
            margin-top: 0;
        }

        .about {
            margin-top: 0.5rem;
        }

        .about h2 {
            /* font-weight: 600; */
            margin-bottom: 1rem;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 0.5rem;
        }