body.login {
	--kp-page-bg: #070816;
	--kp-panel: #0d1027;
	--kp-text: #f7f7ff;
	--kp-muted: #afb4cf;
	--kp-soft: #8289aa;
	--kp-border: rgba(164, 173, 255, .18);
	--kp-violet: #a98bff;
	--kp-violet-bright: #c2adff;
	--kp-cyan: #6fe0ff;
	box-sizing: border-box;
	display: grid;
	min-height: 100vh;
	min-height: 100dvh;
	place-items: center;
	padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
	margin: 0;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 14% 0%, rgba(111, 224, 255, .14), transparent 34rem),
		radial-gradient(circle at 84% 5%, rgba(169, 139, 255, .22), transparent 38rem),
		radial-gradient(circle at 58% 100%, rgba(255, 140, 158, .11), transparent 42rem),
		linear-gradient(145deg, #070816 0%, #0a0d20 45%, #080917 100%);
	color: var(--kp-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.login *, body.login *::before, body.login *::after { box-sizing: border-box; }
body.login::before,
body.login::after { position: fixed; inset: 0; z-index: 0; content: ''; pointer-events: none; }
body.login::before {
	opacity: .5;
	background-image:
		radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .9) 0 1px, transparent 1.7px),
		radial-gradient(circle at 72% 15%, rgba(255, 255, 255, .72) 0 1px, transparent 1.6px),
		radial-gradient(circle at 42% 67%, rgba(255, 255, 255, .55) 0 1px, transparent 1.4px),
		radial-gradient(circle at 90% 76%, rgba(255, 255, 255, .68) 0 1px, transparent 1.5px),
		radial-gradient(circle at 23% 88%, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px);
	background-size: 19rem 19rem, 26rem 26rem, 23rem 23rem, 31rem 31rem, 28rem 28rem;
}
body.login::after { background: linear-gradient(112deg, transparent 9%, rgba(111, 224, 255, .035) 36%, transparent 62%), linear-gradient(35deg, transparent 25%, rgba(169, 139, 255, .04) 48%, transparent 72%); filter: blur(18px); }

body.login #login {
	position: relative;
	z-index: 1;
	display: grid;
	width: min(940px, 100%);
	min-height: 560px;
	grid-template-columns: .92fr 1.08fr;
	align-items: start;
	padding: 0 0 24px;
	overflow: hidden;
	border: 1px solid rgba(174, 152, 255, .34);
	border-radius: 28px;
	background: radial-gradient(circle at 100% 0%, rgba(169, 139, 255, .1), transparent 21rem), var(--kp-panel);
	box-shadow: 0 45px 120px rgba(0, 0, 0, .62), 0 0 80px rgba(115, 94, 255, .13);
}
body.login #login > :not(h1):not(.soh-native-login-visual):not(.soh-login-brief) { grid-column: 2; }

body.login #login > h1 {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 20;
	margin: 0;
}
body.login #login > h1 a {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 50%;
	background: rgba(8, 10, 25, .7) !important;
	box-shadow: none;
	color: #e8e9f8;
	font-size: 0;
	text-decoration: none;
	text-indent: 0;
}
body.login #login > h1 a::before { content: '×'; font-size: 1.2rem; line-height: 1; }
body.login #login > h1 a:hover { border-color: rgba(111, 224, 255, .42); background: rgba(26, 30, 66, .94) !important; color: #fff; }

