@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --space: #05090d;
  --panel: rgba(8, 18, 25, .88);
  --panel-strong: #09151d;
  --cyan: #55e7ff;
  --cyan-bright: #b8f7ff;
  --cyan-muted: rgba(85, 231, 255, .5);
  --cyan-faint: rgba(85, 231, 255, .12);
  --violet: #a78bfa;
  --ink: #ecfcff;
  --ink-muted: #91acb5;
  --danger: #ff8e9a;
  --line: rgba(85, 231, 255, .28);
  --shadow: 0 0 3rem rgba(0, 202, 255, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 19rem; background: var(--space); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(41, 177, 213, .15), transparent 28rem),
    radial-gradient(circle at 82% 70%, rgba(117, 74, 214, .12), transparent 32rem),
    var(--space);
  color: var(--ink);
  font-family: "Inter", ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.5;
}

button, input { font: inherit; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: .2rem solid var(--cyan-bright);
  outline-offset: .2rem;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: .75rem;
  left: .75rem;
  padding: .65rem 1rem;
  transform: translateY(-180%);
  border: 1px solid var(--cyan);
  background: var(--panel-strong);
  color: var(--ink);
}

.skip-link:focus { transform: translateY(0); }

.starfield,
.starfield::before,
.starfield::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.starfield {
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 58% 45%, #000 0, rgba(0, 0, 0, .96) 10rem, transparent 32rem);
  opacity: .82;
}

.starfield::after {
  content: "";
  inset: -30%;
  background: conic-gradient(from 180deg at 50% 50%, transparent, rgba(85, 231, 255, .04), transparent 22%);
  animation: signal-sweep 18s linear infinite;
}

.orb {
  position: absolute;
  display: block;
  border: 1px solid rgba(85, 231, 255, .25);
  border-radius: 50%;
  box-shadow: inset 0 0 2rem rgba(85, 231, 255, .06), 0 0 2rem rgba(85, 231, 255, .05);
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  border: inherit;
  border-radius: inherit;
}

.orb::before { inset: 12%; }
.orb::after { inset: 29%; border-style: dashed; }
.orb-one { top: -10rem; right: -8rem; width: 32rem; height: 32rem; animation: orbit 32s linear infinite; }
.orb-two { bottom: -14rem; left: -10rem; width: 27rem; height: 27rem; animation: orbit 42s linear infinite reverse; }

.warp-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 0 .35rem rgba(85, 231, 255, .65));
}

.warp-field::before {
  content: "";
  position: absolute;
  left: 58%;
  top: 45%;
  width: clamp(13rem, 24vw, 22rem);
  height: clamp(4.2rem, 8vw, 7rem);
  transform: translate(-50%, -50%) rotate(-7deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, transparent 0 23%, rgba(0, 0, 0, .92) 25% 30%, transparent 32%),
    conic-gradient(
      from 35deg,
      transparent 0 7%,
      rgba(85, 231, 255, .16) 11%,
      rgba(184, 247, 255, .95) 17%,
      rgba(167, 139, 250, .45) 24%,
      transparent 34% 47%,
      rgba(85, 231, 255, .65) 57%,
      rgba(255, 255, 255, .9) 64%,
      rgba(167, 139, 250, .3) 73%,
      transparent 84%
    );
  box-shadow: 0 0 2.8rem rgba(85, 231, 255, .13), 0 0 5rem rgba(167, 139, 250, .07);
  filter: blur(.18rem);
  animation: black-hole-accretion 240s linear infinite;
}

.warp-field::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 45%;
  width: clamp(4rem, 7vw, 6.2rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(184, 247, 255, .3);
  border-radius: 50%;
  background: #000;
  box-shadow:
    0 0 .75rem .15rem rgba(0, 0, 0, 1),
    0 0 1.35rem rgba(184, 247, 255, .32),
    0 0 3.8rem rgba(85, 231, 255, .12);
  animation: event-horizon 24s ease-in-out infinite;
}

.warp-field span {
  --angle: 0deg;
  --duration: 2.4s;
  --delay: 0s;
  position: absolute;
  left: 58%;
  top: 45%;
  width: .09rem;
  height: clamp(2.5rem, 8vw, 7rem);
  transform-origin: 50% 0;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(85, 231, 255, .18) 32%,
    rgba(85, 231, 255, .76) 76%,
    rgba(255, 255, 255, .98)
  );
  opacity: 0;
  animation: warp-flight var(--duration) linear var(--delay) infinite;
}

