.login-page.login-reference{color-scheme:dark;--color-canvas:var(--fd-ref-dark-canvas);--color-surface:var(--fd-ref-dark-surface);--color-raised:var(--fd-ref-dark-raised);--color-text:var(--fd-ref-dark-text);--color-text-muted:var(--fd-ref-dark-muted);--color-border-subtle:var(--fd-ref-dark-divider);--color-border-control:var(--fd-ref-dark-divider);--color-action:var(--fd-ref-accent);--color-action-border:transparent;--color-on-action:var(--fd-ref-dark-shell);--color-focus:var(--fd-ref-accent);--color-link:var(--fd-ref-accent);--color-danger:var(--fd-danger-soft);position:relative;isolation:isolate;min-height:100dvh;max-width:none;margin:0;padding:max(40px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));display:grid;place-items:center;background:var(--fd-ref-dark-canvas);background-image:linear-gradient(color-mix(in srgb,var(--fd-black) 86%,transparent),color-mix(in srgb,var(--fd-black) 86%,transparent)),url(/design-reference/blue-ribbon.png);background-position:50%;background-size:cover;background-attachment:fixed;background-blend-mode:normal,luminosity;color:var(--color-text);font:400 var(--text-body) /1.5 var(--font-ui);letter-spacing:0}.login-reference .reference-icon{display:inline-block;width:22px;height:22px;flex:0 0 auto;background:currentColor;mask:var(--icon-source) center /contain no-repeat;vertical-align:middle}.login-reference-card{width:min(100%,960px);min-width:0;padding:32px 48px 40px;border:1px solid var(--color-border-subtle);border-radius:28px;background:var(--color-surface);box-shadow:0 24px 80px color-mix(in srgb,var(--fd-black) 28%,transparent)}.login-reference-brand,.login-reference-card,.login-reference-form,.login-reference-slogan{opacity:1;transform:none}.login-reference-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.login-reference-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--color-text);font-size:var(--login-brand-size);font-weight:800;line-height:1.2;letter-spacing:-.035em;border-radius:8px}.login-reference-brand .reference-icon{width:32px;height:32px}.login-reference-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:64px;padding-top:32px}.login-reference-intro{min-width:0}.login-reference-slogan{margin:0;max-width:360px;color:var(--color-text);font-size:var(--login-slogan-size);font-weight:650;line-height:1.18;letter-spacing:-.04em}.login-reference-slogan>span{color:var(--color-link)}.login-page.login-reference .login-reference-form{width:100%;max-width:360px;min-width:0;justify-self:end}.login-page.login-reference .login-reference-form h1{margin:0;font:var(--login-title-weight) var(--login-title-size) /1.25 var(--font-ui);letter-spacing:-.025em}.login-page.login-reference .login-reference-form form{margin-top:24px;gap:24px}.login-page.login-reference .login-reference-form label{color:var(--color-text);font:var(--login-label-weight) var(--text-caption) /1.45 var(--font-ui);letter-spacing:0;gap:8px}.login-page.login-reference .login-reference-form input{width:100%;min-width:0;min-height:var(--login-control-height);padding:13px 16px;border:1px solid var(--color-border-control);border-radius:12px;background:var(--color-canvas);color:var(--color-text);font:500 var(--text-body) /1.5 var(--font-ui);letter-spacing:0;box-shadow:none}.login-page.login-reference .login-reference-form input::placeholder{color:var(--color-text-muted);opacity:1}.login-page.login-reference .login-reference-form input:focus-visible{border-color:var(--color-focus);outline:2px solid var(--color-focus);outline-offset:3px}.login-reference .login-password-field{display:grid;gap:8px}.login-reference .login-password-control{position:relative;min-width:0}.login-page.login-reference .login-password-control input{padding-right:60px}.login-reference .login-password-toggle{position:absolute;inset:4px 4px 4px auto;display:grid;place-items:center;width:44px;min-height:44px;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--color-text-muted)}.login-reference .login-password-toggle[aria-pressed=true]{background:var(--color-raised);color:var(--color-link)}.login-page.login-reference .login-reference-form .button{width:100%;min-height:var(--login-control-height);padding:13px 20px;border:1px solid var(--color-action-border);border-radius:12px;background:var(--color-action);color:var(--color-on-action);font:650 var(--text-body) /1.5 var(--font-ui);letter-spacing:0;box-shadow:none;transform:none;transition:none}.login-page.login-reference .login-reference-form :is(button,input):disabled{cursor:wait;opacity:1;color:var(--color-text-muted);background:var(--color-raised);border-color:var(--color-border-subtle)}.login-page.login-reference .login-reference-form .error{margin:0;padding:16px;border:1px solid var(--color-danger);border-radius:12px;background:color-mix(in srgb,var(--color-danger) 8%,var(--color-surface));color:var(--color-danger);font-size:var(--text-caption);line-height:1.6;overflow-wrap:anywhere}.login-reference-help{margin-top:16px;padding:0;border:0}.login-reference-help>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 0;border-radius:4px;color:var(--color-text-muted);font:500 var(--text-caption) /1.5 var(--font-ui);cursor:pointer;list-style:none}.login-reference-help>summary::-webkit-details-marker{display:none}.login-reference-help>summary .reference-icon{transform:rotate(0deg)}.login-reference-help[open]>summary .reference-icon{transform:rotate(45deg)}.login-reference-help>div{padding:16px;background:var(--color-canvas);border-radius:12px;opacity:1;transform:none;transform-origin:top right}.login-reference-help p{margin:0 0 16px;color:var(--color-text-muted);font-size:var(--text-caption);line-height:1.6}.login-reference-help p:last-child{margin-bottom:0}.login-reference :is(a,button,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}.login-reference-skip{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;z-index:2;padding:12px 20px;transform:translate(-50%,-180%);border-radius:12px;background:var(--color-surface);color:var(--color-text);font-size:var(--text-caption);white-space:nowrap}.login-reference-skip:focus{transform:translate(-50%)}@media (hover:hover) and (pointer:fine){.login-page.login-reference .login-reference-form .button:not(:disabled):hover{background:color-mix(in srgb,var(--color-action) 88%,var(--fd-black))}.login-reference .login-password-toggle:not(:disabled):hover{color:var(--color-link);background:var(--color-raised)}.login-reference-help>summary:hover{color:var(--color-text)}}@media (prefers-reduced-motion:no-preference){.login-reference-brand,.login-reference-form,.login-reference-slogan{transition-property:opacity,transform;transition-duration:var(--motion-reveal);transition-timing-function:var(--studio-ease)}.login-reference-brand{transition-delay:0s}.login-reference-slogan{transition-delay:var(--motion-stagger)}.login-reference-form{transition-delay:calc(var(--motion-stagger) * 2)}.login-page.login-reference .login-reference-form .button-primary{transition:transform var(--motion-feedback) var(--studio-ease)}@media (hover:hover) and (pointer:fine){.login-page.login-reference .login-reference-form .button-primary:not(:disabled):not(:focus-visible):hover{transform:translateY(-1px)}}.login-page.login-reference .login-reference-form .button-primary:not(:disabled):not(:focus-visible):active{transform:scale(var(--press-scale))}.login-reference-help>summary .reference-icon{transition:transform var(--motion-popover) var(--studio-ease)}.login-reference-help>div{transition:opacity var(--motion-popover) var(--studio-ease),transform var(--motion-popover) var(--studio-ease)}@starting-style{.login-reference-brand,.login-reference-form,.login-reference-slogan{opacity:0;transform:translateY(8px)}.login-reference-help[open]>div{opacity:0;transform:translateY(-4px) scale(.985)}}}.login-reference:has(:focus-visible) :is(.login-reference-brand,.login-reference-slogan,.login-reference-form,.login-reference-help>div){transition:none;opacity:1;transform:none}.login-page.login-reference:has(:focus-visible) .login-reference-form .button-primary,.login-page.login-reference:has(:focus-visible) .login-reference-form .button-primary:not(:disabled):is(:hover,:active){transition:none;transform:none}.login-reference:has(:focus-visible) .login-reference-help>summary .reference-icon{transition:none}@media (prefers-reduced-motion:reduce){.login-reference :is(.login-reference-brand,.login-reference-slogan,.login-reference-form,.login-reference-help>div){transition:none;opacity:1;transform:none}.login-page.login-reference .login-reference-form .button-primary{transition:none;transform:none}.login-reference-help>summary .reference-icon{transition:none}}@media (max-width:850px){.login-page.login-reference{padding:24px}.login-reference-card{max-width:480px;padding:32px}.login-reference-layout{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:24px}.login-reference-slogan{max-width:none;font-size:var(--login-slogan-mobile-size);line-height:1.25;letter-spacing:-.025em}.login-reference-slogan br{display:none}.login-page.login-reference .login-reference-form{max-width:none;padding-top:32px;border-top:1px solid var(--color-border-subtle)}.login-page.login-reference .login-reference-form h1{font-size:var(--login-title-mobile-size)}}@media (max-width:480px){.login-page.login-reference{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.login-reference-card{padding:24px;border-radius:24px}.login-reference-layout{gap:24px}.login-page.login-reference .login-reference-form{padding-top:24px}}@media (prefers-contrast:more){.login-page.login-reference{--color-border-control:var(--fd-ref-dark-control)}}@media (forced-colors:active){.login-reference-card{border-color:CanvasText}.login-page.login-reference .login-reference-form :is(input,.button){border-color:ButtonText}.login-page.login-reference .login-reference-form input:focus-visible,.login-reference :is(a,button,summary):focus-visible{outline-color:Highlight}.login-reference .reference-icon{forced-color-adjust:none;background:currentColor}}.login-reference-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--fd-ref-dark-canvas)}.login-reference-background:before{content:"";position:absolute;inset:-5%;background-color:var(--fd-ref-dark-canvas);background-image:linear-gradient(color-mix(in srgb,var(--fd-black) 86%,transparent),color-mix(in srgb,var(--fd-black) 86%,transparent)),url(/design-reference/blue-ribbon.png);background-position:50%;background-size:cover;background-repeat:no-repeat;background-blend-mode:normal,luminosity;transform:translate3d(-1.5%,-.75%,0) scale(1.03)}.login-reference .login-reference-background-toggle{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:12px;background:var(--color-raised);color:var(--color-text-muted);font:inherit;cursor:pointer;touch-action:manipulation}.login-reference .login-reference-background-toggle[aria-pressed=true]{color:var(--color-text);background:var(--color-raised)}.login-reference .login-reference-background-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}@media (hover:hover) and (pointer:fine){.login-reference .login-reference-background-toggle:hover{color:var(--color-text);background:var(--color-raised)}}@media (prefers-reduced-motion:no-preference){.login-reference-background:before{animation:login-reference-background-drift 26s ease-in-out infinite alternate}.login-reference-background[data-paused=true]:before{animation-play-state:paused}}@keyframes login-reference-background-drift{0%{transform:translate3d(-1.5%,-.75%,0) scale(1.03)}to{transform:translate3d(1.5%,.75%,0) scale(1.075)}}@media (prefers-reduced-motion:reduce){.login-reference-background:before{animation:none;transform:scale(1.03)}.login-reference .login-reference-background-toggle{display:none}}@media (forced-colors:active){.login-reference .login-reference-background-toggle{border-color:ButtonText}.login-reference .login-reference-background-toggle:focus-visible{outline-color:Highlight}}