/* Private-preview password page (launch-screen style of design/vector-x-mockup.html .vx-launch; brand colours docs/09). */
:root {
  color-scheme: dark;
  --ink: #0c1119;
  --pearl: #f4f6f8;
  --grey: #aeb7c4;
  --field: #161d28;
  --line: #2a3442;
  --action: #1f6fe5; /* white text 4.7:1 (docs/06) */
  --error: #ff7e77;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--pearl);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 48px);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}
.lockup {
  width: min(84vw, 440px);
  height: auto;
  display: block;
}
form {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
}
p {
  margin: 0;
  color: var(--grey);
  font-size: 15px;
}
label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 8px;
}
input {
  font: inherit;
  font-size: 17px; /* 16 px or more: iOS Safari doesn't zoom on focus */
  color: var(--pearl);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 48px;
  padding: 0 14px;
}
input:focus-visible,
button:focus-visible {
  outline: 2px solid #4a8ff8;
  outline-offset: 2px;
}
button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--action);
  border: 0;
  border-radius: 8px;
  min-height: 48px;
  cursor: pointer;
}
button:active {
  filter: brightness(0.86);
}
.error {
  color: var(--error);
  font-size: 15px;
}
footer {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}