:root {
            --bg-color: #0b0e14;
            --accent-color: #00d4ff;
            --text-main: #e0e0e0;
            --glass-bg: rgba(255, 255, 255, 0.03);
            --border-glow: rgba(0, 212, 255, 0.3);
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: var(--bg-color);
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 参考 jamcz.com 的背景动效模拟 */
        .background-stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.3;
            animation: twinkle var(--duration) infinite ease-in-out;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

		@font-face {
			font-family: 'MyCustomTechFont'; /* 你为这个字体起的名字 */
			src: url('fonts/tech-font.woff2') format('woff2'), /* 字体文件的路径 */
			url('fonts/tech-font.ttf') format('truetype');
			font-weight: 900; /* 定义该文件的粗细 */
			font-style: italic; /* 如果该文件本身就是斜体，定义为 italic */
		}

        /* 中央容器 */
        .main-container {
            text-align: center;
            z-index: 10;
            width: 100%;
            max-width: 700px;
            padding: 20px;
			transform: translateY(-60px);
        }

        /* 标题设计 */
        .brand-header {
            margin-bottom: 90px;
            animation: fadeInDown 1.5s ease;
        }

        /* 标题设计更新：模拟晨钟网络科技风格 */
		.title {
			font-family: 'MyCustomTechFont', sans-serif; /* 优先使用自定义字体 */
			font-size: 5.5rem; /* 增大字号以体现冲击力 */
			font-weight: 900; /* 使用极粗体 */
			color: #fff;
			font-style: italic; /* 关键：斜体 */
			letter-spacing: -2px; /* 关键：紧凑的字间距，模拟图片中的挤压感 */
			margin: 0;
			text-shadow: 3px 3px 0px rgba(0, 212, 255, 0.3); /* 增加一层淡蓝色的硬阴影提升科技感 */
			transform: scaleY(1.1); /* 纵向稍微拉伸，使其更有张力 */
			display: inline-block;
			/* 其他样式... */
		}

		/* 副标题同步调整 */
		.subtitle {
			font-size: 1.1rem;
			color: var(--accent-color);
			font-weight: 700;
			font-style: italic;
			letter-spacing: 4px;
			margin-top: 5px;
			text-transform: uppercase;
			opacity: 0.9;
		}

        /* 搜索框设计 */
		/* 优化后的搜索框容器 */
		.search-wrapper {
			position: relative;
			background: rgba(255, 255, 255, 0.05); /* 稍微调亮一点基础亮度 */
			border: 1px solid rgba(0, 212, 255, 0.2); /* 初始就带一点科技蓝边 */
			border-radius: 50px;
			padding: 2px 10px; /* 减小内边距让比例更精干 */
			display: flex;
			align-items: center;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: inset 0 0 10px rgba(0, 212, 255, 0.05); /* 增加淡淡的内发光 */
			backdrop-filter: blur(15px);
			animation: fadeInUp 1.2s ease 0.3s both;
		}

		/* 激活态：呼吸感更强 */
		.search-wrapper:focus-within {
			border-color: var(--accent-color);
			box-shadow: 0 0 30px rgba(0, 212, 255, 0.2), 
						inset 0 0 15px rgba(0, 212, 255, 0.1);
			transform: translateY(-2px) scale(1.01);
		}

		/* 占位符颜色美化 */
		.search-input::placeholder {
			color: rgba(255, 255, 255, 0.3);
			font-size: 0.95rem;
			letter-spacing: 1px;
		}

		/* 搜索图标/按钮美化 */
		.search-btn {
			background: transparent;
			border: none;
			padding: 10px 15px;
			cursor: pointer;
			color: var(--accent-color);
			font-size: 1.4rem;
			filter: drop-shadow(0 0 5px var(--accent-color)); /* 让图标自带微光 */
			transition: all 0.3s ease;
		}

		.search-btn:hover {
			transform: scale(1.2) rotate(5deg);
			color: #fff;
			filter: drop-shadow(0 0 10px var(--accent-color));
		}

		/* 强制消除浏览器自动填充带来的白色背景 */
		.search-input:-webkit-autofill,
		.search-input:-webkit-autofill:hover,
		.search-input:-webkit-autofill:focus {
			-webkit-text-fill-color: #fff !important;
			/* 用阴影覆盖背景色，实现视觉上的透明 */
			transition: background-color 5000s ease-in-out 0s;
			box-shadow: 0 0 0px 1000px transparent inset !important;
		}

		/* 针对部分浏览器的搜索建议列表样式微调 */
		/* 确保输入框本身是透明的，且没有默认边框 */
		.search-input {
			flex: 1;
			background: transparent !important; /* 核心：防止出现白底 */
			border: none !important;           /* 核心：防止出现白框 */
			outline: none;
			color: #fff;
			padding: 12px 5px;
			font-size: 1.1rem;
		}

        /* 快捷导航 */
		/* 导航栏容器 */
		.nav-links {
			margin-top: 50px;
			display: flex;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap; /* 手机端自动换行 */
			animation: fadeInUp 1.5s ease 0.6s both;
		}

		/* 导航项：进化为胶囊按钮 */
		.nav-btn {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 7px 18px;
			background: rgba(255, 255, 255, 0.01);
			border: 1px solid rgba(0, 212, 255, 0.2);
			border-radius: 10px;
			color: var(--text-main);
			text-decoration: none;
			font-size: 0.95rem;
			transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			backdrop-filter: blur(5px);
		}

		/* 悬停效果：亮起与微弹 */
		.nav-btn:hover {
			background: rgba(0, 212, 255, 0.1);
			border-color: var(--accent-color);
			box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
			transform: translateY(-3px) scale(1.05);
			color: #fff;
		}

		/* 图标微动效 */
		.nav-icon {
			font-size: 1.1rem;
			filter: drop-shadow(0 0 5px var(--accent-color));
		}

        .nav-item:hover {
            color: var(--accent-color);
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 1px;
            background: var(--accent-color);
            transition: all 0.3s;
            transform: translateX(-50%);
        }

        .nav-item:hover::after {
            width: 100%;
        }

        /* 动画关键帧 */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 极简底部 */
        .footer {
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,0.2);
            font-size: 0.8rem;
            letter-spacing: 2px;
        }
		/* 针对底部备案链接的样式 */
		.beian-link {
			text-decoration: none;
			/* 使用 rgba 控制透明度，使其看起来像截图中的灰色/白色 */
			color: rgba(255, 255, 255, 0.4) !important; 
			font-size: 12px;
			transition: color 0.3s ease;
		}

		/* 强制让“已访问过”的链接也保持这个颜色 */
		.beian-link:visited {
			color: rgba(255, 255, 255, 0.4);
		}

		/* 悬停时稍微变亮，增加交互感 */
		.beian-link:hover {
			color: var(--accent-color); /* 或者直接写 #00d4ff */
		}


		/* 当屏幕宽度小于 768px 时（涵盖大部分手机和部分平板） */
		/* --- 移动端自适应代码：针对标题过大和换行的专项修复 --- */
		@media screen and (max-width: 768px) {
			
			/* 1. 核心修复：使用 vw 单位让字体随屏幕宽度自动缩放 */
			.title {
				/* 18vw 意味着字体大小始终是屏幕宽度的 18% */
				font-size: 12vw; 
				white-space: nowrap;   /* 绝对禁止换行 */
				letter-spacing: -2px;  /* 紧凑字间距，更有冲击力 */
				margin-top: 0;
				line-height: 1.2;
				display: block;
				width: 100%;
			}

			/* 2. 副标题同步调整 */
			.subtitle {
				font-size: 3vw;        /* 随比例缩小 */
				letter-spacing: 5px;   /* 保持拉开的间距感 */
				margin-top: -5px;      /* 往上提一点，靠近主标题 */
			}

			/* 3. 容器间距优化 */
			.brand-header {
				margin-bottom: 40px;   /* 缩小标题与搜索框的距离 */
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.main-container {
				padding: 0 10px;
				width: 95%;            /* 容器稍微加宽 */
				transform: translateY(-20px); 
			}

			/* 4. 搜索框在手机上稍微矮一点，显得精干 */
			.search-input {
				padding: 10px 15px;
				font-size: 16px;       /* 避免 iOS 点击输入框时页面自动放大 */
			}

			.nav-links {
				margin-top: 30px;
				gap: 15px;
			}
			
			.nav-btn {
				padding: 8px 20px;
				font-size: 0.85rem;
				background: rgba(255, 255, 255, 0.08); /* 手机端稍微加深背景提高识别度 */
			}