.profile-choice-shell {
  min-height: 100svh;
}

.profile-home-link {
  justify-self: end;
  padding: 13px 18px;
  border: 1px solid rgba(243,245,246,.18);
  color: rgba(243,245,246,.78);
  font: 700 12px/1 var(--mono);
  letter-spacing: .14em;
  text-decoration: none;
  transition: border-color 250ms ease, color 250ms ease, background 250ms ease;
}

.profile-home-link:hover,
.profile-home-link:focus-visible {
  outline: none;
  color: var(--white);
  border-color: rgba(81,215,238,.62);
  background: rgba(81,215,238,.06);
}

.profile-choice {
  position: absolute;
  z-index: 10;
  left: clamp(24px, 7vw, 110px);
  top: 50%;
  width: min(720px, 53vw);
  transform: translateY(-45%);
}

.profile-choice h1 {
  margin: 0;
  font-size: clamp(64px, 6.7vw, 112px);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .84;
  text-transform: uppercase;
}

.profile-choice__lead {
  max-width: 680px;
  margin: 28px 0 30px;
  color: rgba(243,245,246,.7);
  font-size: clamp(17px, 1.22vw, 21px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.015em;
}

.profile-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.profile-option {
  position: relative;
  min-height: 142px;
  padding: 24px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  color: var(--white);
  background: rgba(5,7,9,.4);
  text-decoration: none;
  transition: background 300ms ease;
}

.profile-option + .profile-option {
  border-left: 1px solid var(--rule);
}

.profile-option::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(.16,1,.3,1);
}

.profile-option--existing::after {
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(81,215,238,.72);
}

.profile-option--new::after {
  background: var(--magenta);
  box-shadow: 0 0 18px rgba(213,78,183,.72);
}

.profile-option:hover,
.profile-option:focus-visible {
  outline: none;
  background: rgba(243,245,246,.065);
}

.profile-option:hover::after,
.profile-option:focus-visible::after {
  transform: scaleX(1);
}

.profile-option__number {
  color: rgba(243,245,246,.34);
  font: 700 9px/1 var(--mono);
}

.profile-option__content {
  display: grid;
  gap: 8px;
}

.profile-option__content small {
  color: rgba(243,245,246,.38);
  font: 700 7px/1.2 var(--mono);
  letter-spacing: .13em;
}

.profile-option__content strong {
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.05;
  letter-spacing: .025em;
}

.profile-option__content em {
  color: rgba(243,245,246,.54);
  font-size: 13px;
  font-style: normal;
}

.profile-option__arrow {
  color: rgba(243,245,246,.55);
  font-size: 21px;
  transition: transform 250ms ease, color 250ms ease;
}

.profile-option:hover .profile-option__arrow,
.profile-option:focus-visible .profile-option__arrow {
  color: var(--white);
  transform: translate(3px, -3px);
}

.profile-choice__note {
  margin: 18px 0 0;
  color: rgba(243,245,246,.34);
  font: 700 8px/1.4 var(--mono);
  letter-spacing: .14em;
}

.profile-signal {
  left: 72%;
  opacity: .8;
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .profile-choice-shell { min-height: 100svh; overflow: hidden; }
  .profile-choice {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 100svh;
    padding: 130px 24px 92px;
    transform: none;
  }
  .profile-choice h1 { font-size: clamp(58px, 16vw, 82px); }
  .profile-choice__lead { margin: 20px 0 24px; font-size: 16px; }
  .profile-options { grid-template-columns: 1fr; }
  .profile-option { min-height: 108px; padding: 18px 16px; }
  .profile-option + .profile-option { border-left: 0; border-top: 1px solid var(--rule); }
  .profile-option__content strong { font-size: 18px; }
  .profile-option__content em { font-size: 12px; }
  .profile-signal { left: 72%; top: 28%; opacity: .45; }
  .profile-home-link { padding: 11px 13px; font-size: 10px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .profile-choice { transform: translateY(-41%); }
  .profile-choice h1 { font-size: clamp(58px, 5.9vw, 88px); }
  .profile-choice__lead { margin: 18px 0 20px; }
  .profile-option { min-height: 118px; padding: 18px; }
}