.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 4rem;
}

.nav::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100% + 3rem);
	pointer-events: none;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: linear-gradient(to bottom,
			color-mix(in srgb, var(--bg) 92%, transparent) 0%,
			color-mix(in srgb, var(--bg) 62%, transparent) 45%,
			transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
	opacity: 0;
	transition: opacity var(--norm) var(--ease-out);
}

.nav.stuck::before,
html[data-theme="Light"] .nav::before {
	opacity: 1;
}

.navInner {
	position: relative;
	z-index: 1;
	max-width: var(--wrap);
	height: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.brand {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.brand .tilde {
	color: var(--fg-dim);
}

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

.brand .scramble span {
	display: inline-block;
	min-width: 0.6em;
	text-align: center;
}

.navLinks {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
	padding-right: 0.75rem;
}

.navLinks a {
	position: relative;
	font-size: 12.5px;
	color: var(--fg-muted);
	transition: color var(--fast) var(--ease);
}

.navLinks a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--norm) var(--ease);
}

.navLinks a:hover {
	color: var(--fg);
}

.navLinks a:hover::after {
	width: 100%;
}

.navActions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.iconBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--r-md);
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--fg-muted);
	transition:
		color var(--fast) var(--ease),
		border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		transform var(--fast) var(--ease);
}

.iconBtn:hover {
	color: var(--fg);
	border-color: var(--border-strong);
	background: var(--card-hover);
}

.iconBtn:active {
	transform: scale(0.94);
}

.iconBtn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.themeBtn {
	margin-left: auto;
}

.navLinks + .navActions .themeBtn {
	margin-left: 0;
}

.ttIcon g circle,
.ttIcon g path {
	transform-origin: center;
	transition: transform 325ms var(--ease-out) 175ms;
}

.ttIcon :first-child path {
	transition-property: transform, d;
	transition-duration: 300ms;
	transition-timing-function: var(--ease-out);
}

html[data-theme="Dark"] .ttIcon g circle {
	transform: scale(1.4);
	transition-delay: 0s;
}

html[data-theme="Dark"] .ttIcon g path {
	transform: scale(0.75);
	transition-delay: 0s;
}

html[data-theme="Dark"] .ttIcon :first-child path {
	d: path("M-14-3h25a10.7 10.7 0 1 0 17 13v30H-5z");
	transition-delay: 200ms;
}

@supports not (d: path("")) {
	html[data-theme="Dark"] .ttIcon :first-child path {
		transform: translate3d(-14px, 8px, 0);
	}
}

.menuBtn {
	display: none;
}

.menuBar {
	display: block;
	width: 1rem;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--norm) var(--ease), opacity var(--fast) var(--ease);
}

.menuBar + .menuBar {
	margin-top: 4px;
}

.nav.menuOpen .menuBar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.nav.menuOpen .menuBar:nth-child(2) {
	opacity: 0;
}

.nav.menuOpen .menuBar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

.mobileMenu {
	position: absolute;
	z-index: 2;
	top: calc(100% - 0.5rem);
	left: 1.5rem;
	right: 1.5rem;
	max-width: calc(var(--wrap) - 3rem);
	margin: 0 auto;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(18px) saturate(1.1);
	-webkit-backdrop-filter: blur(18px) saturate(1.1);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8);
	padding: 0.25rem 1.1rem 0.4rem;
	display: none;
	flex-direction: column;
}

.nav.menuOpen .mobileMenu {
	display: flex;
	animation: menuIn var(--norm) var(--ease);
}

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

.mobileMenu a {
	padding: 0.7rem 0;
	font-size: 14px;
	color: var(--fg-muted);
	border-bottom: 1px solid var(--border);
	transition: color var(--fast) var(--ease);
}

.mobileMenu a:last-child {
	border-bottom: none;
}

.mobileMenu a:hover {
	color: var(--fg);
}

@media (max-width: 720px) {
	.navLinks {
		display: none;
	}

	.navActions {
		margin-left: auto;
	}

	.menuBtn {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}