/* Optical entrance. Isolated from the authenticated workspace. */
#lock-screen{grid-template-columns:minmax(0,1.12fr) minmax(430px,1fr);background:#000;isolation:isolate;overscroll-behavior-y:contain}
#lock-screen .lock-art{display:flex;flex-direction:column;min-height:740px;padding:42px 54px 38px;border-right:1px solid #ffffff16;background:#000;overflow:hidden}
#lock-screen .lock-art::before{content:'';position:absolute;inset:18px;pointer-events:none;border:1px solid #ffffff08;border-radius:26px}
#lock-screen .login-brand-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:1}
#lock-screen .brand{font-size:30px;font-weight:650;letter-spacing:-2.8px}
#lock-screen .brand small{font:8px var(--mono);letter-spacing:2px;color:#858585;margin-top:10px}
#lock-screen .lock-index{position:static;color:#767676;font:8px var(--mono);letter-spacing:1.4px;white-space:nowrap}
#lock-screen .login-optic{position:relative;width:min(100%,570px);aspect-ratio:13/10;margin:auto;flex-shrink:0;contain:layout paint;pointer-events:auto}
#lock-screen .login-optic canvas,#lock-screen .optic-fallback{position:absolute;width:100%;height:100%;inset:0;display:block;pointer-events:none}
#lock-screen .login-optic canvas{visibility:hidden}
#lock-screen .login-optic.optic-ready canvas{visibility:visible}
#lock-screen .login-optic.optic-ready .optic-fallback{display:none}
#lock-screen .optic-fallback{fill:none;stroke:#eee;stroke-width:.7;opacity:.62}
#lock-screen .optic-fallback .optic-etched{stroke:#747474;stroke-width:.6}
#lock-screen .optic-register{position:absolute;width:12px;height:12px;opacity:.45;pointer-events:none}
#lock-screen .optic-register::before,#lock-screen .optic-register::after{content:'';position:absolute;background:#a0a0a0}
#lock-screen .optic-register::before{width:12px;height:1px;left:0;top:5.5px}
#lock-screen .optic-register::after{width:1px;height:12px;top:0;left:5.5px}
#lock-screen .optic-register-a{top:50%;left:2%}
#lock-screen .optic-register-b{top:50%;right:2%}
#lock-screen .optic-caption{position:absolute;bottom:1%;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px;color:#787878;font:7px var(--mono);letter-spacing:1.55px;pointer-events:none}
#lock-screen .optic-caption::before,#lock-screen .optic-caption::after{content:'';width:24px;height:1px;background:#ffffff24}
#lock-screen .lock-caption{position:relative;inset:auto;margin-top:18px;z-index:1}
#lock-screen .lock-caption .eyebrow{font:8px var(--mono);letter-spacing:1.8px;color:#999}
#lock-screen .lock-caption h1{font-size:clamp(39px,4vw,62px);font-weight:420;letter-spacing:-2.65px;line-height:1.035;margin:17px 0 16px;color:#f5f5f5}
#lock-screen .lock-caption h1 span{color:#919191}
#lock-screen .lock-caption p{font-size:12px;line-height:1.75;color:#969696;max-width:345px;margin:0}
#lock-screen .lock-features{display:flex;justify-content:space-between;gap:12px;margin-top:27px;padding-top:17px;border-top:1px solid #ffffff16;color:#828282;font:7px var(--mono);letter-spacing:.6px}
#lock-screen .lock-form{min-height:740px;padding:54px 44px 62px;background:#000;justify-content:center}
#lock-screen .lock-form>.login-pane{position:relative;max-width:410px;padding:35px 31px 28px;border:1px solid #ffffff29;border-radius:24px;background:#080808;box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #ffffff06,0 26px 70px #000;isolation:isolate}
#lock-screen .login-pane::before{content:'';position:absolute;pointer-events:none;inset:-1px;border:1px solid #ffffff67;border-radius:24px;clip-path:polygon(0 0,38% 0,0 25%);opacity:.48}
#lock-screen .login-pane::after{content:'';position:absolute;pointer-events:none;right:14px;top:14px;width:64px;height:64px;border-top:1px solid #ffffff16;border-right:1px solid #ffffff1b;border-radius:0 13px 0 0;opacity:.65}
#lock-screen .login-pane>.eyebrow{font:8px var(--mono);letter-spacing:1.8px;color:#a7a7a7;gap:8px}
#lock-screen .login-pane>.eyebrow .signal-dot{width:4px;height:4px;background:#aaa;box-shadow:none}
#lock-screen .lock-form h2{font-size:39px;line-height:1.12;font-weight:450;letter-spacing:-1.7px;margin:25px 0 11px;color:#f4f4f4}
#lock-screen .lock-form>.login-pane>p{font-size:11px;color:#949494;line-height:1.8;margin:0 0 28px}
#lock-screen .lock-form label{font-size:10px;color:#b4b4b4;margin-bottom:9px}
#lock-screen .username-hint{font-size:8px;color:#858585}
#lock-screen .login-username,#lock-screen #identity-form input{background:#ffffff03;border:1px solid #ffffff27;border-radius:9px;padding:13px 14px;font-size:12px;margin-bottom:20px;transition:border-color .18s,background-color .18s,box-shadow .18s}
#lock-screen .login-username::placeholder{color:#737373}
#lock-screen .password-row{background:#ffffff03;border:1px solid #ffffff27;border-radius:9px;margin-bottom:18px;transition:border-color .18s,background-color .18s,box-shadow .18s}
#lock-screen .password-row input{font-size:16px;padding:13px 14px;letter-spacing:.5px}
#lock-screen .password-row button{font-size:9px;padding:0 14px;color:#aaa}
#lock-screen .password-row button:hover{color:#fff}
#lock-screen .login-username:focus,#lock-screen #identity-form input:focus,#lock-screen .password-row:focus-within{background:#ffffff06;border-color:#ffffff8a;box-shadow:0 0 0 3px #ffffff05;outline:0}
#lock-screen #login-submit,#lock-screen #identity-submit{position:relative;min-height:46px;padding:13px 15px;border-radius:9px;background:#ececec;border:1px solid #fff;color:#111;box-shadow:inset 0 1px 0 #fff;font-size:11px;font-weight:600;overflow:hidden;transition:background-color .18s,transform .18s,box-shadow .18s}
#lock-screen #login-submit::before,#lock-screen #identity-submit::before{content:'';position:absolute;left:-18%;top:-12px;width:1px;height:90px;background:#fff;transform:rotate(24deg);opacity:.8;pointer-events:none}
#lock-screen #login-submit:not(:disabled):hover,#lock-screen #identity-submit:not(:disabled):hover{background:#fff;box-shadow:inset 0 1px 0 #fff,0 3px 18px #ffffff0a;transform:translateY(-1px)}
#lock-screen #login-submit:not(:disabled):active,#lock-screen #identity-submit:not(:disabled):active{transform:translateY(0)}
body.login-motion-active #lock-screen #login-submit:not(:disabled):hover::before,body.login-motion-active #lock-screen #identity-submit:not(:disabled):hover::before{animation:login-button-reflect .62s cubic-bezier(.2,.7,.2,1) 1}
#lock-screen #login-submit>.ui-icon,#lock-screen #login-submit>span{transition:transform .25s}
#lock-screen #login-submit:not(:disabled):hover>span{transform:translate(2px,-2px)}
#lock-screen #login-submit:disabled,#lock-screen #identity-submit:disabled{cursor:wait;opacity:.62;transform:none}
#lock-screen #login-error{font-size:10px;color:#bcbcbc;line-height:1.75;min-height:20px;margin:11px 0 0}
#lock-screen .privacy-note{margin-top:23px;padding-top:20px;border-top:1px solid #ffffff18;gap:10px}
#lock-screen .privacy-note>.ui-icon,#lock-screen .privacy-note>span .ui-icon{width:17px;height:17px;color:#888}
#lock-screen .privacy-note p{font-size:10px;color:#b1b1b1;line-height:1.7}
#lock-screen .privacy-note small{font-size:9px;color:#818181}
#lock-screen .lock-footer{position:relative;bottom:auto;margin-top:25px;text-align:center;color:#747474;font:7px var(--mono);letter-spacing:1.8px;line-height:1.8}
#lock-screen .lock-footer span{display:inline-block;width:2px;height:2px;border-radius:50%;background:#737373;vertical-align:middle;margin:0 10px}
#lock-screen #identity-form{margin-top:17px;padding-top:19px;border-color:#ffffff26}
#lock-screen #identity-form input{margin-bottom:14px;padding:11px 12px}
#lock-screen .identity-heading h3{font-size:14px}
#lock-screen .identity-heading p{font-size:10px;line-height:1.8}
#lock-screen #identity-error,#lock-screen #login-cooldown{font-size:10px;color:#bbb;line-height:1.8;overflow-wrap:anywhere}
body:has(#identity-form:not([hidden])) #lock-screen .lock-art{min-height:740px}
body:has(#identity-form:not([hidden])) #lock-screen .lock-form{min-height:740px;padding-top:40px;justify-content:center}
body.login-motion-active.login-entrance #lock-screen .login-brand-row{animation:login-resolve .85s cubic-bezier(.18,.7,.2,1) both}
body.login-motion-active.login-entrance #lock-screen .lock-caption{animation:login-resolve 1s .16s cubic-bezier(.18,.7,.2,1) both}
body.login-motion-active.login-entrance #lock-screen .login-pane{animation:login-pane-arrive 1.05s .12s cubic-bezier(.18,.7,.2,1) both}
body.login-motion-active.login-entrance #lock-screen .lock-footer{animation:login-resolve .9s .26s cubic-bezier(.18,.7,.2,1) both}
body.login-motion-active #lock-screen.login-feedback .login-pane{animation:login-feedback .28s ease-out 1}
@keyframes login-resolve{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes login-pane-arrive{from{opacity:.72;transform:translateY(8px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes login-button-reflect{to{left:118%}}
@keyframes login-feedback{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(2px)}}
@media(min-width:1600px){#lock-screen .lock-art{padding:50px 70px 48px}#lock-screen .login-optic{width:620px}#lock-screen .lock-form>.login-pane{max-width:430px;padding:40px 36px 32px}}
@media(max-width:1100px) and (min-width:801px){#lock-screen{grid-template-columns:minmax(0,1fr) minmax(380px,1fr)}#lock-screen .lock-art{padding:36px 34px 32px}#lock-screen .lock-index{display:none}#lock-screen .lock-caption h1{font-size:43px;letter-spacing:-1.9px}#lock-screen .lock-features{font-size:6px;gap:8px;flex-wrap:wrap}#lock-screen .lock-form{padding:40px 26px 50px}#lock-screen .lock-form>.login-pane{padding:30px 25px 26px}#lock-screen .lock-form h2{font-size:36px}}
@media(max-height:760px) and (min-width:801px){#lock-screen .lock-art,#lock-screen .lock-form{min-height:660px}#lock-screen .lock-art{padding-top:30px;padding-bottom:27px}#lock-screen .login-optic{width:min(100%,420px)}#lock-screen .lock-caption h1{font-size:42px;letter-spacing:-1.9px}#lock-screen .lock-caption p{font-size:11px}#lock-screen .lock-features{margin-top:20px;padding-top:15px}#lock-screen .lock-form{padding-top:30px;padding-bottom:40px}#lock-screen .lock-form>.login-pane{padding-top:27px;padding-bottom:24px}#lock-screen .lock-form h2{margin-top:21px}}
@media(max-width:800px){#lock-screen .login-username,#lock-screen #identity-form input{font-size:16px}#lock-screen{grid-template-columns:minmax(0,1fr);align-content:start}#lock-screen .lock-art{display:block;min-height:0;height:230px;padding:24px 26px 0;border-right:0;border-bottom:0;overflow:hidden}#lock-screen .lock-art::before{display:none}#lock-screen .login-brand-row{align-items:flex-start}#lock-screen .brand{font-size:25px}#lock-screen .brand small{font-size:7px;letter-spacing:1.6px;margin-top:8px}#lock-screen .lock-index{font-size:7px;letter-spacing:1px;margin-top:5px}#lock-screen .login-optic{position:absolute;width:250px;top:12px;left:50%;margin:0;transform:translateX(-50%)}#lock-screen .optic-caption{font-size:6px;letter-spacing:1.2px;bottom:-1%}#lock-screen .optic-register{display:none}#lock-screen .lock-caption{display:none}#lock-screen .lock-form{min-height:0;padding:6px 24px 31px;justify-content:flex-start}#lock-screen .lock-form>.login-pane{max-width:410px;padding:29px 28px 25px;border-radius:22px}#lock-screen .login-pane::before{border-radius:22px}#lock-screen .lock-form h2{font-size:36px;margin-top:22px}#lock-screen .lock-footer{margin-top:21px}body:has(#identity-form:not([hidden])) #lock-screen .lock-art{min-height:0}body:has(#identity-form:not([hidden])) #lock-screen .lock-form{min-height:0;padding:6px 24px 31px;justify-content:flex-start}}
@media(max-width:440px){#lock-screen .lock-art{height:214px;padding:22px 24px 0}#lock-screen .lock-index{display:none}#lock-screen .login-optic{width:230px;top:13px;left:65%}#lock-screen .optic-caption{display:none}#lock-screen .lock-form{padding-left:17px;padding-right:17px}#lock-screen .lock-form>.login-pane{padding:27px 24px 24px}#lock-screen .lock-form h2{font-size:35px}body:has(#identity-form:not([hidden])) #lock-screen .lock-form{padding-left:17px;padding-right:17px}}
@media(prefers-reduced-motion:reduce){#lock-screen *,#lock-screen *::before,#lock-screen *::after{animation:none!important;transition:none!important}#lock-screen .login-pane{transform:none!important}}
@media(prefers-contrast:more){#lock-screen .lock-art{border-color:#777}#lock-screen .login-pane,#lock-screen .password-row,#lock-screen .login-username,#lock-screen #identity-form input{border-color:#999}#lock-screen .lock-caption p,#lock-screen .privacy-note small,#lock-screen .username-hint,#lock-screen .lock-footer{color:#bbb}}
