.login-page{background:var(--stone-100);min-height:100svh;color:var(--ink);box-sizing:border-box;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:20px;padding:20px;display:grid}.login-page .brand-panel{isolation:isolate;border:1px solid var(--line);background:var(--stone-50);border-radius:24px;flex-direction:column;justify-content:space-between;min-height:0;padding:clamp(24px,5vh,48px) clamp(32px,5vw,80px);display:flex;position:relative;overflow:hidden}.login-page .brand-panel:before{content:"";z-index:-1;background:url(/brand/topfling-pattern-full.webp) center/var(--tf-pattern-size,820px auto);opacity:1;position:absolute;inset:0}.login-page .brand-logo{object-fit:contain;align-self:flex-start;width:150px;height:150px}.login-page .brand-message{max-width:560px;padding:24px 0}.login-page .brand-message p,.login-page .private-access{color:var(--ink-muted);font:500 10px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;margin:0}.login-page .brand-message h1{font:500 clamp(34px,4.3vw,64px)/1.08 var(--font-sans);letter-spacing:-.05em;margin:22px 0}.login-page .brand-message span{max-width:32ch;color:var(--ink-muted);font-size:14px;line-height:1.7;display:block}.login-page .sign-in-panel{place-items:center;min-width:0;padding:48px clamp(24px,4vw,64px);display:grid;position:relative}.login-page .sign-in-content{width:100%;max-width:390px}.login-page .private-access{align-items:center;gap:10px;margin-bottom:24px;display:flex}.login-page .private-access:before{content:"";background:var(--ink-muted);opacity:.6;width:25px;height:1px}html body .login-page .sign-in-content h2{font:600 clamp(30px,3vw,38px)/1.16 var(--font-sans);letter-spacing:-.04em;min-height:2.35em;margin:0 0 28px}.login-page .login-welcome-name{font:inherit;letter-spacing:inherit;color:var(--ink);overflow-wrap:anywhere;margin-top:8px;display:block}.login-page .login-form{gap:10px;display:grid}.login-page .login-form label{font:500 12px var(--font-sans);color:var(--ink-muted)}.login-page .login-form label[for=password]{margin-top:12px}html body .login-page .login-form input:not([type=checkbox]){box-sizing:border-box;border:1px solid var(--line);background:var(--stone-50);width:100%;height:52px;color:var(--ink);font:400 15px var(--font-sans);border-radius:12px;outline:none;padding:0 15px;transition:border-color .18s,box-shadow .18s}html body .login-page .login-form input:focus{border-color:var(--ink-muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 6%,transparent)}.login-page .password-field{position:relative}html body .login-page .password-field input{padding-right:54px!important}html body .login-page .password-toggle{width:40px;height:40px;min-height:0;box-shadow:none;color:var(--ink-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;padding:0;display:grid;position:absolute;top:6px;right:6px}html body .login-page .password-toggle:hover{background:var(--stone-100);color:var(--ink)}.login-page .password-toggle svg{stroke:currentColor;stroke-width:1.7px;fill:none;width:19px;height:19px}html body .login-page .login-form button.primary-button{border:1px solid color-mix(in srgb,var(--ink) 16%,var(--stone-200));background:linear-gradient(120deg,#ffffff24,transparent),var(--stone-200);width:100%;min-height:52px;color:var(--ink);font:600 14px var(--font-sans);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:10px;margin-top:18px;padding:14px 20px;transition:background-color .18s,box-shadow .18s,transform .18s;display:flex;box-shadow:inset 0 1px #ffffff30,0 4px 12px #00000006}html body .login-page .login-form button.primary-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--stone-200) 75%,var(--stone-50));transform:translateY(-1px);box-shadow:inset 0 1px #ffffff30,0 6px 18px #0000000c}html body .login-page .login-form button.primary-button:active:not(:disabled){transform:none;box-shadow:inset 0 1px 3px #00000009}html body .login-page .login-form button.primary-button:before,html body .login-page .login-form button.primary-button:after{content:none}.login-page .button-lock{stroke:currentColor;stroke-width:1.7px;fill:none;width:16px;height:16px}html body .login-page .login-form button.login-recovery-link{width:auto;min-height:36px;color:var(--ink-muted);box-shadow:none;font:400 12px var(--font-sans);cursor:pointer;background:0 0;border:0;border-radius:8px;justify-self:center;margin:3px 0 0;padding:8px 12px}html body .login-page .login-form button.login-recovery-link:hover{background:var(--stone-50);color:var(--ink)}html body .login-page button:focus-visible{outline:2px solid var(--ink-muted);outline-offset:3px}html body .login-page button:disabled{opacity:.55;cursor:default}.login-page .form-message{border:1px solid var(--line);background:var(--stone-50);color:var(--ink-muted);border-radius:10px;margin:4px 0 0;padding:12px 14px;font-size:12px;line-height:1.6}.login-page .login-footer{border-top:1px solid var(--line);color:var(--ink-muted);text-align:center;letter-spacing:.04em;margin:32px 0 0;padding-top:20px;font-size:10px;line-height:1.6}html[data-theme=dark] .login-page .brand-logo,html[data-theme=quiet] .login-page .brand-logo{filter:invert()}@keyframes login-name-letter{0%{opacity:0}to{opacity:1}}@media (max-width:850px){.login-page{grid-template-columns:1fr;gap:0;padding:16px}.login-page .brand-panel{border-radius:18px;flex-direction:row;align-items:center;gap:20px;min-height:0;padding:20px 24px}.login-page .brand-logo{flex:none;align-self:center;width:80px;height:80px}.login-page .brand-message{padding:0}.login-page .brand-message h1{margin:10px 0 0;font-size:25px}.login-page .brand-message p{font-size:9px}.login-page .brand-message span{display:none}.login-page .sign-in-panel{padding:36px 20px}.login-page .private-access{margin-bottom:20px}.login-page .login-footer{margin-top:24px}}@media (max-width:420px){.login-page .brand-panel{gap:16px;padding:18px}.login-page .brand-logo{width:64px;height:64px}.login-page .brand-message h1{font-size:21px}.login-page .sign-in-panel{padding:30px 8px}}@media (prefers-reduced-motion:reduce){.login-page .login-welcome-name{font:inherit;letter-spacing:inherit;color:var(--ink);overflow-wrap:anywhere;margin-top:8px;display:block}html body .login-page .login-form button.primary-button{transition:none;transform:none}}html body main.login-page{grid-template-rows:minmax(0,1fr);height:100svh;min-height:0;overflow:auto}html body .login-page .sign-in-panel .login-form button.primary-button{border:1px solid var(--line);background:linear-gradient(120deg,#ffffff24,transparent),var(--stone-200);color:var(--ink);border-radius:12px;box-shadow:inset 0 1px #ffffff30,0 4px 12px #00000006}html body .login-page .sign-in-panel .login-form button.primary-button:hover:not(:disabled){background:color-mix(in srgb,var(--stone-200) 75%,var(--stone-50));box-shadow:0 6px 18px #0000000c}html body .login-page .sign-in-panel .login-form button.login-recovery-link{box-shadow:none!important;background:0 0!important;border:0!important;border-radius:8px!important;justify-self:center!important;padding:8px 12px!important}html body .login-page .sign-in-panel .login-form button.login-recovery-link:hover{background:var(--stone-50)!important;box-shadow:none!important}html body .login-page .sign-in-panel .login-form button:after{content:none!important}@media (max-width:850px){html body main.login-page{grid-template-rows:auto minmax(0,1fr);align-content:stretch}.login-page .brand-panel{min-height:120px}.login-page .brand-logo{flex-shrink:0}}.login-page .sign-in-panel{min-height:0;padding-top:24px;padding-bottom:24px}@media (min-width:851px) and (max-height:760px){.login-page .brand-logo{width:120px;height:120px}.login-page .brand-message h1{font-size:clamp(32px,4vw,52px)}.login-page .private-access{margin-bottom:16px}html body .login-page .sign-in-content h2{margin-bottom:18px}.login-page .login-footer{margin-top:20px;padding-top:14px}}@media (max-width:850px) and (max-height:740px){html body main.login-page{padding:12px}.login-page .brand-panel{min-height:90px;padding:12px 20px}.login-page .brand-logo{width:60px;height:60px}.login-page .brand-message h1{margin-top:6px;font-size:21px}.login-page .sign-in-panel{padding:18px 12px}.login-page .private-access{margin-bottom:12px}html body .login-page .sign-in-content h2{min-height:2.15em;margin-bottom:12px;font-size:28px}.login-page .login-form{gap:8px}.login-page .login-form label[for=password]{margin-top:6px}html body .login-page .login-form input:not([type=checkbox]){height:46px}html body .login-page .password-toggle{top:3px}html body .login-page .login-form button.primary-button{min-height:46px;margin-top:10px}.login-page .login-footer{margin-top:12px;padding-top:12px}}@media (max-height:520px){html body main.login-page{grid-template-rows:auto;height:auto;min-height:100svh}}@media (min-width:851px){html body main.login-page{grid-template-columns:minmax(0,1.5fr) minmax(360px,.85fr)}.login-page .sign-in-content{max-width:350px}.login-page .sign-in-panel{padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px)}}.login-page .sign-in-panel{isolation:isolate}.login-page .sign-in-panel:before{content:"";z-index:-1;pointer-events:none;background:url(/brand/topfling-pattern-full.webp) center/var(--tf-pattern-size,820px auto);opacity:.6;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000002e 35% 65%,#000);mask-image:linear-gradient(#000,#0000002e 35% 65%,#000)}.login-page .login-name-letter{white-space:pre-wrap;animation:.12s both login-name-letter}@media (prefers-reduced-motion:reduce){.login-page .login-name-letter{animation:none}}.login-page .brand-logo{object-fit:contain;width:240px;max-width:100%;height:240px}@media (min-width:851px) and (max-height:760px){.login-page .brand-logo{width:190px;height:190px}}@media (max-width:850px){.login-page .brand-logo{width:112px;height:112px}}@media (max-width:420px){.login-page .brand-logo{width:88px;height:88px}}