@import url(https://fonts.googleapis.cn/css2?family=JetBrains+Mono:wght@400;700&display=swap);

/* ===== Variables ===== */

:root {
	--bg: #0d1117;
	--surface: #161b22;
	--border: #30363d;
	--text: #c9d1d9;
	--green: #3fb950;
	--blue: #58a6ff;
	--comment: #8b949e;
	--red: #f85149;
	--yellow: #d29922;
}

/* ===== Base ===== */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: var(--bg);
	background-image: radial-gradient(circle, rgba(48, 54, 61, 0.35) 1px, transparent 1px);
	background-size: 26px 26px;
	font-family: "JetBrains Mono", monospace;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.025) 2px,
		rgba(0, 0, 0, 0.025) 4px
	);
	pointer-events: none;
	z-index: 999;
}

/* ===== Terminal ===== */

.terminal {
	position: relative;
	z-index: 1;
	width: min(560px, 92vw);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow:
		0 0 60px rgba(59, 185, 80, 0.04),
		0 0 120px rgba(0, 0, 0, 0.5),
		0 20px 60px rgba(0, 0, 0, 0.3);
	animation: terminalIn 0.6s ease;
}

@keyframes terminalIn {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
}

/* ===== Terminal Bar ===== */

.terminal-bar {
	display: flex;
	align-items: center;
	padding: 9px 16px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}

.bar-title {
	color: var(--comment);
	font-size: 0.76rem;
}

/* ===== Terminal Body ===== */

.terminal-body {
	padding: 18px 22px;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text);
}

.line {
	opacity: 0;
	animation: typeIn 0.25s ease forwards;
}

.line:nth-child(1) { animation-delay: 0.3s; }
.line:nth-child(2) { animation-delay: 0.5s; }
.line:nth-child(3) { animation-delay: 0.8s; }
.line:nth-child(4) { animation-delay: 1.0s; }
.line:nth-child(5) { animation-delay: 1.3s; }
.line:nth-child(6) { animation-delay: 1.5s; }
.line:nth-child(7) { animation-delay: 1.8s; }
.line:nth-child(8) { animation-delay: 2.0s; }
.line:nth-child(9) { animation-delay: 2.3s; }

@keyframes typeIn {
	to { opacity: 1; }
}

.output {
	margin-bottom: 14px;
}

.output-text {
	color: var(--comment);
}

.prompt {
	color: var(--green);
	margin-right: 8px;
	user-select: none;
}

.command {
	color: var(--text);
	font-weight: 700;
}

/* ===== Links ===== */

.links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
}

.link-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--blue);
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s, text-shadow 0.2s;
}

.link-item:hover {
	color: var(--green);
	text-shadow: 0 0 8px rgba(59, 185, 80, 0.35);
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
	.terminal-body {
		padding: 14px 16px;
		font-size: 0.8rem;
	}

	.terminal-bar {
		padding: 7px 12px;
	}

	.bar-title {
		font-size: 0.7rem;
	}

	.links {
		gap: 0.8em;
	}
}