body.login {
	position: relative;
	min-height: 100dvh;
	box-sizing: border-box;
	margin: 0;
	background:
		radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--connect-primary) 24%, transparent), transparent 27%),
		radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--connect-secondary) 16%, transparent), transparent 30%),
		linear-gradient(rgba(2, 8, 6, .36), rgba(2, 8, 6, .58)),
		var(--connect-login-background-image, none) center / cover fixed no-repeat,
		#eef1ef;
	color: #f6f8f7;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

.connect-login-background-video {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #07110d;
}

body.login::before {
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 86%);
	pointer-events: none;
	content: "";
}

body.login::after {
	position: fixed;
	width: min(52vw, 620px);
	aspect-ratio: 1;
	top: -34vw;
	right: -18vw;
	border: 1px solid color-mix(in srgb, var(--connect-primary) 22%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 110px color-mix(in srgb, var(--connect-primary) 12%, transparent);
	pointer-events: none;
	content: "";
}

#login {
	position: relative;
	z-index: 1;
	width: min(520px, calc(100% - 32px));
	box-sizing: border-box;
	margin-top:clamp(18px,5vh,54px);
	margin-bottom:clamp(18px,5vh,54px);
	padding:clamp(30px,5vw,48px);
	border:1px solid rgba(255,255,255,.2);
	border-radius:42px;
	background:
		radial-gradient(circle at 16% 4%, color-mix(in srgb,var(--connect-primary) 16%,transparent), transparent 34%),
		linear-gradient(145deg,rgba(7,20,16,.72),rgba(3,8,7,.62));
	-webkit-backdrop-filter:blur(26px) saturate(145%);
	backdrop-filter:blur(26px) saturate(145%);
	box-shadow:0 34px 100px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.035);
}

.login h1 { margin:0 0 42px;text-align:left }
.login h1 a {
	width: 100%;
	height: 58px;
	margin: 0;
	background-position: left center;
	background-size: contain;
}

.connect-login-intro { margin:0 0 26px }
.connect-login-intro h2 { margin:0;color:#fff;font-size:clamp(30px,8vw,42px);font-weight:750;letter-spacing:-.035em;line-height:1.05 }
.connect-login-intro p { margin:10px 0 0;color:rgba(255,255,255,.62);font-size:15px;line-height:1.55 }

body.login #login form {
	box-sizing: border-box;
	margin: 0;
	padding:0!important;
	border:0!important;
	background:transparent!important;
	box-shadow:none!important;
}

.login label { color: rgba(255,255,255,.78);font-size: 12px;font-weight: 650;letter-spacing: .02em }
.login form .input,.login input[type="text"] {
	min-height: 50px;
	box-sizing: border-box;
	margin: 6px 0 15px;
	padding: 0 16px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	background:#1b1d1c;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
	color: #fff;
	font-size: 16px;
}
.login form .input:focus,.login input[type="text"]:focus {
	border-color: var(--connect-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--connect-primary) 18%, transparent);
}
.login .button.wp-hide-pw { color:var(--connect-primary) }
.login .forgetmenot { display:flex;min-height:40px;align-items:center;margin:2px 0 16px }
.login .forgetmenot label { color:rgba(255,255,255,.72) }
.login input[type="checkbox"] { border-color:rgba(255,255,255,.3);border-radius:5px;background:rgba(0,0,0,.28) }
.login input[type="checkbox"]:checked::before { filter:hue-rotate(115deg) saturate(1.5) }
.wp-core-ui .button-primary {
	width:100%;
	min-height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--connect-primary);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--connect-primary) 24%, transparent);
	color: var(--connect-primary-contrast);
	font-weight: 750;
}
.wp-core-ui .button-primary:hover,.wp-core-ui .button-primary:focus { background:var(--connect-primary);filter:brightness(1.08);color:var(--connect-primary-contrast) }
.login #nav,.login #backtoblog { margin:20px 0 0;padding:0;text-align:center }
.login #backtoblog { margin-top:10px }
.login #nav a,.login #backtoblog a,.login .privacy-policy-page-link a { color:rgba(255,255,255,.62);text-decoration:none }
.login #nav a:hover,.login #backtoblog a:hover,.login .privacy-policy-page-link a:hover { color:var(--connect-primary) }
.login .message,.login .notice,.login #login_error { border:1px solid rgba(255,255,255,.13);border-left:4px solid var(--connect-primary);border-radius:14px;background:rgba(8,12,10,.78);box-shadow:none;color:#fff }

@media (max-width: 480px) {
	body.login { display:block;box-sizing:border-box;padding:12px;background-color:#050606 }
	body.login #login { width:100%;min-height:0;height:auto;margin:0 auto;padding:26px 20px;border:1px solid rgba(255,255,255,.2);border-radius:28px;box-shadow:0 22px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12) }
	.login h1 { margin-bottom:28px }
	.login h1 a { height:42px }
	.connect-login-intro { margin-bottom:20px }
	.connect-login-intro h2 { font-size:30px }
	.connect-login-intro p { margin-top:7px;font-size:14px }
	.login form .input,.login input[type="text"] { min-height:48px;padding:0 15px }
	.login .forgetmenot { float:none;margin-bottom:12px }
	.login form .submit { display:flex;float:none;clear:both;width:100% }
	.wp-core-ui .button-primary { min-height:48px }
	.login #nav,.login #backtoblog { margin-top:16px }
}

@media (prefers-reduced-motion: no-preference) {
	.login form { animation:connect-login-in .55s cubic-bezier(.2,.75,.25,1) both }
	@keyframes connect-login-in { from { opacity:0;transform:translateY(16px) scale(.985) } to { opacity:1;transform:none } }
}