html:has(.knot-home-page),
body:has(.knot-home-page),
html.knot-home-active,
body.knot-home-active {
	margin: 0 !important;
	padding: 0 !important;
	background: #080b10 !important;
}

body.knot-home-active { overflow-x: hidden; }

body:has(.knot-home-page) #navbar,
body.knot-home-active #navbar,
body:has(.knot-home-page) footer,
body.knot-home-active footer {
	display: none !important;
}

body:has(.knot-home-page) .full.height,
body.knot-home-active .full.height {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #080b10 !important;
}

/* 覆盖 Forgejo 的 .page-content > :first-child:not(.secondary-nav) */
.knot-home-page > .knot-home-background {
	margin-top: 0 !important;
}

.knot-home-page {
	position: relative;
	display: flex;
	flex: 1;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #080b10;
	color: #f3f5f7;
}

.knot-home-background {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	overflow: hidden;
}

.knot-home-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 67%,transparent 100%);
	mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 67%,transparent 100%);
}

.knot-home-glow {
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	filter: blur(115px);
}

.knot-home-glow-a {
	top: -330px;
	right: -120px;
	background: rgba(92,85,255,.17);
}

.knot-home-glow-b {
	left: -260px;
	bottom: -390px;
	background: rgba(40,211,147,.09);
}

.knot-home-shell {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(1260px, calc(100% - 64px));
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 auto !important;
}

.knot-home-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 76px;
	border-bottom: 1px solid rgba(255,255,255,.065);
}

.knot-home-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: #f0f3f6 !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
}

.knot-home-brand-mark {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 8px;
	background: rgba(255,255,255,.04);
	color: #f5f7f9;
	font-size: 13px;
	box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.knot-home-nav-actions {
	display: flex;
	align-items: center;
	gap: 5px;
}

.knot-home-nav-actions a {
	padding: 9px 13px;
	border-radius: 8px;
	color: #8d97a4 !important;
	font-size: 13px;
	font-weight: 550;
	text-decoration: none !important;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.knot-home-nav-actions a:hover {
	background: rgba(255,255,255,.045);
	color: #e2e6ea !important;
}

.knot-home-nav-actions .knot-home-nav-login {
	margin-left: 3px;
	border: 1px solid rgba(255,255,255,.12);
	color: #dce1e6 !important;
}

.knot-home-main {
	display: flex;
	flex: 1;
	align-items: center;
	padding: 66px 0 56px;
}

.knot-home-hero {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(460px,.95fr);
	align-items: center;
	gap: 92px;
	width: 100%;
}

.knot-home-copy { min-width: 0; }

.knot-home-copy h1 {
	margin: 0;
	color: #f5f7f9;
	font-size: clamp(60px,6vw,92px);
	font-weight: 680;
	line-height: .96;
	letter-spacing: -.06em;
}

.knot-home-slogan {
	margin: 24px 0 0;
	color: #8f98a5;
	font-size: clamp(18px,1.7vw,24px);
	font-weight: 450;
	line-height: 1.45;
	letter-spacing: -.015em;
}

.knot-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 38px;
}

.knot-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 19px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 650;
	text-decoration: none !important;
	transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.knot-home-btn:hover { transform: translateY(-1px); }

.knot-home-btn-primary {
	gap: 32px;
	background: #f2f4f6;
	color: #080b10 !important;
	box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

.knot-home-btn-primary:hover {
	background: #fff;
	color: #080b10 !important;
	box-shadow: 0 15px 42px rgba(0,0,0,.35);
}

.knot-home-btn-secondary {
	border-color: #2b323c;
	background: rgba(255,255,255,.025);
	color: #cfd5db !important;
}

.knot-home-btn-secondary:hover {
	border-color: #424b57;
	background: rgba(255,255,255,.05);
	color: #f0f3f6 !important;
}

.knot-home-visual {
	position: relative;
	min-width: 0;
	perspective: 1200px;
}

.knot-branch-card {
	overflow: hidden;
	border: 1px solid #252b34;
	border-radius: 14px;
	background: rgba(13,16,22,.89);
	box-shadow: 0 32px 90px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.035);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	transform: rotateY(-3deg) rotateX(1deg);
	transform-origin: center;
	transition: transform .16s ease-out;
}

.knot-branch-card-head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 45px;
	padding: 0 15px;
	border-bottom: 1px solid #222831;
	background: rgba(255,255,255,.015);
}

.knot-window-dots { display: flex; gap: 7px; }
.knot-window-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3b424d;
}

.knot-branch-title {
	color: #65707d;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
	font-size: 10px;
	text-align: center;
}

