html,body{--brandColor: #6616e7;--backgroundColor: #f9f9f9;--textColor: #333}*{box-sizing:border-box;min-width:0}body{min-height:100vh}h1,h2,h3,h4{text-wrap:balance}p{text-wrap:pretty}body{padding:0;margin:0;height:100%;background-color:var(--backgroundColor);color:var(--textColor);font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5}body:has(.body--color){background:var(--brandColor)}.container{max-width:1200px;padding:0 30px;margin:auto}.welcome{background:var(--brandColor);background:radial-gradient(circle,#8030ff 36%,#6616e7);color:#fff;padding:20px 0 80px}.welcome__header{display:flex;justify-content:flex-end;padding:0 30px;margin-bottom:40px}.welcome__login a{border:1px solid white;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background-color .3s,color .3s;color:#fff;text-decoration:none;font-size:14px}.welcome__logo{text-align:center;font-size:36px;font-weight:600;position:relative;text-transform:uppercase;letter-spacing:.5em}.welcome__logo:before{content:"なぶなぶ";opacity:.25;color:#000;margin-left:.5em;font-size:1.5em;position:absolute;z-index:0;transform:translateY(-50%);top:50%}.welcome__logo:after{display:block;width:100px;height:1px;background:#fff;content:"";margin:auto}.welcome__logo span{position:relative;z-index:1}.welcome__subtitle{text-align:center;font-size:16px;margin-top:10px}.login__container{width:400px;background:#fff;margin:auto;border-radius:6px;padding:40px 60px}.login__container label{display:block}.login__container input{width:100%;padding:12px 8px;margin-top:0;margin-bottom:15px;border:1px solid #ddd;border-radius:4px}.login__container .submit{margin-top:5px;width:100%;background-color:var(--brandColor);color:#fff;padding:12px 8px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600}.login__container .submit:hover{background-color:#5200c7}.login__container .magicLink{width:100%;background-color:#fff;color:var(--brandColor);padding:10px;border:1px solid var(--brandColor);border-radius:4px;cursor:pointer;font-size:14px;margin-top:10px;font-weight:500}.login__container .magicLink:hover{background-color:#f0e6ff}.login__form__title{text-align:center;margin-top:40px;font-size:18px;color:#fff;margin-bottom:5px;font-weight:600}.login__signup{text-align:center;margin-top:20px}.login__signup a{color:var(--brandColor);text-decoration:none;font-weight:600}.login__signup a:hover{text-decoration:underline}