/* Root View Transition: JavaScript animates the new snapshot reveal. */
::view-transition-old(root),
::view-transition-new(root) {
	mix-blend-mode:normal;
	animation:none
}
::view-transition-old(root) {
	z-index:1
}
::view-transition-new(root) {
	z-index:9999
}

/* Bidirectional page scroll — dark appearance lives with the dark layer. */
.drK .tTb {
	color:var(--darkT)
}
.drK .tTb circle:first-of-type {
	fill:var(--darkBs);
	stroke:#404045
}
.drK .tTb circle:last-of-type {
	stroke:var(--darkU)
}

/* Change Mode */
.headR .headM {
	display:block;
	position:absolute;
	top:45px;
	right:0;
	padding:10px 0;
	width:150px;
	font-size:13px;
	-webkit-transform:scale(.8);
	transform:scale(.8);
	-webkit-transform-origin:top right;
	transform-origin:top right;
	-webkit-transition:visibility .2s ease, opacity .2s ease, -webkit-transform .2s ease;
	transition:visibility .2s ease, opacity .2s ease, transform .2s ease;
	overflow:hidden;
	z-index:18;
	opacity:0;
	visibility:hidden
}
.headR .headM:before {
	content:attr(data-text);
	display:block;
	padding:0 15px 10px;
	width:100%;
	font-size:11px;
	opacity:.7
}
.headR .headM >* {
	display:block;
	padding:9px 15px;
	width:100%;
	cursor:pointer
}
.headR .headM >*:before {
	content:attr(aria-label);
	opacity:.9
}
.headR .headM >*:hover {
	background:rgba(0,0,0,.05)
}
.navM:checked ~ .mainWrp .headM {
	visibility:visible;
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1)
}
.navM:checked ~ .mainWrp .headM + .fCls {
	visibility:visible;
	opacity:1;
	z-index:17
}
.headR .headM .sydB {
	display:block
}
:root:not(.drK):not(.syD) .bD .headR .headM .lgtB {
	background-color:rgba(0,0,0,.1)
}
.drK:not(.syD) .headR .headM .drkB {
	background-color:rgba(0,0,0,.1)
}
.syD .headR .headM .sydB {
	background-color:rgba(0,0,0,.1)
}
.drK .headR .headM, .drK .cusW, .drK .wTrans {
	background:var(--darkBs);
	border-color:var(--darkBa)
}
.drK .wBkm, .drK .wPrf {
	background:var(--darkBs);
	border-color:var(--darkBa)
}
.Rtl .headR .headM {
	right:auto;
	left:0;
	-webkit-transform-origin:top left;
	transform-origin:top left
}
/* Header appearance icon and system badge; palette selection is independent. */
.modeState {
	position:relative
}
.modeState .d1, .modeState .modeAuto {
	display:none
}
.modeState .d2, .drK .modeState .d1 {
	display:block
}
.drK .modeState .d2 {
	display:none
}
.modeState .modeAuto {
	position:absolute;
	right:0;
	bottom:0;
	width:16px;
	height:16px;
	border-radius:16px;
	align-items:center;
	justify-content:center;
	background:var(--headerB);
	color:var(--linkC);
	font-family:Arial,sans-serif;
	font-size:10px;
	font-weight:400;
	line-height:1;
	z-index:2;
	pointer-events:none
}
.syD .modeState .modeAuto {
	display:flex
}
.drK .modeState .modeAuto {
	background:var(--darkB);
	color:var(--darkU)
}
/* Dark Mode */
.drK body.onIndx .blogPts >*, .drK .rPst, .drK .popularPosts, .drK .categoryWidget {
	background:var(--darkBa)
}
.drK .tDL:not(.modeState) .d2 {
	display:block
}
.drK .tDL::after {
	content:attr(data-light)
}
.drK .tDL:not(.modeState) svg .f {
	stroke:none;
	fill:var(--darkT)
}
.drK .pThmb:not(.nul)::before {
	background-image:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.07) 20%, rgba(0,0,0,.1) 60%, rgba(0,0,0,0))
}
.drK input::placeholder, .drK .cpL input, .drK .cArea label .n {
	color:rgba(255,255,255,.25)
}
.drK .erroC h3 span.e {
	color:var(--darkBa)
}
.drK .nArea .contact-form-error-message-with-border {
	color:#f94f4f
}
.drK .cmC i[rel=image]::before, .drK .widget:not(.contentWidget) input[type=text], .drK .widget:not(.contentWidget) input[type=email], .drK .widget:not(.contentWidget) textarea {
	background:var(--darkBs);
	border-color:rgba(255,255,255,.15)
}
.drK svg, .drK svg.c-1 {
	fill:var(--darkT)
}
.drK svg.line {
	fill:none;
	stroke:var(--darkT)
}
.drK svg.c-2 {
	fill:var(--darkTa);
	opacity:.4
}
.drK .Header .echrahnetLogo::after {
	background:var(--darkU)
}
.drK, .drK body, .drK .headCn, .drK .mnBrs {
	background:var(--darkB);
	color:var(--darkT)
}
.drK .ntfC, .drK .mobMn {
	background:var(--darkBa);
	color:var(--darkTa)
}
.drK .ntfC {
	color:rgba(255,255,255,.9)
}
.drK header, .drK .mnMn >li.br::after, .drK .blogCont::before, .drK .tbHd, .drK .cmHl >li >.cmIn, .drK .pTag .pMart a, .drK .pRelate, .drK blockquote, .drK .cmC i[rel=quote], .drK blockquote.s-1, .drK details.sp, .drK .ps table:not(.tr-caption-container), .drK .ps table th, .drK .ps table:not(.tr-caption-container) tr:not(:last-child) td, .drK .pre.tb .preH, .drK details.ac, .drK .mnMob {
	border-color:rgba(255,255,255,.15)
}
.drK .pre {
	background:var(--darkBs);
	color:var(--darkT)
}
.drK .footer {
	background:var(--darkBs)
}
.drK .footerSocialLink {
	background:var(--darkBa);
	border-color:#404045;
	color:var(--darkT)
}
.drK a.footerSocialLink:hover {
	background:var(--darkB)
}
.drK .mnMn li:not(.mr) .a:hover, .drK .mnMn ul li >*:hover, .drK .wL.bg li >*, .drK .mobMn li >*:hover {
	background:rgba(0,0,0,.15)
}
.drK .tIc::after {
	background:var(--darkBs)
}
.drK header a, .drK h1, .drK h2, .drK h3, .drK h4, .drK h5, .drK h6, .drK footer, .drK .button {
	color:var(--darkT)
}
.drK .dlBox, .drK .fixLs, .drK .cArea input:focus ~ .n, .drK .cArea textarea:focus ~ .n, .drK .cArea input[data-text=fl] ~ .n, .drK .cArea textarea[data-text=fl] ~ .n {
	background:var(--darkBs)
}
.drK .tocLi {
	background:var(--darkB)
}
.drK .tocC span, .drK .searchWidget input, .drK .cmHl >li >.cmIn {
	background:var(--darkBa)
}
.drK .tocC span::before {
	background:var(--darkBa)
}
.drK .tocC span::after {
	background:var(--darkU)
}
.drK .tocL svg.rad {
	fill:var(--darkBa)
}
.drK .mobMn li >*:hover svg.line {
	fill:var(--darkT) !important
}
.drK .mobMn li >*:hover svg.line .svgC {
	fill:var(--darkU) !important;
	stroke:var(--darkU)
}
.drK body.mobS .mobMn li >*:hover, .drK .button.ln {
	background:transparent
}
.drK .pTag .pPric::before, .drK .pTag .pInfo small {
	color:var(--darkTa)
}
.drK::selection, .drK a, .drK .free::after, .drK .new::after, .drK .mnMn li:not(.mr) .a:hover, .drK .mnMn ul li a:hover, .drK .aTtl a:hover, .drK .pSnpt.nTag, .drK .pTag .pPric, .drK details.ac[open] summary, .drK .cpL #copyPostLink, .drK .wL li >*:hover .lbC, .drK .wL li >div .lbC, .drK .wL .lbM, .drK .cmBtn.ln:hover, .drK .wL.cl .lbN:hover .lbC, .drK .wL.cl div.lbN .lbC {
	color:var(--darkU)
}
.drK .mnMn .a:hover svg:not(.d) {
	fill:var(--darkU)
}
.drK .mnMn .a:hover svg.line:not(.d), .drK .pJmp svg {
	fill:none;
	stroke:var(--darkU)
}
.drK .wL li >*:hover svg, .drK .wL li >div svg {
	stroke:var(--darkU)
}
.drK body.MN-3 .mobMn li >*:hover::after, .drK body.MN-4 .mobMn li >*:hover::after, .drK .blogPg >*, .drK .button, .drK .zmImg > .zmClose, .drK .widget:not(.contentWidget) input[type=button], .drK .widget:not(.contentWidget) input[type=submit] {
	background:var(--darkU)
}
.drK body.MN-3 .mobMn li >*:hover svg.line, .drK body.MN-4 .mobMn li >*:hover svg.line {
	stroke:var(--darkU);
	fill:var(--darkU) !important
}
.drK body.MN-3 .mobMn li >*:hover svg .f, .drK body.MN-4 .mobMn li >*:hover svg .f, .drK footer .credit a svg {
	fill:var(--darkU)
}
.drK .pS input[id*="1"]:checked ~ .tbHd label[for*="1"], .drK .pS input[id*="2"]:checked ~ .tbHd label[for*="2"], .drK .pS input[id*="3"]:checked ~ .tbHd label[for*="3"], .drK .pS input[id*="4"]:checked ~ .tbHd label[for*="4"], .drK .widget:not(.contentWidget) input[type=text]:focus, .drK .widget:not(.contentWidget) input[type=email]:focus, .drK .widget:not(.contentWidget) textarea:focus, .drK .widget:not(.contentWidget) input[data-text=fl], .drK .widget:not(.contentWidget) textarea[data-text=fl], .drK .wL.cl .lbN:not(div):hover, .drK .wL.cl div.lbN {
	border-color:var(--darkU)
}
.drK .button.ln:hover {
	border-color:var(--darkU);
	box-shadow:0 0 0 1px var(--darkU) inset
}
.drK .mnBr a, .drK .pLbls >*, .drK .aTtl a, .drK .blogPg >*, .drK .brdCmb a, .drK .wL li >*, .drK .mobMn li >*, .drK .cmAc a {
	color:var(--darkT)
}
.drK .blogPg .nPst, .drK .blogPg .current {
	background:var(--contentL);
	color:var(--bodyCa)
}
.drK .featuredPost .itemFt::after {
	background:var(--darkTa)
}
@media screen and (min-width:897px) {
	.drK header .searchWidget input {
		background:var(--darkBs)
	}
	.drK header .searchWidget input:focus, .drK header .searchWidget input:hover {
		background:var(--darkBa)
	}
	.drK body.bD:not(.hdMn) .navI:checked ~ .mainWrp .mnMn .n, .drK body.bD:not(.hdMn) .navI:checked ~ .mainWrp .mnMn li:not(.mr) ul, .drK body.hdMn .navI:not(:checked) ~ .mainWrp .mnMn .n, .drK body.hdMn .navI:not(:checked) ~ .mainWrp .mnMn li:not(.mr) ul {
		background:var(--darkBa);
		box-shadow:0 10px 40px rgba(0,0,0,.2);
		color:var(--darkTa)
	}
	.drK body.LS-2 .blogCont::before {
		background:var(--darkBs)
	}
	.drK body.LS-3 .headCn {
		background:transparent
	}
	.drK body.LS-3 .headL, .drK body.LS-3 .mnBrs {
		background:var(--darkBs)
	}
	.drK body.LS-3 .headR {
		background:var(--darkB)
	}
	.drK .tocLi::before {
		border-color:rgba(255,255,255,.15)
	}

}
@media screen and (min-width:897px) {
	.drK header {
		border-bottom:var(--headerL) solid rgba(255,255,255,.15);
		box-shadow:none
	}
	.drK .blogCont::before {
		border-right:1px solid rgba(255,255,255,.15)
	}
	.drK .mnBrs {
		box-shadow:none
	}

}
@media screen and (min-width:641px) {
	.drK .ftMn a:hover {
		color:var(--darkU)
	}

}
@media screen and (max-width:640px) {
	.drK .ftMn {
		background:var(--darkBa)
	}

}
@media screen and (max-width:500px) {
	.drK .itemFt .itm .iCtnt {
		background:var(--darkBa)
	}

}

/* Comment reply: keep the cancel action aligned with the dark-mode text palette. */
.drK .cm #cancel-comment-reply-link {
	color:var(--darkT)
}
.drK .cm #cancel-comment-reply-link:hover {
	color:var(--darkU)
}