*,:after,:before{box-sizing:border-box}:root{--purple-100:#ede9fe;--purple-200:#c4b5fd;--purple-600:#7c3aed;--purple-800:#5b21b6;--pink-100:#fee2e2;--pink-200:#fecaca;--grey-100:#f3f4f6;--grey-200:#e5e7eb;--grey-300:#d1d5db;--grey-400:#9ca3af;--grey-500:#6b7280;--grey-700:#374151;--white:#fff}.login-wrapper{top:0;left:0;margin:0;width:100%;height:100vh;align-items:flex-start;justify-content:center;background-color:var(--grey-100);font-family:Poppins,sans-serif;color:var(--grey-700)}.container,.login-wrapper{position:fixed;display:flex}.container{top:60px;width:360px;height:660px;border-radius:24px;padding:24px;background-color:var(--white);overflow:hidden;box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.container,.header{flex-direction:column}.header{display:flex;align-items:center}.header-title{font-size:22px;font-weight:500;margin-top:0;margin-bottom:8px}.header-image{height:80px;width:80px;margin:20px 40px 60px 40px}.header-image svg{position:relative;fill:var(--purple-600)}.header-image-particle{position:absolute;border-radius:50%;background-color:var(--pink-200);opacity:.8}.header-image-particle-1{height:22px;width:22px;animation:particle-1 1.2s ease-in-out infinite alternate}@keyframes particle-1{0%{transform:translate3d(80px,65px,0)}to{transform:translate3d(88px,73px,0)}}.header-image-particle-2{height:18px;width:18px;animation:particle-2 1.4s ease-in-out infinite alternate}@keyframes particle-2{0%{transform:translate3d(-50px,40px,0)}to{transform:translate3d(-30px,40px,0)}}.header-image-particle-3{height:12px;width:12px;animation:particle-3 1.8s ease-in-out infinite alternate}@keyframes particle-3{0%{transform:translate3d(90px,10px,0)}to{transform:translate3d(105px,-5px,0)}}.button{padding:16px 16px;border-radius:8px;border:none;font-weight:500;font-size:16px;color:var(--white);background-color:var(--purple-600);-webkit-appearance:none;cursor:pointer;font-family:inherit;transition:background-color .2s,color .2s}.button:active{background-color:var(--purple-800)}.link{color:var(--purple-600);font-weight:500;text-decoration:none}.link:hover{text-decoration:underline}.text{font-size:14px;line-height:22px;margin-top:0;margin-bottom:16px}.text:not(.link){color:var(--grey-500)}.text-center{text-align:center}.modal,.modal-backdrop{position:absolute;top:0;bottom:0;left:0;right:0}.modal{display:flex;justify-content:center;align-items:flex-end;pointer-events:none}.modal-active.modal{pointer-events:auto}.modal-backdrop{opacity:0;background-color:rgba(8,2,29,.5);transform:translateZ(0);transition:opacity .2s}.modal-active .modal-backdrop{opacity:1}.modal-body{position:relative;display:flex;align-items:center;flex-direction:column;border-top-right-radius:24px;border-top-left-radius:24px;width:100%;padding:24px;background:var(--white);transform:translateY(100%);transition:transform .22s cubic-bezier(.33,1,.68,1)}.modal-body:before{content:"";position:absolute;top:14px;height:4px;margin:0 auto;width:60px;border-radius:2px;background-color:var(--grey-200)}.modal-active .modal-body{transform:translateY(0)}.modal-title{margin-top:8px;margin-bottom:16px;font-weight:500;font-size:20px}.settings-buttons{display:flex;justify-content:space-around;width:100%}.settings-button{min-width:72px;padding:10px 16px;margin:16px 0;border-radius:16px;border:none;font-weight:700;font-size:12px;color:var(--grey-500);background-color:var(--grey-100);-webkit-appearance:none;cursor:pointer;font-family:inherit;transition:background-color .2s,color .2s}.settings-button-active{background-color:var(--pink-100);color:var(--purple-600)}.settings-button-icon{font-size:40px;text-align:center;color:var(--grey-300);transform:translateZ(0);transition:color .2s}.settings-button-icon-active{color:var(--purple-600);transform-origin:center center;animation:bounce .5s ease-in-out}@keyframes bounce{0%{transform:scaleX(1) translateZ(0)}10%{transform:scaleY(.8) translateZ(0)}40%{transform:scaleX(1) translate3d(0,-12px,0)}70%{transform:scaleX(1) translateZ(0)}to{transform:scaleX(1) translateZ(0)}}.input-login{position:relative;margin:16px 0;font-size:16px}.input-login label{position:absolute;top:16px;left:20px;font-weight:500;color:var(--grey-400);pointer-events:none;transform-origin:top left;transition:transform .2s}.input-login input{padding:24px 20px 14px 20px;width:100%;outline:none;border:none;font-size:16px;border-radius:8px;background:var(--grey-100);transition:background-color .16s}.input-login input:focus{background:var(--grey-200)}.input-active label{transform:scale(.7) translateY(-10px)}.footer{display:flex;justify-content:center;align-items:flex-end;flex-grow:1}.footer .text{margin:0}