@font-face{font-family:DemoMarker;src:url('assets/demo-handwriting.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
body.login{background:#fff}
body.login #login{position:relative;padding-top:5vh;width:min(380px,calc(100% - 40px));overflow:visible}
.demo-public-access{text-align:center;font-size:14px;line-height:1.55;color:#50575e;margin:20px 0 24px}
.demo-public-access strong{color:#1d2327}
.demo-marker-note{font-family:DemoMarker,'Comic Sans MS',cursive;font-weight:650;color:#1759b5;font-size:28px;line-height:1.2;text-align:left;box-sizing:border-box}
.demo-marker-note p{margin:0 0 18px}
.demo-marker-note .demo-marker-heading{font-size:34px;line-height:1.08;font-weight:700}
.demo-marker-note .demo-marker-prompt{font-size:30px;font-weight:700}
.demo-marker-left{position:absolute;top:255px;right:calc(100% + 46px);width:290px;transform:rotate(-4deg)}
.demo-marker-right{position:absolute;top:244px;left:calc(100% + 58px);width:285px;transform:rotate(3deg)}
.demo-marker-arrow{display:block;width:270px;height:148px;margin:-1px 0 0 72px;overflow:visible}
.demo-marker-arrow path,.demo-marker-hearts path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.demo-marker-hearts{width:145px;height:66px;margin:0 0 12px 24px}
.demo-marker-note .demo-marker-signoff{font-size:26px;margin-top:23px}
.login form .demo-credentials{margin:-1px 0 22px;padding:12px 0 10px;border-top:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed;font-size:13px}
.demo-credentials>div{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px}
.demo-credentials strong{color:#1d2327;user-select:all}
.demo-copy{font:inherit;font-size:12px;line-height:1.3;color:#1759b5;background:#fff;border:1px solid #c8d6eb;border-radius:4px;padding:7px 10px;min-width:68px;cursor:pointer}
.demo-copy:hover{background:#eef4fc;border-color:#1759b5}
.demo-copy:focus-visible{outline:2px solid #1759b5;outline-offset:3px}
.login form{margin-top:0}
@media(min-width:1120px){.demo-marker-left .demo-marker-arrow{transform:rotate(-7deg)}}
@media(max-width:1119px){
 body.login #login{padding-top:26px}
 .demo-marker-left{position:relative;top:auto;right:auto;width:100%;padding:12px 7px 0;transform:rotate(-2deg);margin:22px 0 8px}
 .demo-marker-left .demo-marker-heading{font-size:31px}
 .demo-marker-left p{font-size:25px;margin-bottom:10px}
 .demo-marker-left .demo-marker-prompt{font-size:27px}
 .demo-marker-arrow{position:absolute;right:8px;bottom:-44px;width:83px;height:62px;transform:rotate(60deg);margin:0}
 .demo-public-access{margin:24px 0}
 .demo-marker-right{position:static;transform:rotate(2deg);width:100%;padding:24px 10px 12px;margin:0;order:2;text-align:center}
 .demo-marker-right .demo-marker-heading{font-size:31px}
 .demo-marker-right p{font-size:25px}
 .demo-marker-hearts{margin:0 0 10px;width:118px;height:54px}
 body.demo-public-login{display:flex;flex-direction:column;align-items:center}
 body.demo-public-login #login{order:0;margin:0 auto}
 body.demo-public-login .language-switcher{order:2}
 body.demo-public-login>.demo-marker-right{order:1;max-width:380px;margin:16px auto 4px}
}

/* Keys greeting and marker annotations are presentation only. */
.demo-marker-left .demo-marker-keys{font-size:28px;line-height:1.2}
.demo-password-arrow{position:absolute;pointer-events:none;overflow:visible;color:#1759b5;z-index:5}
.demo-password-arrow path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.login form .demo-credentials{position:relative;margin-top:10px;margin-bottom:29px}
.login form .demo-credentials::after{content:"";position:absolute;inset:var(--demo-ring-top,0) var(--demo-ring-right,80px) var(--demo-ring-bottom,0) var(--demo-ring-left,-11px);border:3px solid #1759b5;border-radius:46% 48% 43% 45% / 25% 30% 28% 26%;transform:rotate(-2deg);pointer-events:none}
@media(max-width:1119px){.demo-marker-left .demo-marker-keys{font-size:25px}}
@media(max-width:359px){.demo-copy{min-width:60px;padding:7px 8px}}