/* ===== CSS 变量与全局样式 ===== */
	:root {
		--deep-blue: #020617;
		--accent: #22D3EE;
		--accent-purple: #A78BFA;
		--text: #F8FAFC;
		--text-muted: #94A3B8;
		--red-500: #EF4444;
		--red-400: #F87171;
		--green-400: #4ADE80;
		--yellow-500: #EAB308;
		--yellow-600: #CA8A04;
		--yellow-400: #FACC15;
		--white-5: rgba(255, 255, 255, 0.05);
		--white-10: rgba(255, 255, 255, 0.1);
		--white-20: rgba(255, 255, 255, 0.2);
		--white-30: rgba(255, 255, 255, 0.3);
		--white-40: rgba(255, 255, 255, 0.4);
		--white-50: rgba(255, 255, 255, 0.5);
		--white-55: rgba(255, 255, 255, 0.55);
		--white-60: rgba(255, 255, 255, 0.6);
		--white-70: rgba(255, 255, 255, 0.7);
		--white-80: rgba(255, 255, 255, 0.8);
		--white-03: rgba(255, 255, 255, 0.03);
		--white-04: rgba(255, 255, 255, 0.04);
		--cyan-400: #22D3EE;
		--cyan-500: #06B6D4;
		--blue-500: #3B82F6;
	}

	/* ===== 数字网格背景 ===== */
	.digital-grid {
		background-image:
			linear-gradient(rgba(34, 211, 238, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(34, 211, 238, 0.04) 1px, transparent 1px);
		background-size: 40px 40px;
	}

	/* ===== 星云容器 ===== */
	.nebula-container {
		background: radial-gradient(circle at center, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
	}

	/* ===== 扩散圆环动画 ===== */
	@keyframes ripple {
		0% {
			transform: scale(0.4);
			opacity: 0.6;
		}

		100% {
			transform: scale(1.2);
			opacity: 0;
		}
	}

	.ripple-ring {
		position: absolute;
		border-radius: 50%;
		border: 1px solid rgba(34, 211, 238, 0.4);
		animation: ripple 3s ease-out infinite;
		pointer-events: none;
	}

	.ripple-ring:nth-child(1) {
		animation-delay: 0s;
	}

	.ripple-ring:nth-child(2) {
		animation-delay: 0.8s;
	}

	.ripple-ring:nth-child(3) {
		animation-delay: 1.6s;
	}

	/* ===== 实时日志滚动 ===== */
	@keyframes logScroll {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-50%);
		}
	}

	.log-stream {
		animation: logScroll 20s linear infinite;
	}

	.log-stream:hover {
		animation-play-state: paused;
	}

	/* ===== 终端光标闪烁 ===== */
	@keyframes blink {

		0%,
		50% {
			opacity: 1;
		}

		51%,
		100% {
			opacity: 0;
		}
	}

	.cursor-blink::after {
		content: '▊';
		animation: blink 1s step-end infinite;
		margin-left: 2px;
		color: #22D3EE;
	}

	/* ===== 红色脉冲动画 ===== */
	@keyframes pulseRed {

		0%,
		100% {
			opacity: 1;
			box-shadow: 0 0 6px #EF4444;
		}

		50% {
			opacity: 0.5;
			box-shadow: 0 0 18px #EF4444;
		}
	}

	.animate-pulse-red {
		animation: pulseRed 2s ease-in-out infinite;
	}

	/* ===== 扫描线 ===== */
	.scanlines {
		background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.5) 2px, rgba(255, 255, 255, 0.5) 4px);
	}

	/* ===== 布局辅助 ===== */
	.relative {
		position: relative;
	}

	.absolute {
		position: absolute;
	}

	.inset-0 {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.w-full {
		width: 100%;
	}

	.h-full {
		height: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-col {
		flex-direction: column;
	}

	.items-center {
		align-items: center;
	}

	.items-start {
		align-items: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-shrink-0 {
		flex-shrink: 0;
	}

	.gap-2 {
		gap: 0.5rem;
	}

	.gap-3 {
		gap: 0.75rem;
	}

	.gap-4 {
		gap: 1rem;
	}

	.gap-10 {
		gap: 2.5rem;
	}

	.space-y-2>*+* {
		margin-top: 0.5rem;
	}

	.overflow-hidden {
		overflow: hidden;
	}

	.rounded-full {
		border-radius: 50%;
	}

	.rounded-xl {
		border-radius: 0.75rem;
	}

	.rounded-2xl {
		border-radius: 1rem;
	}

	.border {
		border-width: 1px;
	}

	.border-b {
		border-bottom-width: 1px;
	}

	.border-white\/5 {
		border-color: rgba(255, 255, 255, 0.05);
	}

	.border-white\/10 {
		border-color: rgba(255, 255, 255, 0.1);
	}

	/* ===== 背景 ===== */
	.bg-black\/50 {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.bg-white\/10 {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.bg-white\/\[0\.03\] {
		background-color: rgba(255, 255, 255, 0.03);
	}

	.bg-red-500 {
		background-color: #EF4444;
	}

	.bg-red-500\/60 {
		background-color: rgba(239, 68, 68, 0.6);
	}

	.bg-yellow-500\/60 {
		background-color: rgba(234, 179, 8, 0.6);
	}

	.bg-green-500\/60 {
		background-color: rgba(34, 197, 94, 0.6);
	}

	/* ===== 文字颜色 ===== */
	.text-white {
		color: #F8FAFC;
	}

	.text-white\/40 {
		color: rgba(255, 255, 255, 0.4);
	}

	.text-white\/50 {
		color: rgba(255, 255, 255, 0.5);
	}

	.text-white\/55 {
		color: rgba(255, 255, 255, 0.55);
	}

	.text-white\/60 {
		color: rgba(255, 255, 255, 0.6);
	}

	.text-white\/80 {
		color: rgba(255, 255, 255, 0.8);
	}

	.text-red-400 {
		color: #F87171;
	}

	.text-green-400 {
		color: #4ADE80;
	}

	.text-green-400\/60 {
		color: rgba(74, 222, 128, 0.6);
	}

	.text-yellow-400 {
		color: #FACC15;
	}

	.text-accent {
		color: #22D3EE;
	}

	.text-accent\/60 {
		color: rgba(34, 211, 238, 0.6);
	}

	/* ===== 字体大小 ===== */
	.text-xs {
		font-size: 0.75rem;
		line-height: 1rem;
	}

	.text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	.text-base {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.text-3xl {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.text-5xl {
		font-size: 3rem;
		line-height: 1;
	}

	.text-6xl {
		font-size: 3.75rem;
		line-height: 1;
	}

	/* ===== 字体粗细 ===== */
	.font-bold {
		font-weight: 700;
	}

	.font-semibold {
		font-weight: 600;
	}

	.font-extrabold {
		font-weight: 800;
	}

	/* ===== 字体族 ===== */
	.font-mono {
		font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
	}

	/* ===== 文本对齐与装饰 ===== */
	.text-center {
		text-align: center;
	}

	.uppercase {
		text-transform: uppercase;
	}

	.tracking-tight {
		letter-spacing: -0.025em;
	}

	.tracking-wide {
		letter-spacing: 0.025em;
	}

	.tracking-wider {
		letter-spacing: 0.05em;
	}

	.tracking-\[0\.3em\] {
		letter-spacing: 0.3em;
	}

	/* ===== 内边距 ===== */
	.p-4 {
		padding: 1rem;
	}

	.p-5 {
		padding: 1.25rem;
	}

	.px-4 {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.px-8 {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.py-3 {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.py-4 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.py-16 {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	/* ===== 外边距 ===== */
	.mb-2 {
		margin-bottom: 0.5rem;
	}

	.mb-4 {
		margin-bottom: 1rem;
	}

	.mb-6 {
		margin-bottom: 1.5rem;
	}

	.mb-8 {
		margin-bottom: 2rem;
	}

	.mb-10 {
		margin-bottom: 2.5rem;
	}

	.mt-1 {
		margin-top: 0.25rem;
	}

	.mt-2 {
		margin-top: 0.5rem;
	}

	.mt-3 {
		margin-top: 0.75rem;
	}

	.ml-3 {
		margin-left: 0.75rem;
	}

	/* ===== 尺寸 ===== */
	.w-3 {
		width: 0.75rem;
	}

	.h-3 {
		height: 0.75rem;
	}

	.w-4 {
		width: 1rem;
	}

	.h-4 {
		height: 1rem;
	}

	.w-5 {
		width: 1.25rem;
	}

	.h-5 {
		height: 1.25rem;
	}

	.w-8 {
		width: 2rem;
	}

	.h-8 {
		height: 2rem;
	}

	.w-12 {
		width: 3rem;
	}

	.h-12 {
		height: 3rem;
	}

	.w-56 {
		width: 14rem;
	}

	/* ===== 定位 ===== */
	.top-0 {
		top: 0;
	}

	.bottom-0 {
		bottom: 0;
	}

	.left-0 {
		left: 0;
	}

	.right-0 {
		right: 0;
	}

	.z-0 {
		z-index: 0;
	}

	.z-10 {
		z-index: 10;
	}

	/* ===== 透明度 ===== */
	.opacity-40 {
		opacity: 0.4;
	}

	.opacity-75 {
		opacity: 0.75;
	}

	/* ===== 阴影 ===== */
	.shadow-2xl {
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	}

	.shadow-cyan-500\/5 {
		box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.05);
	}

	/* ===== 滤镜 ===== */
	.backdrop-blur-md {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	.backdrop-blur-sm {
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}

	/* ===== 过渡 ===== */
	.transition-all {
		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}

	/* ===== 动画 ===== */
	.animate-ping {
		animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
	}

	@keyframes ping {

		75%,
		100% {
			transform: scale(2);
			opacity: 0;
		}
	}

	.animate-pulse {
		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}
	}

	/* ===== 指针事件 ===== */
	.pointer-events-none {
		pointer-events: none;
	}

	/* ===== 白色透明度背景 ===== */
	.bg-white\/\[0\.02\] {
		background-color: rgba(255, 255, 255, 0.02);
	}

	.bg-opacity-10 {
		background-opacity: 0.1;
	}

	/* ===== 渐变文字 ===== */
	.text-gradient-cyan {
		background: linear-gradient(to right, #22D3EE, #3B82F6);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* ===== 行高 ===== */
	.leading-relaxed {
		line-height: 1.625;
	}

	.leading-\[1\.15\] {
		line-height: 1.15;
	}

	/* ===== 最大宽度 ===== */
	.max-w-md {
		max-width: 28rem;
	}

	.max-w-lg {
		max-width: 32rem;
	}

	.max-w-7xl {
		max-width: 80rem;
	}

	.max-w-2xl {
		max-width: 42rem;
	}

	/* ===== 外边距自动 ===== */
	.mx-auto {
		margin-left: auto;
		margin-right: auto;
	}

	/* ===== 内边距响应式 ===== */
	.py-20 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.lg\:py-20 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	/* ===== 容器高度 ===== */
	.min-h-\[90vh\] {
		min-height: 90vh;
	}

	/* ===== 背景附件 ===== */
	.bg-\[\\#020617\] {
		background-color: #020617;
	}

	/* ===== 尺寸辅助类 ===== */
	.w-\[320px\] {
		width: 320px;
	}

	.h-\[320px\] {
		height: 320px;
	}

	.w-\[450px\] {
		width: 450px;
	}

	.h-\[450px\] {
		height: 450px;
	}

	.w-\[580px\] {
		width: 580px;
	}

	.h-\[580px\] {
		height: 580px;
	}

	.w-\[8px\] {
		width: 8px;
	}

	.h-\[8px\] {
		height: 8px;
	}

	.w-\[10px\] {
		width: 10px;
	}

	.h-\[10px\] {
		height: 10px;
	}

	/* ===== 阴影特效 ===== */
	.shadow-\[0_0_40px_\\#22D3EE\,0_0_80px_\\#22D3EE\] {
		box-shadow: 0 0 40px #22D3EE, 0 0 80px #22D3EE;
	}

	/* ===== 字体大小辅助 ===== */
	.text-\[10px\] {
		font-size: 10px;
	}

	.text-\[12px\] {
		font-size: 12px;
	}

	.text-\[14px\] {
		font-size: 14px;
	}

	/* ===== 文本装饰 ===== */
	.text-transparent {
		color: transparent;
	}

	.bg-clip-text {
		-webkit-background-clip: text;
		background-clip: text;
	}

	.bg-gradient-to-r {
		background-image: linear-gradient(to right, #22D3EE, #3B82F6);
	}

	.from-cyan-400 {
		--tw-gradient-from: #22D3EE;
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 211, 238, 0));
	}

	.to-blue-500 {
		--tw-gradient-to: #3B82F6;
	}

	/* ===== 圆角矩形 ===== */
	.rounded-lg {
		border-radius: 0.5rem;
	}

	.rounded-md {
		border-radius: 0.375rem;
	}

	/* ===== 宽度百分比 ===== */
	.w-1\/2 {
		width: 50%;
	}

	.w-2\/3 {
		width: 66.666667%;
	}

	.w-1\/3 {
		width: 33.333333%;
	}

	/* ===== 显示类型 ===== */
	.hidden {
		display: none;
	}

	.block {
		display: block;
	}

	.inline-block {
		display: inline-block;
	}

	.inline-flex {
		display: inline-flex;
	}

	.grid {
		display: grid;
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.col-span-2 {
		grid-column: span 2 / span 2;
	}

	/* ===== 溢出处理 ===== */
	.overflow-y-auto {
		overflow-y: auto;
	}

	.overflow-x-auto {
		overflow-x: auto;
	}

	/* ===== 用户选择 ===== */
	.select-none {
		user-select: none;
	}

	/* ===== 光标 ===== */
	.cursor-pointer {
		cursor: pointer;
	}

	.cursor-default {
		cursor: default;
	}

	/* ===== 宽度自适应 ===== */
	.w-auto {
		width: auto;
	}

	.max-w-xs {
		max-width: 20rem;
	}

	.max-w-sm {
		max-width: 24rem;
	}

	.max-w-lg {
		max-width: 32rem;
	}

	.max-w-xl {
		max-width: 36rem;
	}

	.max-w-2xl {
		max-width: 42rem;
	}

	.max-w-3xl {
		max-width: 48rem;
	}

	.max-w-4xl {
		max-width: 56rem;
	}

	.max-w-5xl {
		max-width: 64rem;
	}

	.max-w-6xl {
		max-width: 72rem;
	}

	.max-w-7xl {
		max-width: 80rem;
	}

	/* ===== 文本省略 ===== */
	.truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* ===== 行高 ===== */
	.leading-none {
		line-height: 1;
	}

	.leading-tight {
		line-height: 1.25;
	}

	.leading-snug {
		line-height: 1.375;
	}

	.leading-normal {
		line-height: 1.5;
	}

	.leading-relaxed {
		line-height: 1.625;
	}

	.leading-loose {
		line-height: 2;
	}

	/* ===== 文本对齐 ===== */
	.text-left {
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.text-justify {
		text-align: justify;
	}

	/* ===== 文本装饰 ===== */
	.underline {
		text-decoration: underline;
	}

	.line-through {
		text-decoration: line-through;
	}

	.no-underline {
		text-decoration: none;
	}

	/* ===== 文本变换 ===== */
	.uppercase {
		text-transform: uppercase;
	}

	.lowercase {
		text-transform: lowercase;
	}

	.capitalize {
		text-transform: capitalize;
	}

	.normal-case {
		text-transform: none;
	}

	/* ===== 字体样式 ===== */
	.italic {
		font-style: italic;
	}

	.not-italic {
		font-style: normal;
	}

	/* ===== 文本溢出 ===== */
	.break-words {
		overflow-wrap: break-word;
	}

	.break-all {
		word-break: break-all;
	}

	.whitespace-normal {
		white-space: normal;
	}

	.whitespace-nowrap {
		white-space: nowrap;
	}

	.whitespace-pre {
		white-space: pre;
	}

	.whitespace-pre-line {
		white-space: pre-line;
	}

	.whitespace-pre-wrap {
		white-space: pre-wrap;
	}

	/* ===== 边框样式 ===== */
	.border-solid {
		border-style: solid;
	}

	.border-dashed {
		border-style: dashed;
	}

	.border-dotted {
		border-style: dotted;
	}

	.border-none {
		border-style: none;
	}

	/* ===== 边框宽度 ===== */
	.border-0 {
		border-width: 0px;
	}

	.border-2 {
		border-width: 2px;
	}

	.border-4 {
		border-width: 4px;
	}

	.border-8 {
		border-width: 8px;
	}

	.border-t {
		border-top-width: 1px;
	}

	.border-r {
		border-right-width: 1px;
	}

	.border-b {
		border-bottom-width: 1px;
	}

	.border-l {
		border-left-width: 1px;
	}

	/* ===== 边框颜色 ===== */
	.border-transparent {
		border-color: transparent;
	}

	.border-current {
		border-color: currentColor;
	}

	.border-black {
		border-color: #000;
	}

	.border-white {
		border-color: #fff;
	}

	.border-gray-200 {
		border-color: #e5e7eb;
	}

	.border-gray-300 {
		border-color: #d1d5db;
	}

	.border-gray-400 {
		border-color: #9ca3af;
	}

	.border-gray-500 {
		border-color: #6b7280;
	}

	.border-gray-600 {
		border-color: #4b5563;
	}

	.border-gray-700 {
		border-color: #374151;
	}

	.border-gray-800 {
		border-color: #1f2937;
	}

	.border-gray-900 {
		border-color: #111827;
	}

	.border-red-500 {
		border-color: #ef4444;
	}

	.border-yellow-500 {
		border-color: #eab308;
	}

	.border-green-500 {
		border-color: #22c55e;
	}

	.border-blue-500 {
		border-color: #3b82f6;
	}

	.border-indigo-500 {
		border-color: #6366f1;
	}

	.border-purple-500 {
		border-color: #a855f7;
	}

	.border-pink-500 {
		border-color: #ec4899;
	}

	/* ===== 边框半径 ===== */
	.rounded-none {
		border-radius: 0;
	}

	.rounded-sm {
		border-radius: 0.125rem;
	}

	.rounded {
		border-radius: 0.25rem;
	}

	.rounded-md {
		border-radius: 0.375rem;
	}

	.rounded-lg {
		border-radius: 0.5rem;
	}

	.rounded-xl {
		border-radius: 0.75rem;
	}

	.rounded-2xl {
		border-radius: 1rem;
	}

	.rounded-3xl {
		border-radius: 1.5rem;
	}

	.rounded-full {
		border-radius: 50%;
	}

	/* ===== 显示/隐藏 ===== */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}

	/* ===== 位置 ===== */
	.static {
		position: static;
	}

	.fixed {
		position: fixed;
	}

	.absolute {
		position: absolute;
	}

	.relative {
		position: relative;
	}

	.sticky {
		position: sticky;
	}

	/* ===== 堆叠顺序 ===== */
	.z-0 {
		z-index: 0;
	}

	.z-10 {
		z-index: 10;
	}

	.z-20 {
		z-index: 20;
	}

	.z-30 {
		z-index: 30;
	}

	.z-40 {
		z-index: 40;
	}

	.z-50 {
		z-index: 50;
	}

	.z-auto {
		z-index: auto;
	}

	/* ===== 响应式布局 ===== */
	@media (min-width: 640px) {
		.sm\:flex-row {
			flex-direction: row;
		}

		.sm\:text-xs {
			font-size: 0.75rem;
			line-height: 1rem;
		}

		.sm\:w-\[450px\] {
			width: 450px;
		}

		.sm\:h-\[450px\] {
			height: 450px;
		}

		.sm\:w-64 {
			width: 16rem;
		}

		.sm\:px-6 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}

		.sm\:p-5 {
			padding: 1.25rem;
		}
	}

	@media (min-width: 768px) {
		.md\:flex-row {
			flex-direction: row;
		}
	}

	@media (min-width: 1024px) {
		.lg\:flex-row {
			flex-direction: row;
		}

		.lg\:w-\[580px\] {
			width: 580px;
		}

		.lg\:h-\[580px\] {
			height: 580px;
		}

		.lg\:py-20 {
			padding-top: 5rem;
			padding-bottom: 5rem;
		}

		.lg\:px-8 {
			padding-left: 2rem;
			padding-right: 2rem;
		}

		.lg\:gap-16 {
			gap: 4rem;
		}

		.lg\:max-w-none {
			max-width: none;
		}

		.lg\:text-6xl {
			font-size: 3.75rem;
			line-height: 1;
		}
	}

	/* ===== Three.js 画布占满容器 ===== */
	#node-nebula-sphere canvas {
		display: block;
	}