@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");*{box-sizing:border-box;font-family:Inter,sans-serif}*,body,html{margin:0;padding:0}body,html{overflow:hidden;height:100dvh}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutToLeft{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}.login-content{animation:slideInFromLeft .6s ease-out;transition:all .4s ease-out}.login-content.slide-out{animation:slideInFromRight .4s ease-out}.logo-container{animation:slideInFromRight .6s ease-out}input::placeholder{color:#94a3b8}button:focus{outline:none;box-shadow:0 0 0 2px rgba(52,152,219,.4)}.login-container{display:flex;height:100dvh;width:100vw;margin:0;padding:0;overflow:hidden;position:relative}.login-left{flex:0 0 40%;background:#1a1a1a;align-items:center;justify-content:center}.login-left,.login-right{display:flex;height:100vh}.login-right{flex:0 0 60%;background:#faf6e3;flex-direction:column;margin:0;padding:2rem}@media (prefers-color-scheme:dark){.login-left{background:#faf6e3}.login-right{background:#1a1a1a}}.login-content{width:100%;max-width:400px}.right-content{text-align:left;margin-bottom:2rem;padding-top:1rem}.right-title{color:#1a1a1a;font-size:3rem;font-weight:500;margin-bottom:.5rem;padding-left:1.5rem;padding-top:2rem;line-height:1.2}@media (prefers-color-scheme:dark){.right-title{color:#faf6e3}}.logo-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:0.9;gap:1rem}.right-subtitle{color:#747474;font-size:1.1rem;line-height:1.6;font-weight:400;padding-left:1.5rem;max-width:calc(90% * (60vw - 4rem))}@media (prefers-color-scheme:dark){.right-subtitle{color:#c1bebe}}.typewriter{font-weight:600;color:#1588d4}@media (prefers-color-scheme:dark){.typewriter{color:#3498db}}.cursor{font-weight:300;color:#3498db;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.logo{width:min(30vw,192px);height:min(25vh,192px);max-width:100%;object-fit:contain;top:0}.hippo-fact{color:#747474;font-size:1.1rem;text-align:center;line-height:1.6;font-weight:500;max-width:400px;font-style:italic}@media (prefers-color-scheme:dark){.hippo-fact{color:#c1bebe}}a{color:inherit;text-decoration:underline}.mobile-logo{display:none}.login-form{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.input{padding:16px 20px;background:#2f2f2d;border:1px solid #3d3e41;border-radius:12px;font-size:16px;color:#faf6e3;transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.02);width:100%;box-sizing:border-box}@media (prefers-color-scheme:dark){.input{background:white;border:1px solid #d7d4c8;color:#1a1a1a}}.input:-webkit-autofill{transition:background-color 5000s ease-in-out 0s}.input:-webkit-autofill,.input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 1000px #3d3e41;-webkit-text-fill-color:#faf6e3}.input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1000px #3d3e41;-webkit-text-fill-color:#faf6e3}@media (prefers-color-scheme:dark){.input:-webkit-autofill,.input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 1000px #e9e6d4;-webkit-text-fill-color:#1a1a1a}.input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 1000px #e9e6d4;-webkit-text-fill-color:#1a1a1a}}.input{caret-color:#faf6e3}@media (prefers-color-scheme:dark){.input{caret-color:#1a1a1a}}.input:focus{border-color:#faf6e3;outline:none;box-shadow:0 0 0 4px rgba(52,152,219,.1),0 4px 12px rgba(0,0,0,.1);transform:translateY(-1px)}@media (prefers-color-scheme:dark){.input:focus{border-color:#1a1a1a}}.button{padding:16px 20px;color:#1a1a1a;background:#faf6e3;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(52,152,219,.3);position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box}@media (prefers-color-scheme:dark){.button{background:#1a1a1a;color:#faf6e3}}.button:hover{background:#e9e6d4;transform:translateY(-2px);box-shadow:0 6px 20px rgba(52,152,219,.4)}@media (prefers-color-scheme:dark){.button:hover{background:#2f2f2d}}.button:active{transform:translateY(0);box-shadow:0 2px 8px rgba(52,152,219,.3)}.message{text-align:center;font-size:14px;font-weight:500;padding:12px;border-radius:8px;background:rgba(255,255,255,.5);backdrop-filter:blur(10px)}@media (prefers-color-scheme:dark){.message{background:rgba(255,255,255,.1);color:#faf6e3}}.message.error{color:#e74c3c;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.2)}@media (prefers-color-scheme:dark){.message.error{background:rgba(231,77,60,.33);color:#df3535}}.message.success{color:#27ae60;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.2)}@media (prefers-color-scheme:dark){.message.success{background:rgba(21,168,82,.33);color:#09602d}}.title{color:#faf6e3;text-align:left;margin-bottom:.5rem;font-size:2rem;font-weight:500;line-height:1}@media (prefers-color-scheme:dark){.title{color:#1a1a1a}}.subtitle{color:#9ca3af;font-size:1rem;text-align:left;line-height:1.5;font-weight:400}@media (prefers-color-scheme:dark){.subtitle{color:#6b7280}}.forgot-password{text-align:left;margin-top:-1rem;margin-left:.25rem}.toggle-button{background:none;border:none;color:#faf6e3;cursor:pointer;font-size:14px;text-decoration:underline;text-align:left}@media (prefers-color-scheme:dark){.toggle-button{color:#1a1a1a}}.divider{display:flex;align-items:center;color:#9ca3af;font-size:14px;font-weight:500}@media (prefers-color-scheme:dark){.divider{color:#6b7280}}.divider:after,.divider:before{content:"";flex:1;height:1px;margin:0 1rem;background:#3d3e41}@media (prefers-color-scheme:dark){.divider:after,.divider:before{background:#d7d4c8}}.google-button{background:#2f2f2d;color:#faf6e3;border:1px solid #d7d4c8;box-shadow:0 2px 4px rgba(0,0,0,.02)}@media (prefers-color-scheme:dark){.google-button{background:#efebd8;color:#1a1a1a;border:1px solid #4b4b4b}}.google-button:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(0,0,0,.1)}@media (prefers-color-scheme:dark){.google-button:hover{background:#cbc7b4}}.google-button:active{box-shadow:0 2px 8px rgba(0,0,0,.1)}.google-button svg{flex-shrink:1}.github-button{background:#2f2f2d;color:#faf6e3;border:1px solid #d7d4c8;box-shadow:0 2px 4px rgba(0,0,0,.02)}@media (prefers-color-scheme:dark){.github-button{background:#efebd8;color:#1a1a1a;border:1px solid #4b4b4b}}.github-button:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(0,0,0,.1)}@media (prefers-color-scheme:dark){.github-button:hover{background:#cbc7b4}}.github-button:active{box-shadow:0 2px 8px rgba(0,0,0,.1)}.github-button svg{flex-shrink:1}.magic-link-button{background:#2f2f2d;color:#faf6e3;border:1px solid #d7d4c8;box-shadow:0 2px 4px rgba(0,0,0,.02)}@media (prefers-color-scheme:dark){.magic-link-button{background:#efebd8;color:#1a1a1a;border:1px solid #4b4b4b}}.magic-link-button:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(0,0,0,.1)}@media (prefers-color-scheme:dark){.magic-link-button:hover{background:#cbc7b4}}.magic-link-button:active{box-shadow:0 2px 8px rgba(0,0,0,.1)}.magic-link-button svg{flex-shrink:1}.password-button{background:#2f2f2d;color:#faf6e3;border:1px solid #d7d4c8;box-shadow:0 2px 4px rgba(0,0,0,.02)}@media (prefers-color-scheme:dark){.password-button{background:#efebd8;color:#1a1a1a;border:1px solid #4b4b4b}}.password-button:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(0,0,0,.1)}@media (prefers-color-scheme:dark){.password-button:hover{background:#cbc7b4}}.password-button:active{box-shadow:0 2px 8px rgba(0,0,0,.1)}.password-button svg{flex-shrink:1}.input-wrapper{position:relative;width:100%}.input.with-toggle{padding-right:40px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#94a3b8;transition:all .2s ease}.password-toggle svg{transition:opacity .2s ease,transform .2s ease}.password-toggle:hover{color:#faf6e3}.password-toggle:hover svg{transform:scale(1.1)}@media (prefers-color-scheme:dark){.password-toggle{color:#6b7280}.password-toggle:hover{color:#1a1a1a}}.password-toggle:focus{outline:none}@media (max-width:1200px){.login-container{flex-direction:column}.login-left{flex:1;width:100vw;height:100vh}.login-right{display:none}.login-content{display:flex;flex-direction:column;align-items:center;text-align:center}.mobile-logo{display:block;width:150px;height:150px;margin-bottom:2rem;object-fit:contain}.subtitle,.title{text-align:center}.login-form{width:80%}}