/* Страница входа: большую часть экрана занимает живой шар, внизу — одна строка для пароля.
   Размеры считаются от экрана: на телефоне, планшете и мониторе выглядит одинаково, прокрутки нет. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; --u: clamp(16px, 2.4vmin, 21px); }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, #0e1018 0%, #050608 70%);
  color: #a6acb8;
  font: var(--u)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
main {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center;
  padding: env(safe-area-inset-top) 20px calc(env(safe-area-inset-bottom) + 5dvh);
}
.orb { width: min(96vw, 74dvh); aspect-ratio: 1; max-height: 100%; display: block; pointer-events: none; }

form { width: min(100%, 22em); display: grid; gap: .5em; }
.field { position: relative; }
input {
  font: inherit; font-size: 1.1em; width: 100%; height: 3.1em; padding: 0 3.3em 0 1.4em;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05); color: #f3f4f7; outline: none;
  transition: border-color .25s, box-shadow .25s;
}
input::placeholder { color: #6d7380; }
input:focus-visible { border-color: rgba(151, 148, 255, .6); box-shadow: 0 0 0 3px rgba(151, 148, 255, .16); }
button {
  position: absolute; right: .35em; top: 50%; transform: translateY(-50%);
  width: 2.7em; height: 2.7em; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-size: 1em;
  background: rgba(151, 148, 255, .24); color: #eef0ff; outline: none;
  transition: background .25s, opacity .25s;
}
button svg { width: 52%; height: 52%; }
button:hover { background: rgba(151, 148, 255, .38); }
button:focus-visible { box-shadow: 0 0 0 3px rgba(151, 148, 255, .35); }
button:disabled { opacity: .45; cursor: default; }
#msg { min-height: 1.4em; font-size: .85em; text-align: center; color: #ff6369; }