.knot-branch-badge {
	justify-self: end;
	padding: 3px 7px;
	border: 1px solid #2b333e;
	border-radius: 5px;
	color: #798491;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
	font-size: 9px;
}

.knot-branch-graph {
	min-height: 350px;
	padding: 18px 18px 20px;
}

.knot-git-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.knot-git-path {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .82;
}

.knot-git-path-main { stroke: #717b88; }
.knot-git-path-dev { stroke: #4fd09a; }
.knot-git-path-feature-a { stroke: #8177ef; }
.knot-git-path-feature-b { stroke: #bb6ce4; }

.knot-git-nodes circle {
	stroke: #0d1117;
	stroke-width: 3;
}

.knot-git-main-nodes circle { fill: #aeb6c0; }
.knot-git-dev-nodes circle { fill: #58d6a1; }
.knot-git-feature-a-nodes circle { fill: #8f83ff; }
.knot-git-feature-b-nodes circle { fill: #ca76ef; }

.knot-git-labels text {
	fill: #77818d;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
	font-size: 12px;
	font-weight: 600;
}

.knot-git-commit-text text {
	fill: #4f5965;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
	font-size: 10px;
}

.knot-git-current rect {
	fill: rgba(79,208,154,.09);
	stroke: rgba(79,208,154,.35);
	stroke-width: 1;
}

.knot-git-current text {
	fill: #63d9a7;
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
	font-size: 9px;
	font-weight: 650;
}

.knot-status-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 144px;
	padding: 10px 12px;
	border: 1px solid #2a313a;
	border-radius: 10px;
	background: rgba(15,18,24,.91);
	box-shadow: 0 17px 50px rgba(0,0,0,.35);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.knot-status-card strong,
.knot-status-card small { display: block; }

.knot-status-card strong {
	color: #dce1e6;
	font-size: 11px;
}

.knot-status-card small {
	margin-top: 2px;
	color: #65707c;
	font-size: 9px;
}

.knot-status-icon {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 1px solid #303842;
	border-radius: 7px;
	background: #11161b;
	color: #65dba6;
	font-size: 12px;
}

.knot-status-card-a {
	right: -24px;
	bottom: 46px;
	animation: knot-float 4.6s ease-in-out infinite;
}

.knot-status-card-b {
	left: -37px;
	top: 54px;
	animation: knot-float 5.1s .7s ease-in-out infinite reverse;
}

.knot-home-footer {
	display: flex;
	align-items: center;
	min-height: 63px;
	border-top: 1px solid rgba(255,255,255,.065);
	color: #596370;
	font-size: 10px;
}

.knot-home-footer-dot {
	width: 3px;
	height: 3px;
	margin: 0 10px;
	border-radius: 50%;
	background: #39414b;
}

.knot-home-footer-spacer { flex: 1; }

.knot-service-state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.knot-service-state i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #46d89d;
	box-shadow: 0 0 0 4px rgba(70,216,157,.06);
}

@keyframes knot-float {
	0%,100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

@media (max-width:1080px) {
	.knot-home-shell {
		width: min(920px,calc(100% - 48px));
	}

	.knot-home-main { padding: 62px 0; }

	.knot-home-hero {
		grid-template-columns: 1fr;
		gap: 68px;
	}

	.knot-home-copy { max-width: 720px; }

	.knot-home-visual {
		width: min(760px,100%);
		margin: 0 auto;
	}

	.knot-status-card-b { left: 24px; }
	.knot-status-card-a { right: 24px; }
}

@media (max-width:680px) {
	.knot-home-shell { width: calc(100% - 30px); }
	.knot-home-nav { height: 66px; }

	.knot-home-brand-mark {
		width: 30px;
		height: 30px;
	}

	.knot-home-nav-actions a { padding-inline: 10px; }

	.knot-home-main {
		padding: 54px 0 46px;
		align-items: flex-start;
	}

	.knot-home-hero { gap: 54px; }

	.knot-home-copy h1 { font-size: clamp(52px,18vw,72px); }

	.knot-home-slogan {
		margin-top: 18px;
		font-size: 18px;
	}

	.knot-home-actions {
		flex-direction: column;
		margin-top: 32px;
	}

	.knot-home-btn { width: 100%; }

	.knot-branch-card { transform: none; }

	.knot-branch-graph {
		min-height: 270px;
		padding: 10px 8px 14px;
		overflow-x: auto;
	}

	.knot-git-svg { min-width: 580px; }

	.knot-status-card { display: none; }

	.knot-home-footer { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.knot-status-card { animation: none !important; }
	.knot-branch-card { transition: none !important; }
}