body.login .soh-native-login-visual,
body.login .soh-login-brief {
	position: relative;
	grid-row: 1 / span 20;
	grid-column: 1;
	align-self: stretch;
	width: auto;
	min-height: 560px;
	padding: 58px;
	overflow: hidden;
	border-right: 1px solid rgba(177, 184, 255, .12);
	background:
		radial-gradient(circle at 48% 44%, rgba(111, 224, 255, .22), transparent 16rem),
		radial-gradient(circle at 12% 8%, rgba(169, 139, 255, .32), transparent 24rem),
		linear-gradient(148deg, #17133b 0%, #0a1730 55%, #09101f 100%);
	box-shadow: none;
	color: var(--kp-text);
}
body.login .soh-native-login-visual::before,
body.login .soh-native-login-visual::after,
body.login .soh-login-brief::before,
body.login .soh-login-brief::after { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(185, 174, 255, .26); border-radius: 50%; content: ''; }
body.login .soh-native-login-visual::before,
body.login .soh-login-brief::before { width: 330px; height: 330px; box-shadow: 0 0 46px rgba(169, 139, 255, .12), inset 0 0 36px rgba(111, 224, 255, .05); transform: translate(-50%, -42%) rotate(-18deg); }
body.login .soh-native-login-visual::after,
body.login .soh-login-brief::after { width: 235px; height: 235px; border-color: rgba(111, 224, 255, .24); transform: translate(-50%, -42%) rotate(24deg); }
body.login .soh-native-orbit-dot { position: absolute; top: calc(50% - 142px); left: calc(50% + 78px); z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--kp-cyan); box-shadow: 0 0 22px rgba(111, 224, 255, .95); }
body.login .soh-native-orbit-core { position: absolute; top: 50%; left: 50%; z-index: 2; width: 94px; height: 94px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f9f7ff 0 5%, #c1adff 16%, #7658e7 43%, #16133f 72%); box-shadow: 0 0 35px rgba(169, 139, 255, .58), 0 0 100px rgba(111, 224, 255, .15); transform: translate(-50%, -42%); }
body.login .soh-native-login-visual__copy { position: relative; z-index: 3; display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; }
body.login .soh-native-login-visual__label,
body.login .soh-login-brief__eyebrow { margin: 0; color: var(--kp-cyan); font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
body.login .soh-native-login-visual__footer { max-width: 300px; }
body.login .soh-native-login-visual__footer h2,
body.login .soh-login-brief h2 { position: relative; z-index: 3; margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
body.login .soh-native-login-visual__footer p,
body.login .soh-login-brief > p:not(.soh-login-brief__eyebrow) { position: relative; z-index: 3; margin: 16px 0 0; color: #bdc4df; font-size: .96rem; }
body.login .soh-login-brief__status { display: none; }

body.login .soh-native-login-intro {
	padding: 68px 70px 0;
}
body.login .soh-native-login-intro__eyebrow { margin: 0 0 12px; color: var(--kp-violet-bright); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.login .soh-native-login-intro h2 { margin: 0; color: var(--kp-text); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.05rem, 4vw, 3.3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
body.login .soh-native-login-intro > p:last-child { margin: 15px 0 0; color: var(--kp-muted); font-size: .98rem; }

body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #registerform {
	width: auto;
	padding: 24px 70px 12px;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--kp-text);
}
body.login form p { margin: 0 0 18px; }
body.login form label { color: #dfe2f4; font-size: .82rem; font-weight: 730; }
body.login form .input,
body.login input[type='text'],
body.login input[type='password'],
body.login input[type='email'] {
	width: 100%;
	min-height: 52px;
	padding: 13px 15px;
	border: 1px solid rgba(176, 184, 233, .18);
	border-radius: 13px;
	background: rgba(255, 255, 255, .045);
	box-shadow: none;
	color: var(--kp-text);
	font-size: 1rem;
	caret-color: var(--kp-cyan);
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
body.login form .input::placeholder,
body.login input::placeholder { color: var(--kp-soft); }
body.login form .input:hover,
body.login form .input:focus,
body.login input[type='text']:hover,
body.login input[type='text']:focus,
body.login input[type='password']:hover,
body.login input[type='password']:focus { border-color: rgba(111, 224, 255, .44); outline: none; background: rgba(255, 255, 255, .065); box-shadow: 0 0 0 4px rgba(111, 224, 255, .055); }
body.login .wp-pwd { position: relative; }
body.login .wp-pwd .input { padding-right: 54px; }
body.login .wp-pwd .button { position: absolute; top: 50%; right: 7px; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--kp-violet-bright); transform: translateY(-50%); }
body.login .wp-pwd .button:hover { color: var(--kp-cyan); }
body.login .forgetmenot { display: flex; min-height: 44px; align-items: center; }
body.login .forgetmenot label { display: inline-flex; align-items: center; gap: 8px; color: var(--kp-soft); font-size: .82rem; font-weight: 500; }
body.login .forgetmenot input { width: 16px; height: 16px; margin: 0; border-color: rgba(176, 184, 233, .35); background: rgba(255, 255, 255, .05); box-shadow: none; accent-color: var(--kp-violet); }
body.login .submit { margin-top: 3px; }
body.login .button-primary,
body.login #wp-submit {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: 13px;
	background: linear-gradient(105deg, #8166ed, #5b8eea 56%, #49c9e9);
	box-shadow: 0 15px 30px rgba(91, 102, 232, .22), inset 0 1px rgba(255, 255, 255, .28);
	color: var(--kp-page-bg);
	font-weight: 850;
	text-shadow: none;
	transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
body.login .button-primary:hover,
body.login #wp-submit:hover { border: 0; background: linear-gradient(105deg, #8c72f7, #68a0f5 56%, #59d5ef); color: var(--kp-page-bg); filter: brightness(1.05); box-shadow: 0 19px 36px rgba(91, 102, 232, .3), inset 0 1px rgba(255, 255, 255, .3); transform: translateY(-2px); }

body.login .message,
body.login .success,
body.login #login_error {
	margin: 16px 70px 0;
	padding: 12px 14px;
	border: 1px solid rgba(111, 224, 255, .26);
	border-left: 3px solid var(--kp-cyan);
	border-radius: 10px;
	background: rgba(111, 224, 255, .055);
	box-shadow: none;
	color: #dfe2f4;
	font-size: .84rem;
}
body.login #login_error { border-color: rgba(255, 140, 158, .3); border-left-color: #ff8c9e; background: rgba(255, 140, 158, .06); }
body.login .message a,
body.login #login_error a { color: var(--kp-cyan); }
body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link { padding: 0 70px; margin: 8px 0 0; color: var(--kp-soft); font-size: .82rem; text-align: left; }
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a { display: inline-flex; min-height: 44px; align-items: center; color: #c9bdff; text-decoration: none; }
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover { color: var(--kp-cyan); }

body.login .jetpack-sso-wrap,
body.login #jetpack-sso-wrap,
body.login.jetpack-sso-form-display #jetpack-sso-wrap {
	display: block !important;
	position: relative;
	bottom: auto;
	width: auto;
	padding: 14px 0 0;
	margin: 0 0 6px;
	border: 0;
	background: transparent;
	box-shadow: none;
	clear: both;
}
body.login #jetpack-sso-wrap::before { display: block; margin: 0 0 9px; color: var(--kp-soft); content: 'Owner access'; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
body.login #loginform #jetpack-sso-wrap p,
body.login #jetpack-sso-wrap__user h2 { color: #dfe2f4; }
body.login #jetpack-sso-wrap .jetpack-sso-or::before { background: rgba(176, 184, 233, .2); }
body.login #jetpack-sso-wrap .jetpack-sso-or span { background: var(--kp-panel); color: var(--kp-muted); }
body.login #jetpack-sso-wrap a,
body.login .jetpack-sso-wrap a {
	width: 100%;
	min-height: 48px;
	padding: 11px 15px;
	border: 1px solid rgba(169, 139, 255, .42);
	border-radius: 13px;
	background: rgba(169, 139, 255, .08);
	box-shadow: none;
	color: #eee9ff;
	font-size: .88rem;
	font-weight: 780;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
}
body.login #jetpack-sso-wrap a:hover,
body.login .jetpack-sso-wrap a:hover { border-color: rgba(111, 224, 255, .58); background: rgba(111, 224, 255, .08); color: #fff; }
body.login .language-switcher { position: relative; z-index: 2; margin: 16px 0 0; color: var(--kp-muted); }
body.login .language-switcher select { min-height: 44px; border-color: var(--kp-border); border-radius: 10px; background: var(--kp-panel); color: var(--kp-text); }

body.login a:focus-visible,
body.login button:focus-visible,
body.login input:focus-visible,
body.login select:focus-visible { outline: 3px solid var(--kp-cyan); outline-offset: 4px; box-shadow: none; }

@media (max-width: 820px) {
	body.login { display: block; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
	body.login #login { display: block; width: min(620px, 100%); min-height: 0; padding: 0 0 24px; margin: 0 auto; border-radius: 22px; }
	body.login .soh-native-login-visual,
	body.login .soh-login-brief { position: relative; top: auto; bottom: auto; left: auto; width: 100%; min-height: 270px; padding: 34px; border-right: 0; border-bottom: 1px solid rgba(177, 184, 255, .12); }
	body.login .soh-native-login-visual::before,
	body.login .soh-login-brief::before { width: 235px; height: 235px; }
	body.login .soh-native-login-visual::after,
	body.login .soh-login-brief::after { width: 165px; height: 165px; }
	body.login .soh-native-orbit-core { width: 70px; height: 70px; }
	body.login .soh-native-orbit-dot { top: calc(50% - 100px); left: calc(50% + 55px); }
	body.login .soh-native-login-visual__footer { max-width: 420px; }
	body.login .soh-native-login-visual__footer h2,
	body.login .soh-login-brief h2 { font-size: 2.25rem; }
	body.login .soh-native-login-intro { padding: 44px 38px 0; }
	body.login #loginform,
	body.login #lostpasswordform,
	body.login #resetpassform,
	body.login #registerform { padding: 24px 38px 12px; }
	body.login .message,
	body.login .success,
	body.login #login_error { margin-inline: 38px; }
	body.login #nav,
	body.login #backtoblog,
	body.login .privacy-policy-page-link { padding-inline: 38px; }
}

@media (max-width: 480px) {
	body.login #login > h1 { top: 12px; right: 12px; }
	body.login .soh-native-login-visual,
	body.login .soh-login-brief { min-height: 230px; padding: 30px 24px; }
	body.login .soh-native-login-intro { padding: 36px 24px 0; }
	body.login #loginform,
	body.login #lostpasswordform,
	body.login #resetpassform,
	body.login #registerform { padding: 22px 24px 10px; }
	body.login .message,
	body.login .success,
	body.login #login_error { margin-inline: 24px; }
	body.login #nav,
	body.login #backtoblog,
	body.login .privacy-policy-page-link { padding-inline: 24px; }
}

@media (max-width: 340px) {
	body.login { padding-inline: 4px; }
	body.login #login { border-radius: 18px; }
	body.login .soh-native-login-intro,
	body.login #loginform,
	body.login #lostpasswordform,
	body.login #resetpassform,
	body.login #registerform { padding-inline: 18px; }
	body.login .message,
	body.login .success,
	body.login #login_error { margin-inline: 18px; }
	body.login #nav,
	body.login #backtoblog,
	body.login .privacy-policy-page-link { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	body.login *, body.login *::before, body.login *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}