.login:has(.sg-demo-login) #login {
	padding-top: 28px;
}

.sg-demo-login {
	box-sizing: border-box;
	width: min(760px, calc(100% - 40px));
	margin: 28px auto 36px;
	color: var(--sg-brand-black, #231f20);
}

.sg-demo-login h2 { margin: 0 0 8px; font-size: 21px; }
.sg-demo-login__intro { margin: 0 0 18px; line-height: 1.6; }
.sg-demo-login__accounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sg-demo-login__account { padding: 20px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 12px; background: #fff; }
.sg-demo-login__role { margin: 0 0 5px; color: var(--sg-brand-brown, #69432b); font-size: 12px; font-weight: 600; }
.sg-demo-login h3 { margin: 0 0 16px; font-size: 18px; }
.sg-demo-login dl { margin: 0 0 18px; }
.sg-demo-login dt { margin-top: 10px; font-size: 12px; }
.sg-demo-login dd { margin: 3px 0 0; }
.sg-demo-login code { display: inline-block; padding: 3px 6px; border-radius: 4px; background: var(--sg-brand-cream, #f7f4ea); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.sg-demo-login .sg-demo-login__use { width: 100%; min-height: 36px; }
.sg-demo-login__use[hidden] { display: none; }
.sg-demo-login__status { margin: 12px 0 0; line-height: 1.5; }
.sg-demo-login__status:empty { display: none; }

@media (min-width: 1100px) {
	body.login:has(.sg-demo-login) {
		display: grid;
		grid-template-columns: 320px 620px;
		justify-content: center;
		align-content: center;
		gap: 64px;
		min-height: 100vh;
		height: auto;
		padding: 36px 24px;
		box-sizing: border-box;
	}
	.login:has(.sg-demo-login) #login { margin: 0; padding: 0; }
	.sg-demo-login { width: 100%; margin: 0; align-self: center; }
}

@media (max-width: 600px) {
	.sg-demo-login__accounts { grid-template-columns: 1fr; }
	.sg-demo-login__account { padding: 18px; }
	.sg-demo-login dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
	.sg-demo-login dt { grid-row: 1; margin-top: 0; }
	.sg-demo-login dd { grid-row: 2; min-width: 0; }
}