:root{--mint:#4fe3a5;--mint-hover:#3ad393;--ink:#2c3e50;--muted:#7f8c8d;--light:#f8fafc;--white:#fff;--shadow:0 25px 50px rgba(0,0,0,.1)}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--light);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.skip-link{position:absolute;top:-50px;left:0;background:var(--mint);color:#fff;padding:8px;z-index:100}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.container{position:relative;width:100%;max-width:950px;height:600px;background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.container:before{content:"";position:absolute;height:2000px;width:2000px;top:-10%;right:48%;transform:translateY(-50%);background:linear-gradient(-45deg,var(--mint),var(--mint-hover));transition:1.2s ease-in-out;border-radius:50%;z-index:6;pointer-events:none}.forms-container{position:absolute;width:100%;height:100%;inset:0}.signin-signup{position:absolute;top:50%;transform:translate(-50%,-50%);left:75%;width:50%;transition:1s .7s ease-in-out;display:grid;grid-template-columns:1fr;z-index:5}form{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 5rem;transition:all .2s .7s;overflow:hidden;grid-column:1/2;grid-row:1/2}.sign-up-form{opacity:0;z-index:1}.sign-in-form{z-index:2}.title{font-size:2.5rem;color:var(--mint);margin-bottom:10px}.subtitle{font-size:1rem;color:var(--muted);margin-bottom:20px;text-align:center}.input-field{max-width:380px;width:100%;background:var(--light);margin:10px 0;border:2px solid var(--mint);border-radius:12px;display:flex;align-items:center;padding:0 1rem;transition:.3s}.input-field:focus-within{background:#fff;border-color:var(--mint-hover);box-shadow:0 0 0 3px rgba(79,227,165,.2)}.input-field input{background:none;outline:none;border:0;font-weight:500;font-size:1rem;color:var(--ink);width:100%;padding:15px 0}.input-field input::placeholder{color:var(--muted);font-weight:400}.btn{width:160px;background:#fff;border:2px solid var(--mint);outline:0;height:49px;border-radius:49px;color:var(--mint);text-transform:uppercase;font-weight:600;margin:10px 0;cursor:pointer;transition:.35s;font-size:.9rem}.btn:hover:not(:disabled),.btn:focus-visible{background:var(--mint);color:#fff;transform:translateY(-2px)}.btn:disabled{opacity:.55;cursor:wait}.panels-container{position:absolute;height:100%;width:100%;inset:0;display:grid;grid-template-columns:repeat(2,1fr)}.panel{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around;text-align:center;z-index:6}.left-panel{pointer-events:all;padding:3rem 17% 2rem 12%}.right-panel{pointer-events:none;padding:3rem 12% 2rem 17%}.panel .content{color:#fff;transition:transform .9s ease-in-out;transition-delay:.6s}.panel h2{font-size:2.2rem;margin-bottom:10px}.panel p{font-size:.95rem;padding:.7rem 0;color:rgba(255,255,255,.9)}.btn.transparent{margin:0;background:none;border-color:#fff;color:#fff;width:140px;height:45px}.btn.transparent:hover{background:rgba(255,255,255,.15)}.right-panel .content{transform:translateX(800px)}.container.sign-up-mode:before{transform:translate(100%,-50%);right:52%}.container.sign-up-mode .left-panel .content{transform:translateX(-800px)}.container.sign-up-mode .signin-signup{left:25%}.container.sign-up-mode .sign-up-form{opacity:1;z-index:2}.container.sign-up-mode .sign-in-form{opacity:0;z-index:1}.container.sign-up-mode .right-panel .content{transform:translateX(0)}.container.sign-up-mode .left-panel{pointer-events:none}.container.sign-up-mode .right-panel{pointer-events:all}.forget-password-link{color:var(--muted);text-decoration:none;font-size:.9rem;margin:5px 0 10px}.forget-password-link:hover{color:var(--mint-hover)}.form-message{font-size:.8rem;min-height:18px;text-align:center}.form-message.error{color:#c0392b}.form-message.success{color:#23825e}
@media(max-width:870px){.container{min-height:760px;height:calc(100vh - 40px)}.signin-signup{width:100%;top:68%;left:50%;transform:translate(-50%,-50%);transition:1s .7s}.panels-container{grid-template-columns:1fr;grid-template-rows:1fr 2fr 1fr}.panel{flex-direction:row;justify-content:space-around;align-items:center;padding:1.6rem 8%;grid-column:1/2}.left-panel{grid-row:1/2}.right-panel{grid-row:3/4}.panel .content{padding-right:15%;}.panel h2{font-size:1.3rem}.panel p{font-size:.8rem;padding:.5rem 0}.btn.transparent{width:110px;height:40px}.container:before{width:1500px;height:1500px;left:30%;bottom:68%;right:auto;top:auto;transform:translateX(-50%);transition:1.2s}.container.sign-up-mode:before{transform:translate(-50%,100%);bottom:32%;right:auto}.right-panel .content{transform:translateY(300px)}.container.sign-up-mode .signin-signup{top:32%;left:50%}.container.sign-up-mode .left-panel .content{transform:translateY(-300px)}.container.sign-up-mode .right-panel .content{transform:translateY(0)}}
@media(max-width:570px){body{padding:0}.container{height:100vh;border-radius:0}form{padding:0 1.5rem}.title{font-size:2rem}.panel .content{padding:0}.panel p{display:none}.input-field{margin:7px 0}}
@media(prefers-reduced-motion:reduce){*,*:before{transition-duration:.01ms!important}}