.spinner{--spinner-width: 50px;position:relative}@keyframes spinner{to{transform:rotate(360deg)}}.spinner:before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;width:var(--spinner-width);height:var(--spinner-width);margin-top:calc(var(--spinner-width) / -2);margin-left:calc(var(--spinner-width) / -2);border-radius:50%;border:1px solid #f6f;border-top-color:#0e0;border-right-color:#0dd;border-bottom-color:#f90;animation:spinner .6s linear infinite}div.signup{display:flex;margin:1px auto;max-width:1200px;background:var(--color-background-secondary)}div.signup form{display:flex;flex-direction:column;justify-content:center;padding:1rem;margin:auto}div.signup form>*:not(:last-child){margin-bottom:1rem}div.signup form h1{font-size:2rem;line-height:2rem;font-weight:600}div.signup form input{background:#fff}div.signup form div.message{display:none;visibility:hidden}div.signup form button.submit{border:none}div.signup form[data-state=success] button.submit,div.signup form[data-state=success] input.email,div.signup form[data-state=success] h1,div.signup form[data-state=success]>p{display:none;visibility:hidden}div.signup form[data-state=success] div.message.success{display:flex;visibility:visible;flex-direction:column;justify-content:space-around;align-items:center;text-align:center;padding:1rem}div.signup form[data-state=success] div.message.success svg{margin:.5rem}div.signup form[data-state=success] div.message.success p{margin:0}div.signup form[data-state=error] div.message.error{display:block;visibility:visible;color:red}div.signup form[data-state=processing] button.submit{color:#0000;@include spinner;--spinner-width: 2rem}@media (max-width: 640px){div.signup div.image{display:none;visibility:hidden}div.signup form{padding:3rem 1rem}}
