/* Preserve the cutout silhouette without clipping Eiko or hiding form copy. */
.login-canvas .role-window{clip-path:none;isolation:isolate;border:solid #111;border-width:4px 7px 8px 4px;box-shadow:5px 5px 0 #fff,11px 12px 0 #111;filter:none}
.login-canvas .role-window::before{content:"";position:absolute;z-index:-1;inset:12px -11px -12px 10px;background:#1118;clip-path:polygon(0 6%,94% 0,100% 13%,98% 90%,85% 100%,3% 96%);transform:rotate(2deg);pointer-events:none}
.login-canvas .role-dialogue{overflow:visible;clip-path:none;border:solid #111;border-width:4px 6px 7px 4px;box-shadow:5px 6px 0 #e9002a;background:linear-gradient(158deg,#151518 0 88%,#2f3036 88%)}
.login-canvas .role-dialogue::after{content:"";position:absolute;z-index:0;right:7%;bottom:-23px;width:66px;height:29px;background:#151518;clip-path:polygon(0 0,100% 0,23% 100%);filter:drop-shadow(3px 4px 0 #111);pointer-events:none}
.login-canvas .role-dialogue h2{position:relative;z-index:1;max-width:calc(100% - 95px);overflow:visible}
.login-canvas .role-dialogue p{position:relative;z-index:1;padding-right:clamp(80px,8vw,108px);min-height:80px;overflow-wrap:anywhere}
.login-canvas .role-mascot{z-index:3!important;top:26px;right:5%;width:clamp(73px,6vw,95px);filter:drop-shadow(4px 5px 0 #fff) drop-shadow(8px 8px 0 #e9002a80)}
.login-canvas .role-login-form,.login-canvas .role-demo{position:relative;z-index:4}
.entrance-canvas .entry-mascot{left:2%;bottom:8%;max-width:22%;filter:drop-shadow(3px 4px 0 #fff) drop-shadow(7px 8px 0 #111)}
@media(max-width:900px){
  .login-canvas .role-window-grid{gap:27px}
  .login-canvas .role-dialogue{min-height:0}
  .login-canvas .role-dialogue p{min-height:0;padding-right:110px}
  .login-canvas .role-mascot{right:8%;top:28px;width:85px}
}
@media(max-width:560px){
  .login-canvas .role-window{padding:34px 7px 13px;margin:0 5px}
  .login-canvas .role-dialogue{padding:44px 14px 25px}
  .login-canvas .role-dialogue h2{max-width:calc(100% - 73px);font-size:clamp(33px,9.8vw,42px)}
  .login-canvas .role-dialogue p{padding-right:76px;min-height:92px;font-size:13px}
  .login-canvas .role-mascot{top:34px;right:7px;width:69px}
  .login-canvas .role-nameplate{left:15px;top:10px}
  .login-canvas .login-intro-note{overflow-wrap:anywhere}
  .entrance-canvas .entry-mascot{left:2%;bottom:4%;width:76px;max-width:25%}
}
@media(max-width:360px){.login-canvas .role-dialogue p{padding-right:57px}.login-canvas .role-mascot{width:61px}}