.warp-field span:nth-child(1) { --angle: 5deg; --duration: 13.7s; --delay: -9.2s; height: 4.1rem; }
.warp-field span:nth-child(2) { --angle: 13deg; --duration: 19.3s; --delay: -2.6s; height: 6.8rem; }
.warp-field span:nth-child(3) { --angle: 29deg; --duration: 11.9s; --delay: -7.4s; height: 3.2rem; }
.warp-field span:nth-child(4) { --angle: 48deg; --duration: 16.8s; --delay: -14.1s; height: 5.7rem; }
.warp-field span:nth-child(5) { --angle: 52deg; --duration: 21.1s; --delay: -10.3s; height: 2.9rem; }
.warp-field span:nth-child(6) { --angle: 76deg; --duration: 14.6s; --delay: -5.8s; height: 7.3rem; }
.warp-field span:nth-child(7) { --angle: 91deg; --duration: 18.4s; --delay: -16.7s; height: 4.8rem; }
.warp-field span:nth-child(8) { --angle: 107deg; --duration: 10.7s; --delay: -1.9s; height: 3.6rem; }
.warp-field span:nth-child(9) { --angle: 115deg; --duration: 15.9s; --delay: -12.5s; height: 6.1rem; }
.warp-field span:nth-child(10) { --angle: 141deg; --duration: 20.4s; --delay: -7.7s; height: 4.4rem; }
.warp-field span:nth-child(11) { --angle: 149deg; --duration: 12.8s; --delay: -3.8s; height: 7rem; }
.warp-field span:nth-child(12) { --angle: 168deg; --duration: 17.6s; --delay: -15.2s; height: 3.1rem; }
.warp-field span:nth-child(13) { --angle: 191deg; --duration: 11.3s; --delay: -8.1s; height: 5.2rem; }
.warp-field span:nth-child(14) { --angle: 207deg; --duration: 18.9s; --delay: -1.3s; height: 6.5rem; }
.warp-field span:nth-child(15) { --angle: 211deg; --duration: 14.1s; --delay: -11.4s; height: 3.8rem; }
.warp-field span:nth-child(16) { --angle: 238deg; --duration: 21.7s; --delay: -6.2s; height: 5.9rem; }
.warp-field span:nth-child(17) { --angle: 246deg; --duration: 10.9s; --delay: -8.8s; height: 2.7rem; }
.warp-field span:nth-child(18) { --angle: 263deg; --duration: 16.3s; --delay: -14.8s; height: 7.1rem; }
.warp-field span:nth-child(19) { --angle: 279deg; --duration: 13.2s; --delay: -3.1s; height: 4.6rem; }
.warp-field span:nth-child(20) { --angle: 294deg; --duration: 19.8s; --delay: -12.9s; height: 3.4rem; }
.warp-field span:nth-child(21) { --angle: 316deg; --duration: 11.6s; --delay: -6.9s; height: 6.9rem; }
.warp-field span:nth-child(22) { --angle: 323deg; --duration: 17.1s; --delay: -.9s; height: 4.2rem; }
.warp-field span:nth-child(23) { --angle: 347deg; --duration: 14.9s; --delay: -13.6s; height: 5.5rem; }
.warp-field span:nth-child(24) { --angle: 354deg; --duration: 20.8s; --delay: -8.5s; height: 3rem; }
.warp-field span:nth-child(25) { --angle: 36deg; --duration: 12.4s; --delay: -4.7s; height: 6.3rem; }
.warp-field span:nth-child(26) { --angle: 132deg; --duration: 18.1s; --delay: -16.1s; height: 3.7rem; }
.warp-field span:nth-child(27) { --angle: 222deg; --duration: 15.4s; --delay: -9.8s; height: 7.4rem; }
.warp-field span:nth-child(28) { --angle: 303deg; --duration: 21.4s; --delay: -18.2s; height: 4.9rem; }
.warp-field span:nth-child(n + 29) { width: .065rem; }
.warp-field span:nth-child(29) { --angle: 21deg; --duration: 17.9s; --delay: -4.2s; height: 3.5rem; }
.warp-field span:nth-child(30) { --angle: 63deg; --duration: 12.1s; --delay: -9.1s; height: 5.4rem; }
.warp-field span:nth-child(31) { --angle: 81deg; --duration: 20.2s; --delay: -17.3s; height: 2.8rem; }
.warp-field span:nth-child(32) { --angle: 101deg; --duration: 14.4s; --delay: -6.6s; height: 4.7rem; }
.warp-field span:nth-child(33) { --angle: 124deg; --duration: 18.7s; --delay: -12.2s; height: 6.2rem; }
.warp-field span:nth-child(34) { --angle: 157deg; --duration: 11.1s; --delay: -3.4s; height: 3.9rem; }
.warp-field span:nth-child(35) { --angle: 177deg; --duration: 16.1s; --delay: -14.7s; height: 5.8rem; }
.warp-field span:nth-child(36) { --angle: 198deg; --duration: 20.9s; --delay: -8.3s; height: 3.2rem; }
.warp-field span:nth-child(37) { --angle: 232deg; --duration: 13.5s; --delay: -10.6s; height: 6.7rem; }
.warp-field span:nth-child(38) { --angle: 255deg; --duration: 19.1s; --delay: -1.7s; height: 4.1rem; }
.warp-field span:nth-child(39) { --angle: 274deg; --duration: 12.6s; --delay: -7.9s; height: 5.1rem; }
.warp-field span:nth-child(40) { --angle: 308deg; --duration: 17.4s; --delay: -15.8s; height: 2.6rem; }
.warp-field span:nth-child(41) { --angle: 334deg; --duration: 21.2s; --delay: -11.7s; height: 6.4rem; }
.warp-field span:nth-child(42) { --angle: 359deg; --duration: 14.8s; --delay: -5.1s; height: 3.7rem; }
.warp-field span:nth-child(43) { --angle: 44deg; --duration: 18.2s; --delay: -16.4s; height: 5.6rem; }
.warp-field span:nth-child(44) { --angle: 98deg; --duration: 11.7s; --delay: -2.8s; height: 3.3rem; }
.warp-field span:nth-child(45) { --angle: 186deg; --duration: 16.6s; --delay: -13.1s; height: 6rem; }
.warp-field span:nth-child(46) { --angle: 267deg; --duration: 19.6s; --delay: -7.2s; height: 4.3rem; }
.warp-field span:nth-child(47) { --angle: 289deg; --duration: 13.9s; --delay: -11.2s; height: 5.3rem; }
.warp-field span:nth-child(48) { --angle: 345deg; --duration: 20.6s; --delay: -18.9s; height: 3rem; }

