/* Dark / Light toggle (snippet theme-toggle). Dark tokens live in Global Styles. */
.gln-theme {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 990;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 10px;
	background: #141413;
	color: #f3f1ec;
	font-family: var(--gln-sans, system-ui, sans-serif);
	font-size: .875rem;
	line-height: 1;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(20,20,19,.16);
	transition: opacity .4s var(--gln-ease, ease);
	animation: gln-theme-rise .9s var(--gln-ease, ease) .7s backwards;
}

@keyframes gln-theme-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.gln-theme-knob {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 7px;
	background: #f3f1ec;
	transform: translateX(100%);
	transition: transform .55s var(--gln-ease, ease);
}

.gln-theme[aria-pressed="true"] .gln-theme-knob {
	transform: none;
}

.gln-theme-opt {
	position: relative;
	padding: .75rem 1.05rem;
	text-align: center;
	opacity: .6;
	transition: color .45s var(--gln-ease, ease), opacity .45s var(--gln-ease, ease);
}

.gln-theme:hover .gln-theme-opt {
	opacity: .85;
}

.gln-theme[aria-pressed="false"] .gln-theme-opt:last-child,
.gln-theme[aria-pressed="true"] .gln-theme-opt:nth-child(2) {
	color: #141413;
	opacity: 1;
}

.gln-theme:focus-visible {
	outline: 2px solid var(--gln-accent, #ff3800);
	outline-offset: 3px;
}

html[data-theme="dark"] .gln-theme {
	background: #1c1b19;
	box-shadow: inset 0 0 0 1px rgba(243,241,236,.1);
}

html[data-theme="dark"] .gln-theme[aria-pressed="true"] .gln-theme-opt:nth-child(2) {
	color: #1c1b19;
}

html:has(.gl-header.is-open) .gln-theme {
	opacity: 0;
	pointer-events: none;
}

html.gln-vt::view-transition-old(root),
html.gln-vt::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

@media (max-width: 480px) {
	.gln-theme {
		right: 12px;
		bottom: 12px;
		font-size: .8125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gln-theme {
		animation: none;
	}

	.gln-theme-knob,
	.gln-theme-opt {
		transition: none;
	}
}