:root {
  color-scheme: dark;
  --ink: #030806;
  --bone: #eef2e8;
  --mist: rgba(238, 242, 232, 0.42);
  --line: rgba(190, 255, 130, 0.18);
  --acid: #b9ff65;
  --mint: #65efbd;
  --coral: #ff765e;
  --mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(101, 239, 189, 0.04), transparent 28%),
    linear-gradient(145deg, #020604 0%, #06100b 52%, #020403 100%);
}

.orb {
  position: absolute;
  display: block;
  border-radius: 48% 52% 62% 38% / 43% 41% 59% 57%;
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: drift 18s ease-in-out infinite alternate;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(185, 255, 101, 0.13);
  box-shadow: inset 0 0 70px rgba(101, 239, 189, 0.035);
}

.orb-one {
  width: min(68vw, 920px);
  aspect-ratio: 1;
  left: -24vw;
  top: -38vh;
  background: radial-gradient(circle at 68% 70%, rgba(101, 239, 189, 0.1), transparent 58%);
  transform: rotate(14deg);
}

.orb-two {
  width: min(55vw, 760px);
  aspect-ratio: 1;
  right: -18vw;
  bottom: -34vh;
  background: radial-gradient(circle at 30% 28%, rgba(185, 255, 101, 0.09), transparent 60%);
  animation-delay: -8s;
  animation-direction: alternate-reverse;
}

.orb-three {
  width: 36vw;
  min-width: 420px;
  aspect-ratio: 1.35;
  left: 40%;
  top: 31%;
  opacity: 0.55;
  background: radial-gradient(ellipse, rgba(73, 126, 102, 0.13), transparent 68%);
  animation-duration: 13s;
  animation-delay: -4s;
}

.horizon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132vw;
  height: 1px;
  transform: translate(-50%, -50%) rotate(-7deg);
  background: linear-gradient(90deg, transparent 5%, rgba(101, 239, 189, 0.06), rgba(185, 255, 101, 0.28), rgba(101, 239, 189, 0.06), transparent 95%);
  box-shadow: 0 0 40px rgba(185, 255, 101, 0.08);
}

.gateway {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.portal {
  width: min(90vw, 520px);
  display: grid;
  justify-items: center;
  perspective: 900px;
}

.sigil {
  position: relative;
  width: clamp(76px, 10vw, 112px);
  aspect-ratio: 1;
  margin-bottom: clamp(34px, 6vh, 64px);
  border: 1px solid rgba(238, 242, 232, 0.65);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(185, 255, 101, 0.012),
    0 0 80px rgba(101, 239, 189, 0.07),
    inset 0 0 40px rgba(101, 239, 189, 0.035);
  animation: breathe 7s ease-in-out infinite;
}

.sigil::before,
.sigil::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid));
}

.sigil::before { right: 92%; transform: rotate(27deg); transform-origin: right; }
.sigil::after { left: 92%; transform: rotate(153deg); transform-origin: left; }

.sigil span {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(101, 239, 189, 0.16);
  border-radius: 46% 54% 48% 52%;
  animation: orbit 15s linear infinite;
}

.sigil i {
  position: absolute;
  width: 5px;
  height: 5px;
  left: calc(50% - 2px);
  top: -3px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 16px rgba(185, 255, 101, 0.9);
}

h1 {
  margin: 0;
  font: 700 clamp(17px, 2vw, 22px)/1 var(--mono);
  letter-spacing: 0.13em;
  text-indent: 0.13em;
}

h1 b { color: var(--acid); font-weight: 700; }

.pulse-line {
  position: relative;
  width: min(76vw, 360px);
  height: 1px;
  margin: clamp(28px, 5vh, 48px) 0;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(238, 242, 232, 0.15), transparent);
}

.pulse-line i {
  position: absolute;
  inset: 0 auto 0 -25%;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  animation: scan 3.8s ease-in-out infinite;
}

form {
  width: min(76vw, 360px);
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 58px;
  border: 1px solid rgba(238, 242, 232, 0.16);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(238, 242, 232, 0.025);
  box-shadow: 0 18px 80px rgba(0, 0, 0, 0.34), inset 0 0 28px rgba(101, 239, 189, 0.015);
  backdrop-filter: blur(18px);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

form:focus-within {
  border-color: rgba(185, 255, 101, 0.5);
  box-shadow: 0 18px 90px rgba(0, 0, 0, 0.38), 0 0 34px rgba(185, 255, 101, 0.08);
  transform: translateY(-2px);
}

input, button {
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
}

input {
  width: 100%;
  padding: 0 8px 0 25px;
  background: transparent;
  color: var(--bone);
  font-size: 20px;
  letter-spacing: 0.32em;
}

button {
  position: relative;
  display: grid;
  place-items: center;
  margin: 7px;
  border-radius: 50%;
  background: rgba(185, 255, 101, 0.09);
  color: var(--acid);
  cursor: pointer;
  font-size: 20px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

button:hover,
button:focus-visible {
  background: var(--acid);
  color: var(--ink);
  transform: rotate(-8deg);
}

.login-error {
  width: 6px;
  height: 6px;
  margin: -15px 0 18px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--coral);
  color: transparent;
  box-shadow: 0 0 18px rgba(255, 118, 94, 0.7);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(8deg) scale(0.98); }
  to { transform: translate3d(3%, 2%, 0) rotate(18deg) scale(1.05); }
}

@keyframes breathe {
  0%, 100% { transform: scale(0.98); opacity: 0.76; }
  50% { transform: scale(1.035); opacity: 1; }
}

@keyframes orbit { to { transform: rotate(360deg); } }

@keyframes scan {
  0% { left: -25%; opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 520px) {
  .gateway { padding: 20px; }
  .sigil { margin-bottom: 40px; }
  form { width: min(88vw, 360px); }
}