.scan-beam {
  position: fixed;
  z-index: 0;
  top: -35vh;
  right: -20vw;
  width: 140vw;
  height: 22vh;
  transform: rotate(-12deg);
  background: linear-gradient(to bottom, transparent, rgba(85, 231, 255, .045), transparent);
  filter: blur(1rem);
  pointer-events: none;
  animation: scan-pass 11s ease-in-out infinite;
}

.launch-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(75rem, calc(100% - 2rem));
  min-height: 100vh;
  margin-inline: auto;
  padding-block: 1.25rem;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.launch-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--cyan-bright);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .18em;
}

.launch-brand img {
  width: 5.8rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.brand-label { padding-left: 1rem; border-left: 1px solid var(--line); }

.system-kicker {
  margin: 0 0 1rem;
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .2em;
}

.system-kicker span {
  display: inline-block;
  margin-right: .55rem;
  animation: status-pulse 1.8s ease-in-out infinite;
}

.launch-copy h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3rem, 9vw, 6.7rem);
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: .88;
}

.launch-copy h1 span {
  color: var(--cyan);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 1.4rem rgba(85, 231, 255, .2);
}

.launch-lead {
  max-width: 37rem;
  margin: 1.75rem 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.system-readout {
  display: grid;
  max-width: 37rem;
  margin: 2rem 0 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.system-readout div { padding: .8rem .8rem .8rem 0; }
.system-readout div + div { padding-left: .8rem; border-left: 1px solid var(--line); }
.system-readout dt { color: var(--ink-muted); font-size: .59rem; letter-spacing: .16em; }
.system-readout dd { margin: .15rem 0 0; font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.system-readout .status-ready { color: var(--cyan-bright); }

.access-terminal {
  position: relative;
  max-width: 29rem;
  width: 100%;
  justify-self: center;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 0 3rem rgba(85, 231, 255, .025);
  backdrop-filter: blur(1rem);
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 1.5rem 100%, 0 calc(100% - 1.5rem));
}

.access-terminal::before {
  content: "";
  position: absolute;
  inset: .45rem;
  z-index: -1;
  border: 1px solid rgba(85, 231, 255, .08);
  clip-path: inherit;
}

.terminal-topbar {
  display: flex;
  justify-content: space-between;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  background: rgba(85, 231, 255, .055);
  color: var(--cyan-muted);
  font-size: .58rem;
  font-weight: 760;
  letter-spacing: .14em;
}

.terminal-content { padding: clamp(1.15rem, 5vw, 2rem); }

.terminal-heading {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.4rem;
}

.terminal-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid var(--cyan-muted);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 1.4rem;
  box-shadow: inset 0 0 .8rem var(--cyan-faint);
}

.terminal-heading p { margin: 0; color: var(--cyan); font-size: .58rem; letter-spacing: .13em; }
.terminal-heading h2 { margin: .1rem 0 0; font-size: 1.45rem; letter-spacing: -.02em; }

.access-form { display: grid; gap: 1rem; }
.code-field { display: grid; gap: .45rem; }
.code-field > label { color: var(--ink-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.code-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.8rem;
  padding-inline: 1rem;
  border: 1px solid var(--cyan-muted);
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 1.4rem rgba(0, 0, 0, .45);
}

.input-prefix { color: var(--cyan); font-size: .82rem; }

.code-input-wrap input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cyan-bright);
  font-size: 1.6rem;
  font-weight: 760;
  letter-spacing: .55em;
  text-align: center;
  caret-color: transparent;
}

