:root {
  --jp-accent: #4c72ff;
  --jp-accent-deep: #2b46e0;
  --jp-accent-soft: rgba(90, 130, 255, 0.35);
  --jp-ink: #f4f6fb;
  --jp-muted: #7a8199;
  --jp-faint: #62687e;
  --jp-line: rgba(255, 255, 255, 0.06);
  --jp-panel-bg-top: rgba(16, 17, 22, 0.92);
  --jp-panel-bg-bottom: rgba(6, 7, 10, 0.92);
  --jp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.jp-auth {
  min-height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #000;
}

.jp-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(70, 120, 255, 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(70, 120, 255, 0.05) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(circle at 50% 28%, black, transparent 68%);
  pointer-events: none;
}

.jp-auth::after {
  content: "";
  position: absolute;
  top: -14%;
  left: 50%;
  translate: -50% 0;
  width: 60rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(56, 100, 255, 0.14), transparent 66%);
  pointer-events: none;
}

.jp-auth-frame {
  position: relative;
  z-index: 1;
  width: min(100%, 26.25rem);
  padding: 2rem 1.25rem;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.jp-badge,
.jp-auth-heading,
.jp-panel,
.jp-return-link {
  opacity: 0;
  animation: jp-rise 640ms var(--jp-ease) forwards;
}

.jp-badge { animation-delay: 40ms; margin-bottom: 1.375rem; }
.jp-auth-heading { animation-delay: 160ms; }
.jp-panel { animation-delay: 320ms; margin-top: 1.875rem; }
.jp-return-link { animation-delay: 520ms; margin-top: 1.625rem; }

@keyframes jp-rise {
  from { opacity: 0; translate: 0 0.625rem; }
  to { opacity: 1; translate: 0 0; }
}

.jp-badge {
  position: relative;
  width: 5.75rem;
  height: 5.75rem;
  display: grid;
  place-items: center;
}

.jp-badge-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(100, 145, 255, 0.3);
  font-style: normal;
}

.jp-badge-halo.h1 { animation: jp-halo-pulse 3.2s ease-out infinite; }
.jp-badge-halo.h2 { inset: -1rem; border-color: rgba(100, 145, 255, 0.16); animation: jp-halo-pulse 3.2s ease-out 0.7s infinite; }
.jp-badge-halo.h3 { inset: -2rem; border-color: rgba(100, 145, 255, 0.08); animation: jp-halo-pulse 3.2s ease-out 1.4s infinite; }

@keyframes jp-halo-pulse {
  0% { scale: 0.92; opacity: 0; }
  15% { opacity: 1; }
  100% { scale: 1.14; opacity: 0; }
}

.jp-badge-core {
  position: relative;
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(80, 120, 255, 0.18), transparent 60%);
  filter: drop-shadow(0 0 1.125rem rgba(70, 110, 255, 0.55));
}

.jp-auth-heading h1 {
  font-size: 1.6875rem;
  font-weight: 700;
  color: var(--jp-ink);
  letter-spacing: -0.025rem;
  margin: 0 0 0.4375rem;
}

.jp-auth-heading p {
  font-size: 0.84375rem;
  color: var(--jp-muted);
  margin: 0;
}

.jp-panel {
  --spot-x: 50%;
  --spot-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--jp-panel-bg-top), var(--jp-panel-bg-bottom));
  border: 1px solid var(--jp-line);
  border-radius: 1.125rem;
  padding: 1.75rem 1.5rem;
  display: grid;
  justify-items: center;
  gap: 0;
  transform-style: preserve-3d;
  transform: perspective(56.25rem) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1.5rem 3.75rem -1.25rem rgba(0, 0, 0, 0.85);
  transition: transform 0.25s var(--jp-ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.jp-panel.jp-active {
  border-color: rgba(110, 150, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1.5rem 3.75rem -1.25rem rgba(0, 0, 0, 0.85),
    0 0 2.5rem -0.375rem rgba(70, 110, 255, 0.35);
}

.jp-panel-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(17.5rem circle at var(--spot-x) var(--spot-y), rgba(90, 130, 255, 0.14), transparent 70%);
  transition: opacity 0.3s ease;
}

.jp-panel.jp-active .jp-panel-sheen { opacity: 1; }

.jp-bracket {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(107, 150, 255, 0.5);
  opacity: 0.75;
  font-style: normal;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.jp-bracket.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 0.5rem; }
.jp-bracket.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 0.5rem; }
.jp-bracket.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 0.5rem; }
.jp-bracket.br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 0.5rem; }

.jp-panel.jp-active .jp-bracket {
  opacity: 1;
  border-color: rgba(140, 175, 255, 0.85);
}

.jp-oauth-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.6875rem;
  background: linear-gradient(155deg, var(--jp-accent), var(--jp-accent-deep));
  color: #fff;
  font-size: 0.90625rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: translate 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.jp-oauth-btn:hover {
  filter: brightness(1.1);
  translate: 0 -1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0.875rem 1.75rem -0.625rem var(--jp-accent-soft);
}

.jp-oauth-btn:active { translate: 0 0; }

.jp-oauth-btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.38;
  background: #17181d;
  color: #6d7387;
  box-shadow: none;
}

.jp-split {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.125rem;
  color: #565c72;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.0125rem;
}

.jp-split em {
  font-style: normal;
  white-space: nowrap;
}

.jp-split::before,
.jp-split::after {
  content: "";
  flex: 1;
  height: 1px;
}

.jp-split::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1)); }
.jp-split::after { background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent); }

.jp-captcha-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 4.0625rem;
}

.jp-footnote {
  position: relative;
  z-index: 1;
  margin: 1.125rem 0 0;
  font-size: 0.78125rem;
  color: var(--jp-faint);
  text-align: center;
  line-height: 1.5;
}

.jp-emoji {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  vertical-align: -0.5em;
  margin: 0 0.15em;
}

.jp-return-link {
  font-size: 0.8125rem;
  color: #767d94;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease, translate 0.2s ease;
}

.jp-return-link:hover {
  color: var(--jp-ink);
  translate: -0.125rem 0;
}

.jp-oauth-btn:focus-visible,
.jp-return-link:focus-visible {
  outline: 2px solid #6b96ff;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

@media (prefers-reduced-motion: reduce) {
  .jp-badge,
  .jp-auth-heading,
  .jp-panel,
  .jp-return-link,
  .jp-badge-halo,
  .jp-badge-core {
    animation: none;
    opacity: 1;
  }

  .jp-panel { transition: none; }
}

@media (max-width: 30rem) {
  .jp-auth-heading h1 { font-size: 1.4375rem; }
  .jp-panel { padding: 1.375rem 1.125rem; }
}