@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/space-grotesk.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/inter.woff2') format('woff2')}

:root{
  --bg:#FAF9F5; --panel:#FFFFFF;
  --border:#E4E0D4; --border2:#CFC8B8;
  --ink:#1F1E1D; --dim:#6E6A60; --faint:#A29C8E;
  --red:#C8203C;
  --brand:#197278; --brand-dim:#145E63;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Space Grotesk',var(--sans);
  /* Light always, by owner request. `only light`, NOT plain `light`: plain
     `light` is just a preference and Chrome's auto dark mode (Android force
     dark) still inverts the whole page. `only light` is the hard opt-out, and
     it also stops the password field, its autofill and the scrollbar being
     repainted dark on an ivory ground. Verified with
     --force-dark-mode --enable-features=WebContentsForceDark. */
  color-scheme:only light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:rgba(25,114,120,.20)}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-text-size-adjust:100%}
button:focus:not(:focus-visible){outline:none}

.shell{min-height:100svh;display:grid;place-items:center;padding:40px 22px}
.box{width:100%;max-width:360px}

.mark{width:76px;height:76px;margin:0 auto 26px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(160deg,#1F8A91,#197278 55%,#135F65);
  box-shadow:0 12px 26px -12px rgba(25,114,120,.62)}
.mark svg{display:block}
h1{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.02em;
  margin:0 0 9px;text-align:center;text-wrap:balance}
.sub{margin:0;text-align:center;font-size:14.5px;color:var(--dim);text-wrap:balance}

form{margin-top:32px}
.field{position:relative}
input{width:100%;height:56px;padding:0 46px 0 15px;font:500 16px/1 var(--sans);color:var(--ink);
  background:transparent;border:1px solid var(--border2);border-radius:11px;outline:none;
  transition:border-color .15s,box-shadow .15s}
input:hover{border-color:var(--faint)}
input:focus{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
label{position:absolute;left:12px;top:50%;transform:translateY(-50%);padding:0 4px;
  font-size:16px;color:var(--faint);background:var(--bg);pointer-events:none;
  transition:top .13s,font-size .13s,color .13s}
input:focus+label,input:not(:placeholder-shown)+label{top:0;font-size:12.5px}
input:focus+label{color:var(--brand)}
input[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
input[aria-invalid="true"]+label{color:var(--red)}

.peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:grid;place-items:center;border:0;background:none;color:var(--faint);cursor:pointer;
  border-radius:9px;transition:color .13s}
.peek:hover{color:var(--dim)}
.peek:active{transform:translateY(-50%) scale(.9)}
@media (hover:none){.peek:hover{color:var(--faint)}}

.note{min-height:19px;margin:9px 2px 0;font-size:13px;line-height:1.45;color:var(--red)}
.note.warn{color:var(--dim)}

.go{width:100%;height:52px;margin-top:16px;border:0;border-radius:11px;cursor:pointer;
  background:var(--brand);color:#fff;font:600 15.5px/1 var(--sans);letter-spacing:.01em;
  display:grid;place-items:center;transition:background .14s,opacity .14s,transform .09s}
.go:hover:not(:disabled){background:var(--brand-dim)}
.go:active:not(:disabled){transform:scale(.985)}
.go:disabled{opacity:.4;cursor:default}
.spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.shake{animation:shake .5s}

/* ---------- the page behind the gate ---------- */
.namaste{font-family:var(--display);font-size:44px;font-weight:600;letter-spacing:-.025em;
  margin:0;text-align:center}
.out{margin:30px auto 0;display:block;height:46px;padding:0 22px;cursor:pointer;
  border:1px solid var(--border2);border-radius:11px;background:transparent;color:var(--dim);
  font:600 14.5px/1 var(--sans);transition:border-color .14s,color .14s,transform .09s}
.out:hover{border-color:var(--faint);color:var(--ink)}
.out:active{transform:scale(.985)}
.out:disabled{opacity:.4;cursor:default}
@media (hover:none){.out:hover{border-color:var(--border2);color:var(--dim)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .spin{animation:spin 1s linear infinite!important}
}