.input-caret {
  width: .55rem;
  height: 1.15rem;
  background: var(--cyan);
  box-shadow: 0 0 .7rem var(--cyan);
  animation: caret-blink 1s steps(1) infinite;
}

.field-hint { color: var(--ink-muted); font-size: .7rem; }
.terminal-error { color: var(--danger); font-size: .76rem; }
.terminal-error:empty { display: none; }
.terminal-error ul { margin: 0; padding-left: 1.2rem; }

.pin-indicator {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .55rem;
}

.pin-indicator span {
  height: .2rem;
  background: rgba(85, 231, 255, .12);
  transition: background-color .16s ease, box-shadow .16s ease;
}

.pin-indicator span.is-filled { background: var(--cyan); box-shadow: 0 0 .6rem rgba(85, 231, 255, .7); }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}

.keypad button {
  min-height: 3.25rem;
  border: 1px solid var(--line);
  background: rgba(85, 231, 255, .035);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 720;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .08s ease;
}

.keypad button:hover { border-color: var(--cyan); background: var(--cyan-faint); color: var(--cyan-bright); }
.keypad button:active { transform: scale(.96); }
.keypad .keypad-function { color: var(--cyan-muted); font-size: .68rem; letter-spacing: .08em; }
.keypad .keypad-backspace { font-size: 1.1rem; }

.unlock-button {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.1rem;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: #031014;
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 0 1.25rem rgba(85, 231, 255, .16);
  transition: background-color .16s ease, box-shadow .16s ease;
}

.unlock-button:hover { background: var(--cyan-bright); box-shadow: 0 0 1.7rem rgba(85, 231, 255, .3); }
.unlock-button:disabled { cursor: wait; opacity: .7; }
.unlock-button span:last-child { font-size: 1.3rem; }

.terminal-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: .65rem;
  letter-spacing: .04em;
}

.terminal-status::before { content: "[LINK] "; color: var(--cyan); }

.launch-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  color: rgba(145, 172, 181, .6);
  font-size: .58rem;
  letter-spacing: .1em;
}

@keyframes signal-sweep { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes status-pulse { 50% { opacity: .3; text-shadow: 0 0 1rem var(--cyan); } }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes warp-flight {
  0% {
    transform: rotate(var(--angle)) translateY(1.5rem) scaleX(.25) scaleY(.025);
    opacity: 0;
    filter: brightness(.45);
  }
  18% { opacity: .12; }
  52% { opacity: .42; filter: brightness(.75); }
  86% { opacity: .92; }
  96% {
    transform: rotate(var(--angle)) translateY(82vmax) scaleX(1.45) scaleY(1.65);
    opacity: 1;
    filter: brightness(1.3);
  }
  100% {
    transform: rotate(var(--angle)) translateY(86vmax) scaleX(1.55) scaleY(1.75);
    opacity: 0;
    filter: brightness(1.4);
  }
}
@keyframes black-hole-accretion {
  to { transform: translate(-50%, -50%) rotate(353deg); }
}
@keyframes event-horizon {
  50% {
    box-shadow:
      0 0 .9rem .2rem rgba(0, 0, 0, 1),
      0 0 1.7rem rgba(184, 247, 255, .42),
      0 0 4.5rem rgba(85, 231, 255, .17);
  }
}
@keyframes scan-pass {
  0%, 22% { transform: translateY(-35vh) rotate(-12deg); opacity: 0; }
  32% { opacity: 1; }
  68% { opacity: .75; }
  82%, 100% { transform: translateY(170vh) rotate(-12deg); opacity: 0; }
}

@media (min-width: 58rem) {
  .launch-shell {
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .72fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
  }

  .launch-brand { grid-column: 1 / -1; }
  .access-terminal { justify-self: end; }
  .launch-footer { grid-column: 1 / -1; }
}

@media (max-width: 34rem) {
  .launch-shell { width: min(100% - 1rem, 75rem); padding-block: .75rem; }
  .brand-label { display: none; }
  .launch-copy h1 { font-size: clamp(2.9rem, 16vw, 4.3rem); }
  .system-readout dd { font-size: .62rem; }
  .terminal-content { padding: 1rem; }
  .keypad button { min-height: 3rem; }
  .launch-footer span:last-child { display: none; }
}

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