:root{
  --profile-request-modal-ink:#151a2a;
  --profile-request-modal-muted:#68738b;
  --profile-request-modal-line:#e1e5ed;
}

body.profile-creation-modal-open{
  overflow:hidden;
}

.profile-creation-modal[hidden]{
  display:none!important;
}

.profile-creation-modal{
  position:fixed;
  z-index:220;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}

.profile-creation-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,23,42,.46);
  opacity:0;
  backdrop-filter:blur(4px);
  transition:opacity .2s ease;
}

.profile-creation-modal-card{
  position:relative;
  z-index:1;
  width:min(100%,460px);
  max-height:min(720px,calc(100dvh - 48px));
  overflow:auto;
  padding:31px;
  border:1px solid rgba(221,225,235,.95);
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(31,39,74,.2);
  color:var(--profile-request-modal-ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:0;
  outline:0;
  transform:translateY(10px) scale(.985);
  transition:opacity .2s ease,transform .2s ease;
}

.profile-creation-modal.is-visible .profile-creation-modal-backdrop,
.profile-creation-modal.is-visible .profile-creation-modal-card{
  opacity:1;
}

.profile-creation-modal.is-visible .profile-creation-modal-card{
  transform:translateY(0) scale(1);
}

.profile-creation-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f4f6fa;
  color:#536079;
  font:inherit;
  font-size:22px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
}

.profile-creation-modal-kicker{
  display:block;
  margin:0 42px 8px 0;
  color:#8a7ce6;
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
}

.profile-creation-modal-card h2{
  margin:0 42px 10px 0;
  color:var(--profile-request-modal-ink);
  font-size:21px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.45;
}

.profile-creation-modal-description{
  margin:0;
  color:var(--profile-request-modal-muted);
  font-size:12px;
  font-weight:400;
  line-height:1.85;
}

.profile-creation-form{
  display:grid;
  gap:13px;
  margin-top:22px;
}

.profile-creation-form label{
  display:grid;
  gap:7px;
  color:#3f485c;
  font-size:11px;
  font-weight:500;
}

.profile-creation-form input{
  width:100%;
  min-height:46px;
  padding:10px 13px;
  border:1px solid #d8dde7;
  border-radius:8px;
  background:#fff;
  color:var(--profile-request-modal-ink);
  font:inherit;
  font-size:12px;
  font-weight:400;
  outline:0;
}

.profile-creation-form input:focus{
  border-color:#a58ee8;
  box-shadow:0 0 0 3px rgba(126,100,220,.11);
}

.profile-creation-form-note{
  margin:-3px 0 1px;
  color:#818a9d;
  font-size:10px;
  font-weight:400;
  line-height:1.7;
}

.profile-creation-form button[type="submit"]{
  min-height:46px;
  padding:0 18px;
  border:0;
  border-radius:8px;
  background:linear-gradient(105deg,#fb147d 0%,#984de8 50%,#1599f7 100%);
  box-shadow:0 8px 20px rgba(74,87,226,.18);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
}

.profile-creation-form button[type="submit"]:disabled{
  cursor:wait;
  opacity:.58;
}

.profile-creation-status{
  min-height:21px;
  margin:0;
  color:#26715a;
  font-size:11px;
  font-weight:400;
  line-height:1.7;
}

.profile-creation-status.is-error{
  color:#b1435b;
}

.profile-creation-status a{
  color:#4b55d9;
  font-weight:500;
  text-underline-offset:3px;
}

@media (hover:hover) and (pointer:fine){
  .profile-creation-modal-close:hover{
    background:#e9edf4;
    color:#30384f;
  }

  .profile-creation-form button[type="submit"]:hover:not(:disabled){
    filter:saturate(.94) brightness(.98);
  }
}

@media (max-width:560px){
  .profile-creation-modal{
    place-items:center;
    padding:16px;
  }

  .profile-creation-modal-card{
    width:100%;
    max-height:calc(100dvh - 32px);
    padding:27px 20px 23px;
    border-radius:14px;
  }

  .profile-creation-modal-card h2{
    font-size:19px;
  }

  .profile-creation-modal-description{
    font-size:11px;
  }
}

@media (prefers-reduced-motion:reduce){
  .profile-creation-modal-backdrop,
  .profile-creation-modal-card{
    transition:none;
  }
}