:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050706;
  color: #dbe2dc;
  --quiet: #858f88;
  --focus: #a9c9cd;
}

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

html { min-width: 240px; min-height: 100%; }

body {
  min-width: 240px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 42%, #1b242118 0, #05070600 48%),
    linear-gradient(118deg, #030504 15%, #0a0e0c 50%, #050706 84%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #050706;
  content: "";
}

button, input { font: inherit; }

.entrance {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px 28px 112px;
  place-items: center;
}

.gate {
  position: relative;
  width: min(100%, 258px);
}

.gate-label {
  display: block;
  margin: 0 0 8px 1px;
  color: #aeb9b0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .025em;
}

.gate-group:not([hidden]) + .gate-group { margin-top: 20px; }
.remembered-account { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 12px; }
.remembered-identity { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: #aeb9b0; font-size: 11px; line-height: 1.5; letter-spacing: .025em; }
.account-indicator { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #9cb18d; }
#remembered-username { min-width: 0; overflow-wrap: anywhere; }
.change-user { flex: none; min-height: 44px; max-width: calc(100% - 13px); margin-left: 13px; padding: 0; color: var(--quiet); background: transparent; border: 0; border-radius: 1px; font-size: 10px; line-height: 1.5; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.change-user:hover { color: #dbe2dc; }
.change-user:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 4px; }
.change-user:disabled { cursor: wait; color: var(--quiet); }

.gate-field {
  display: flex;
  height: 48px;
  background: #1017134d;
  border: 1px solid #b0c2b32b;
  border-radius: 1px;
  box-shadow: 0 16px 40px #0002, inset 0 1px #ffffff03;
  transition: border-color 160ms ease, background-color 160ms ease;
}

@supports (backdrop-filter: blur(12px)) {
  .gate-field { backdrop-filter: blur(12px); }
}

.gate-field:focus-within {
  background-color: #10171380;
  border-color: #a9c9cd8c;
}

input {
  width: 0;
  min-width: 0;
  flex: 1;
  height: 46px;
  padding: 0 14px 0 17px;
  color: #e1e8e1;
  caret-color: var(--focus);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  font-size: 16px;
  letter-spacing: .18em;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #e1e8e1;
  -webkit-box-shadow: 0 0 0 100px #101713 inset;
  caret-color: var(--focus);
}

#username { letter-spacing: .025em; }

.enter {
  display: grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  color: #b4c4b8;
  background: transparent;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  place-items: center;
  transition: color 160ms ease, background-color 160ms ease;
}

.enter svg { stroke: currentColor; stroke-width: 1.25; }
.enter:hover { color: #e1e8e1; background: #bccabc08; }
.enter:active { background: #bccabc14; }
.enter:disabled { cursor: wait; color: #858f88; }
.enter:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 4px; }

.message {
  position: absolute;
  top: 100%;
  right: -20px;
  left: -20px;
  margin: 15px 0 0;
  color: #cbb5a9;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

.signature, footer {
  position: fixed;
  z-index: 1;
  bottom: max(28px, env(safe-area-inset-bottom));
  color: var(--quiet);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.signature { left: max(30px, env(safe-area-inset-left)); font-size: 9px; letter-spacing: .06em; }
footer { right: 28px; left: 28px; text-align: center; letter-spacing: .035em; pointer-events: none; }

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

.no-script {
  position: fixed;
  right: 24px;
  bottom: 64px;
  left: 24px;
  color: var(--quiet);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 480px) {
  .signature { bottom: max(53px, calc(env(safe-area-inset-bottom) + 25px)); right: 28px; left: 28px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .gate-field, .gate-field:focus-within { background: #101512; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .gate-field { background: #101512; border-color: #96a69b; backdrop-filter: none; }
  .signature, footer { color: #b8c1b9; }
  .enter { color: #e1e8e1; }
  .remembered-identity, .change-user { color: #b8c1b9; }
}

@media (forced-colors: active) {
  .gate-field { border: 1px solid ButtonText; }
  .enter:focus-visible { outline: 2px solid Highlight; }
  .account-indicator { background: CanvasText; border: 1px solid CanvasText; }
}

/* One clipped water-like contour layer; only its transform moves. */
.water-contours { position: fixed; inset: 0; z-index: 0; overflow: hidden; contain: strict; pointer-events: none; }
.water-contours svg { position: absolute; left: 50%; top: 50%; width: clamp(700px, 115vw, 1900px); height: clamp(700px, 130vh, 1700px); opacity: .28; stroke: #34473c; stroke-width: 8; stroke-linecap: round; filter: blur(8px); transform: translate(-51%, -48%) rotate(-10deg) scale(1.06); animation: water-contour-drift 68s ease-in-out infinite alternate; will-change: transform; }
@keyframes water-contour-drift { to { transform: translate(-47%, -53%) rotate(-4deg) scale(1.12); } }
.page-hidden .water-contours svg { animation-play-state: paused; }
@media (max-width: 600px) { .water-contours svg { width: 600px; height: 800px; filter: blur(5px); stroke-width: 7; } }
@media (prefers-reduced-motion: reduce) { .water-contours svg { animation: none; will-change: auto; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { .water-contours { display: none; } }