.login-screen .login-brand-position{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:240px;pointer-events:none}
.login-screen .login-brand{position:relative;width:240px;height:37px;margin:0;isolation:isolate}
.login-brand .login-logo-part{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:contain;mix-blend-mode:normal;pointer-events:none}
.login-brand .brand-left{clip-path:inset(0 68.038% 0 0);opacity:1}
.login-brand .brand-right{clip-path:inset(0 0 0 41.614%);opacity:1}
.login-brand .brand-e{clip-path:inset(0 58.386% 0 31.962%);transform-origin:32% 9%;animation:integrity-e-hang 5.4s ease-in-out infinite}
.login-brand .brand-sparks{position:absolute;left:34%;top:12%;width:1px;height:1px;pointer-events:none}
.brand-sparks i{position:absolute;display:block;width:2px;height:4px;border-radius:2px;background:#c6a2ef;opacity:0;animation:integrity-spark 3.6s ease-out infinite;animation-delay:-2.7s}
.brand-sparks i:nth-child(1){--spark-x:-12px;--spark-y:14px;--spark-turn:28deg}
.brand-sparks i:nth-child(2){--spark-x:16px;--spark-y:10px;--spark-turn:-36deg;animation-delay:-2.58s}
.brand-sparks i:nth-child(3){--spark-x:6px;--spark-y:22px;--spark-turn:12deg;animation-delay:-2.48s;background:#9279dc}
.brand-sparks i:nth-child(4){--spark-x:-8px;--spark-y:26px;--spark-turn:-18deg;animation-delay:-2.4s;background:#9c87ef}
.login-brand.is-pending .brand-e{animation-duration:3s}
.login-brand.is-error .brand-sparks i{animation:integrity-spark 2.8s ease-out infinite;animation-delay:-2.1s}
.login-brand.is-error .brand-e{animation:integrity-e-error-hang 4.2s ease-in-out infinite}
.login-brand.is-rejected{animation:integrity-login-reject .46s cubic-bezier(.36,.07,.19,.97)}
.login-screen.is-login-success .login-access,.login-screen.is-login-success .login-back,.login-screen.is-login-success .login-brand-position{opacity:0;transition:opacity .2s ease-out}
.login-transition:not([hidden]){position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#030305;pointer-events:auto;opacity:0}
.login-transition.is-running{animation:integrity-screen-darken .24s ease-out forwards}
.login-transition .intro-brand{position:relative;width:min(360px,72vw);aspect-ratio:632 / 96;isolation:isolate}
.intro-brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.intro-brand .intro-left{clip-path:inset(0 68.038% 0 0);opacity:0}
.intro-brand .intro-right{clip-path:inset(0 0 0 41.614%);opacity:0}
.intro-brand .intro-e{clip-path:inset(0 58.386% 0 31.962%);transform-origin:32% 9%;opacity:0}
.is-running .intro-left{animation:integrity-letter-reveal .7s .38s cubic-bezier(.22,1,.36,1) forwards}
.is-running .intro-right{animation:integrity-letter-reveal .7s .52s cubic-bezier(.22,1,.36,1) forwards}
.is-running .intro-e{animation:integrity-e-repair .8s .25s cubic-bezier(.22,1,.36,1) forwards}
.login-transition.is-leaving{animation:integrity-screen-open .28s ease-out forwards}
body.is-login-transition #studio-app{visibility:hidden}
#studio-app.is-login-revealed{animation:integrity-studio-open .28s ease-out both}
@keyframes integrity-e-hang{0%,100%{transform:translateY(3px) rotate(13deg);opacity:1}42%{transform:translateY(4px) rotate(17deg);opacity:1}76%{transform:translateY(2px) rotate(10deg);opacity:1}}
@keyframes integrity-spark{0%,76%,100%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}80%{opacity:.75;transform:translate(0,0) rotate(0) scale(1)}94%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-turn)) scale(.3)}}
@keyframes integrity-e-error-hang{0%,100%{transform:translateY(4px) rotate(17deg);opacity:1}48%{transform:translateY(5px) rotate(24deg);opacity:1}78%{transform:translateY(3px) rotate(14deg);opacity:1}}
@keyframes integrity-login-reject{0%,100%{transform:translateX(0)}18%{transform:translateX(-4px)}36%{transform:translateX(4px)}54%{transform:translateX(-3px)}72%{transform:translateX(3px)}88%{transform:translateX(-1px)}}
@keyframes integrity-screen-darken{from{opacity:0}to{opacity:1}}
@keyframes integrity-letter-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes integrity-e-repair{0%{opacity:0;transform:translateY(7px) rotate(17deg)}35%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes integrity-screen-open{from{opacity:1}to{opacity:0}}
@keyframes integrity-studio-open{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.login-screen .login-brand-position{top:88px;width:220px}.login-screen .login-brand{width:220px;height:34px;margin:0}.login-screen:not([hidden]){padding-top:152px}}
@media(max-height:560px) and (min-width:601px){.login-screen:not([hidden]){padding-top:124px}}
@media(prefers-reduced-motion:reduce){.login-brand .brand-e,.login-brand.is-error .brand-e{animation:none;transform:translateY(3px) rotate(13deg);opacity:1}.brand-sparks i{display:none}#studio-app.is-login-revealed{animation:none}.login-screen.is-login-success .login-access,.login-screen.is-login-success .login-back,.login-screen.is-login-success .login-brand-position{transition:none}.login-transition.is-running,.is-running .intro-left,.is-running .intro-right,.is-running .intro-e{animation:none;opacity:1;transform:none;filter:none}.login-transition.is-leaving{animation:none;opacity:0}}

@media(prefers-reduced-motion:reduce){.login-brand.is-rejected{animation:none}}
