:root {
  --void: #050506;
  --ink: #e7e9ee;
  --silver: #b9bec9;
  --mute: rgba(185, 190, 201, 0.5);
  --edge: rgba(236, 240, 248, 0.1);
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--void);
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.gate {
  position: absolute; /* see #app in styles/app.css */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: var(--app-h, 100lvh);
  display: grid;
  place-items: center;
  font: 400 12px/1.5 var(--mono);
}

.gate__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.gate[data-state="intro"] .gate__sky,
.gate[data-state="welcome"] .gate__sky { opacity: 1; }
.gate[data-state="form"] .gate__sky,
.gate[data-state="setup"] .gate__sky { opacity: 0.22; }
.gate[data-state="unknown"] .gate__sky { opacity: 0.12; transition-duration: 1.2s; }

.gate__mark {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.32em;
  color: var(--silver);
  opacity: 0.8;
}

.gate__center {
  position: relative;
  width: min(100% - 48px, 340px);
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.gate__welcome {
  margin: 0;
  font: 400 13px/1 var(--mono);
  letter-spacing: 0.42em;
  color: var(--ink);
  animation: rise 1.4s ease both;
}

.gate__unknown { display: grid; gap: 8px; animation: rise 1s ease both; }
.gate__unknown-title { margin: 0; font: 300 15px/1 var(--mono); letter-spacing: 0.14em; color: var(--silver); }
.gate__unknown-sub { margin: 0; font: 400 10px/1 var(--mono); letter-spacing: 0.24em; color: var(--mute); text-transform: uppercase; }

.gate__form, .gate__setup {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: rise 0.8s ease both;
}
.gate__note { color: var(--silver); line-height: 1.55; text-align: left; }
.gate__label, .gate__note { margin: 0; color: var(--mute); font-size: 11px; letter-spacing: 0.06em; }
.gate__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: rgba(15, 16, 20, 0.6);
  color: var(--ink);
  font: 400 15px/1 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
  outline: none;
}
.gate__input:focus { border-color: rgba(236, 240, 248, 0.28); }
.gate__input::placeholder { color: var(--mute); }

.gate__button, .gate__go {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: rgba(15, 16, 20, 0.55);
  color: var(--silver);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.22em;
  cursor: pointer;
  justify-self: center;
}
.gate__button:focus-visible, .gate__go:focus-visible { outline: 1px solid var(--silver); outline-offset: 3px; }

.gate__go {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
  left: 50%;
  transform: translateX(-50%);
  animation: rise 1.2s ease 0.9s both;
}

.gate__env { margin: 0; display: grid; gap: 10px; text-align: left; }
.gate__env div { display: grid; gap: 4px; }
.gate__env dt { color: var(--silver); font-size: 10px; letter-spacing: 0.1em; }
.gate__env dd {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.gate__env code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--ink);
  font: 400 10px/1.3 var(--mono);
  overflow-wrap: anywhere;
  max-height: 5.4em;
  overflow: auto;
  -webkit-user-select: all;
  user-select: all;
}
.gate__env button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: none;
  color: var(--silver);
  font: 400 10px/1 var(--mono);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.gate__go { animation-name: rise-go; }
@keyframes rise-go {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}