/* Loaded before the theme's styles, so every rule relies on the html[data-theme] prefix to win. */

.darkmode-corner {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 999;
}

.darkmode-inline {
	display: block;
	margin-top: -.75rem !important;
}

.darkmode-toggle {
	box-sizing: border-box;
	width: 4rem;
	height: 2.25rem;
	margin: 0;
	padding: .1875rem;
	border: 1px solid #bbb;
	border-radius: 1.125rem;
	background: #e4e7ea;
	color: #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.darkmode-knob {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #fff;
	color: #b86e00;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: transform .2s ease;
}

.darkmode-toggle[aria-checked="true"] .darkmode-knob {
	transform: translateX(1.75rem);
}

.darkmode-toggle:focus-visible {
	outline: 2px solid #0f6e6b;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.darkmode-knob {
		transition: none;
	}
}

@media print {
	.darkmode-toggle {
		display: none;
	}
}

@media screen {
	html[data-theme="dark"] {
		color-scheme: dark;
	}

	html[data-theme="dark"] body {
		background: #0e1113;
		color: #dcdfe3;
	}

	html[data-theme="dark"] main,
	html[data-theme="dark"] footer,
	html[data-theme="dark"] button.expander,
	html[data-theme="dark"] .notice4,
	html[data-theme="dark"] .landingpageintro,
	html[data-theme="dark"] .landingpageinfo,
	html[data-theme="dark"] .landingpageteaser,
	html[data-theme="dark"] .landingpagenavi,
	html[data-theme="dark"] .landingpagenews {
		background: #181b1e;
		color: #dcdfe3;
		border-color: #3a3f45;
	}

	html[data-theme="dark"] .notice4 {
		box-shadow: 0 -100px 80px 0 #181b1e;
	}

	html[data-theme="dark"] .logo a {
		color: #f0f2f4;
	}

	html[data-theme="dark"] main a,
	html[data-theme="dark"] main a:before,
	html[data-theme="dark"] footer a {
		color: #5fd4cf;
	}

	html[data-theme="dark"] .navigation,
	html[data-theme="dark"] .navigation a,
	html[data-theme="dark"] .navigation a:hover,
	html[data-theme="dark"] .navigation a:focus,
	html[data-theme="dark"] thead {
		background: #0f6e6b;
		border-color: #0f6e6b;
		color: #fff;
	}

	html[data-theme="dark"] .mainnavigation a:hover,
	html[data-theme="dark"] .mainnavigation a:focus,
	html[data-theme="dark"] .mainnavigation a:active,
	html[data-theme="dark"] .mainnavigation .active > a:first-child {
		background: #0f6e6b;
		color: #fff;
	}

	html[data-theme="dark"] .mainnavigation li,
	html[data-theme="dark"] tr,
	html[data-theme="dark"] hr,
	html[data-theme="dark"] .TOC {
		border-color: #3a3f45;
	}

	html[data-theme="dark"] .TOC li a {
		border-color: #5fd4cf;
	}

	html[data-theme="dark"] article pre,
	html[data-theme="dark"] article code {
		background: #26292d;
		color: #e6e6e6;
	}

	html[data-theme="dark"] .notice1 {
		background-color: #3d211b;
		color: #f3dcd6;
	}

	html[data-theme="dark"] .notice2 {
		background-color: #3a2f14;
		color: #f3e8cc;
	}

	html[data-theme="dark"] .notice3 {
		background-color: #1d2a4a;
		color: #d9e2f8;
	}

	html[data-theme="dark"] .newsbox,
	html[data-theme="dark"] .newsbox a,
	html[data-theme="dark"] .landingpagenews li,
	html[data-theme="dark"] .landingpagenews li a {
		background: #202427;
		color: #dcdfe3;
	}

	html[data-theme="dark"] form label {
		color: #dcdfe3;
	}

	html[data-theme="dark"] form input,
	html[data-theme="dark"] form textarea,
	html[data-theme="dark"] form select {
		background: #202427;
		border-color: #3a3f45;
		color: #e6e6e6;
	}

	html[data-theme="dark"] .darkmode-toggle {
		background: #0f6e6b;
		border-color: #4a5057;
	}

	html[data-theme="dark"] .darkmode-knob {
		background: #181b1e;
		color: #f0f2f4;
	}

	html[data-theme="dark"] .darkmode-toggle:focus-visible {
		outline-color: #5fd4cf;
	}
}