/* ============================================================
   xbgit.cn — 全站样式
   暗黑 · 开发者风 · 单强调色 · 无框架 · 无 CDN
   断点：1000px（两栏转单栏）/ 680px（导航收成汉堡）
   ============================================================ */

:root {
	--bg: #0c0e11;
	--panel: #12151a;
	--panel-2: #161a20;
	--line: #232932;
	--line-strong: #39424e;
	--text: #dfe3e8;
	--dim: #8a929c;
	--faint: #5b636d;
	--accent: #e8b84b;
	--accent-dim: #8a6d24;

	--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;

	--wrap: 1060px;
	--gap: clamp(16px, 2.2vw, 26px);
	--pad: clamp(18px, 4vw, 34px);
	--radius: 10px;
	--bar-h: 60px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bar-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 clamp(15.5px, 1.05vw, 17px)/1.75 var(--sans);
	letter-spacing: 0.01em;
	overflow-wrap: break-word;
}

h1, h2, h3 {
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.22;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--accent-dim); color: #fff; }

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 99;
	background: var(--accent);
	color: #14100a;
	padding: 8px 14px;
	font-family: var(--mono);
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ---------- 顶栏 ---------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #0d0f13f2;
	background: color-mix(in oklab, var(--bg) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.bar {
	min-height: var(--bar-h);
	display: flex;
	align-items: center;
	gap: var(--gap);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mono);
	font-weight: 700;
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--accent-dim);
	border-radius: 5px;
	color: var(--accent);
	font-size: 12px;
}

.brand-text { font-size: 15px; letter-spacing: 0.04em; }

.menu { margin-left: auto; }
.menu ul { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }

.menu a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	color: var(--dim);
	font-size: 15px;
	transition: color 0.18s ease;
}

.menu a:hover { color: var(--text); }

.menu a[aria-current="page"] { color: var(--text); }

.menu a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
}

.ext { font-size: 11px; color: var(--faint); margin-left: 3px; }

.burger {
	display: none;
	margin-left: auto;
	width: 38px;
	height: 32px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 8px 9px;
	cursor: pointer;
}

.burger span {
	display: block;
	height: 1px;
	background: var(--dim);
	margin: 3px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */

.hero {
	padding-block: clamp(40px, 7vw, 84px) clamp(30px, 5vw, 56px);
	border-bottom: 1px solid var(--line);
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 54px);
	align-items: center;
}

.eyebrow { color: var(--faint); margin-bottom: 14px; }

.hero-title {
	font-size: clamp(2.3rem, 6.2vw, 3.9rem);
	margin-bottom: 18px;
}

.hero-title .cursor {
	display: inline-block;
	width: 0.09em;
	height: 0.82em;
	margin-left: 0.09em;
	background: var(--accent);
	vertical-align: baseline;
	animation: blink 1.1s steps(1, end) infinite;
}

.lead {
	color: var(--dim);
	font-size: clamp(16px, 1.35vw, 18.5px);
	max-width: 46ch;
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--panel-2);
	color: var(--text);
	font-family: var(--mono);
	font-size: 13.5px;
	transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.btn:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #161105; font-weight: 700; }
.btn-accent:hover { background: #f2c561; border-color: #f2c561; }
.btn.small { padding: 6px 11px; font-size: 12px; margin-left: auto; }

/* ---------- 终端块 ---------- */

.term {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	overflow: hidden;
	box-shadow: 0 18px 50px -30px #000;
}

.term-bar {
	padding: 9px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel-2);
	color: var(--faint);
}

.term-body { padding: 16px 16px 20px; font-family: var(--mono); font-size: 13.2px; }

.term-line { color: var(--text); margin-bottom: 10px; }
.term-out { color: var(--dim); margin: 0 0 10px 14px; }
.term-line:last-child { margin-bottom: 0; }
.prompt { color: var(--accent); margin-right: 8px; }

/* ---------- 区块 ---------- */

.sec { padding-block: clamp(40px, 6vw, 72px); }
.sec.tight { padding-block: clamp(28px, 4vw, 48px); }
.sec.alt { background: #0f1216; border-block: 1px solid var(--line); }
.sec.full { min-height: 60vh; display: flex; align-items: center; }

.sec-title {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	margin-bottom: clamp(20px, 3vw, 30px);
}

.sec-title[data-index]::before {
	content: attr(data-index);
	display: inline-block;
	margin-right: 10px;
	color: var(--accent-dim);
	font-family: var(--mono);
	font-size: 0.68em;
	vertical-align: 0.22em;
	letter-spacing: 0.04em;
}

.page-head { padding-block: clamp(38px, 6vw, 66px) 0; }
.page-title { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: 14px; }

.anchor-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px dashed var(--line);
}

.anchor-nav a { color: var(--faint); }
.anchor-nav a:hover { color: var(--accent); }

.more { margin-top: clamp(20px, 3vw, 28px); }
.more a {
	color: var(--dim);
	font-family: var(--mono);
	font-size: 13.5px;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.more a:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ---------- 卡片 ---------- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--gap);
}

.cards.one { grid-template-columns: minmax(0, 1fr); gap: 18px; }

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.card-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.card-name { font-size: 1.06rem; }
.card-kind { color: var(--faint); white-space: nowrap; }
.card-sum { color: var(--dim); font-size: 0.95rem; margin-bottom: 14px; }

.card-body {
	color: var(--text);
	font-size: 0.93rem;
	line-height: 1.85;
	opacity: 0.86;
	padding-top: 12px;
	margin-bottom: 14px;
	border-top: 1px dashed var(--line);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
}

.tag {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--dim);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}

.tags.big .tag { font-size: 13px; padding: 6px 12px; color: var(--text); background: var(--panel); }

.card-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.status { color: var(--accent); font-size: 12.5px; font-family: var(--mono); }
.period { color: var(--faint); }

/* ---------- 技能 ---------- */

.stack-preview { display: grid; gap: 14px; }

.stack-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.stack-row:last-child { border-bottom: 0; padding-bottom: 0; }
.group-name { color: var(--dim); font-size: 13px; }

.stack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--gap);
}

.stack-cell {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	background: var(--panel);
}

.cell-name { color: var(--accent); margin-bottom: 14px; font-size: 14px; }
.cell-hint { margin-top: 14px; color: var(--faint); font-size: 0.88rem; }

.rules { display: grid; gap: 10px; max-width: 62ch; }

.rules li {
	position: relative;
	padding-left: 26px;
	color: var(--dim);
}

.rules li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--accent-dim);
	font-family: var(--mono);
}

/* ---------- 正文 / 友链 ---------- */

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.25em; line-height: 1.9; }

.list { display: grid; gap: 9px; max-width: 72ch; }
.list li { position: relative; padding-left: 18px; color: var(--dim); }
.list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 1px;
	background: var(--accent-dim);
}

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }

.link-card {
	display: grid;
	gap: 5px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	transition: border-color 0.2s ease;
}

.link-card:hover { border-color: var(--accent-dim); }
.link-name { font-weight: 700; }
.link-url { color: var(--faint); font-size: 12.5px; }
.link-desc { color: var(--dim); font-size: 0.92rem; }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.note {
	border-left: 2px solid var(--accent-dim);
	padding: 14px 0 14px 18px;
	color: var(--dim);
	font-size: 0.94rem;
}

.note-kicker { color: var(--faint); margin-bottom: 8px; }
.note a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }

.code-404 { color: var(--accent); margin-bottom: 10px; }

/* ---------- 页脚 ---------- */

.site-foot {
	border-top: 1px solid var(--line);
	padding-block: 26px 30px;
	background: #0a0c0f;
}

.foot-line {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--dim);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.foot-line:last-child { margin-bottom: 0; }

.beian a { color: var(--faint); transition: color 0.18s ease; }
.beian a:hover { color: var(--accent); }

/* ---------- 动效 ---------- */

@keyframes blink { 50% { opacity: 0; } }

@keyframes rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.card, .stack-cell, .link-card { animation: rise 0.45s ease-out both; }
	.card:nth-child(2), .stack-cell:nth-child(2), .link-card:nth-child(2) { animation-delay: 0.06s; }
	.card:nth-child(3), .stack-cell:nth-child(3), .link-card:nth-child(3) { animation-delay: 0.12s; }
	.card:nth-child(4), .stack-cell:nth-child(4), .link-card:nth-child(4) { animation-delay: 0.18s; }
	.topbar.is-stuck { box-shadow: 0 8px 24px -18px #000; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero-title .cursor { animation: none; }
	*, *::before, *::after { transition-duration: 0.001ms !important; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 1000px) {
	.hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
	.term { order: 2; }
	.lead { max-width: none; }
}

@media (max-width: 680px) {
	:root { --bar-h: 56px; }

	.burger { display: block; }
	.menu {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--bar-h);
		margin: 0;
		display: none;
		border-bottom: 1px solid var(--line);
		background: #0f1217;
	}

	body[data-menu="open"] .menu { display: block; }
	body[data-menu="open"] .burger span:first-child { transform: translateY(4px) rotate(45deg); }
	body[data-menu="open"] .burger span:nth-child(2) { opacity: 0; }
	body[data-menu="open"] .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

	.menu ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px var(--pad) 14px; }
	.menu li { width: 100%; }
	.menu a { display: block; padding: 11px 0; width: 100%; border-bottom: 1px solid var(--line); }
	.menu a[aria-current="page"]::after { left: 0; right: auto; width: 22px; bottom: -1px; }

	.term-body { font-size: 12.4px; }
	.term-out { margin-left: 8px; }
	.stack-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.card-top { flex-direction: column; gap: 4px; }
	.btn.small { margin-left: 0; }
}

@media print {
	:root { --bg: #fff; --panel: #fff; --text: #000; --dim: #333; }
	body { background: #fff; }
	.topbar, .term, .cta, .burger { display: none; }
}