:root{
  --login-dark:#050505;
  --login-light:#f1f1ed;
  --login-ink:#090909;
  --login-muted:#686862;
  --login-line:rgba(0,0,0,.14);
}

html{background:var(--login-dark)}
body{
  display:block;
  min-height:100svh;
  padding:0;
  overflow-x:hidden;
  background:var(--login-dark);
  color:#f4f4f1;
  letter-spacing:0;
}
body *{letter-spacing:0}

.login-layout{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(430px,.75fr);
  overflow:hidden;
  background:#050505;
}

.login-visual{
  min-height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:32px clamp(34px,5vw,86px) 54px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(760px 620px at 72% 52%,rgba(255,255,255,.075),transparent 68%),
    #050505;
}
.login-visual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,transparent 3%,#000 44%,transparent 96%);
}
.login-brand{
  position:absolute;
  z-index:5;
  top:29px;
  left:clamp(34px,5vw,86px);
}
.login-brand img{display:block;width:112px;height:auto}

.login-rings,.login-rings:before,.login-rings:after{
  position:absolute;
  border:1px solid rgba(255,255,255,.085);
  border-radius:50%;
  pointer-events:none;
}
.login-rings{
  width:610px;
  height:610px;
  right:-88px;
  top:50%;
  translate:0 -50%;
  animation:login-ring 22s linear infinite;
}
.login-rings:before{content:"";inset:76px;border-color:rgba(255,255,255,.06)}
.login-rings:after{content:"";inset:154px;border-color:rgba(255,255,255,.04)}
@keyframes login-ring{to{rotate:360deg}}

.login-visual-copy{position:relative;z-index:3;width:min(650px,60%)}
.login-eyebrow,.login-panel-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:#777773;
  font:600 11px/1.2 "JetBrains Mono",ui-monospace,monospace;
  text-transform:uppercase;
}
.login-eyebrow:before{content:"";width:28px;height:1px;background:#777773}
.login-visual-copy h1{
  margin:25px 0 0;
  font-size:96px;
  line-height:.86;
  font-weight:820;
  color:#f4f4f1;
}
.login-visual-copy h1 span{color:#343431}
.login-visual-copy>p{
  max-width:390px;
  margin:28px 0 0;
  color:#9a9a95;
  font-size:18px;
  line-height:1.55;
}
.login-facts{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#6f6f69;
  font:500 11px/1.4 "JetBrains Mono",ui-monospace,monospace;
  text-transform:uppercase;
}
.login-facts b{color:#eeeeea}
.login-lama{
  position:absolute;
  z-index:2;
  width:min(520px,53vw);
  right:-44px;
  bottom:-36px;
  pointer-events:none;
  filter:none;
  animation:login-lama-in 1s cubic-bezier(.16,1,.3,1) both,login-lama-float 7s 1s ease-in-out infinite;
}
@keyframes login-lama-in{from{opacity:0;transform:translate3d(42px,34px,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes login-lama-float{50%{transform:translate3d(0,-7px,0)}}

.login-panel{
  position:relative;
  z-index:6;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:76px 44px;
  color:var(--login-ink);
  background:var(--login-light);
  border-radius:30px 0 0 30px;
  box-shadow:-30px 0 90px rgba(0,0,0,.5),-1px 0 0 rgba(255,255,255,.28);
  animation:login-panel-in .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes login-panel-in{from{transform:translate3d(54px,0,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}

.login-card{
  width:100%;
  max-width:440px;
  padding:0;
  color:var(--login-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:none;
}
.login-head{padding:0;margin:0 0 28px}
.login-panel-kicker{color:#777771}
.login-title{
  margin:0 0 9px;
  color:var(--login-ink);
  font-size:32px;
  line-height:1.05;
  font-weight:800;
}
.login-hint{margin:0 0 28px;color:var(--login-muted);font-size:14px;line-height:1.55}

.login-btn{
  min-height:52px;
  padding:0 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:750;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,opacity .2s;
}
.login-btn:hover:not(:disabled){opacity:1;transform:translateY(-2px)}
.login-btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn-tg,.btn-primary{
  color:#f4f4f0;
  background:#080808;
  border:1px solid #080808;
  box-shadow:none;
}
.btn-secondary,.btn-social{
  color:#080808;
  background:transparent;
  border:1px solid rgba(0,0,0,.20)!important;
  box-shadow:none;
}
.btn-secondary:hover:not(:disabled),.btn-social:hover:not(:disabled){background:#e5e5e0;border-color:rgba(0,0,0,.32)!important}
.login-social-row{margin-top:10px}
.login-divider{margin:18px 0;color:#85857f}
.login-divider:before,.login-divider:after{background:var(--login-line)}

.login-label{color:#70706a;font-size:11px;margin-bottom:8px}
.login-input-wrap{margin-bottom:17px}
.login-input{
  min-height:50px;
  padding:13px 15px;
  color:#080808;
  background:#fafaf7;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  font-size:15px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.login-input:focus{background:#fff;border-color:#080808;box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.login-input::placeholder{color:#9b9b95}
.captcha-img,.captcha-refresh{background:#fafaf7;border-color:rgba(0,0,0,.18);border-radius:12px}
.captcha-refresh{color:#696963}
.captcha-refresh:hover{color:#080808;border-color:#080808}
.email-policy-note{border-radius:12px;color:#5d5d57;background:rgba(145,94,0,.06)}
.login-error{border-radius:12px}
.login-back,.login-terms,.login-terms a{color:#6d6d67}
.login-back:hover,.login-terms a:hover{color:#080808}
.tg-status{color:#686862}
.tg-status.waiting{color:#3d6382}
.login-spinner{border-color:rgba(255,255,255,.28);border-top-color:#fff}
.otp-input{letter-spacing:10px!important}
.mobile-check-btn{
  width:100%;min-height:46px;margin-top:10px;padding:0 18px;
  border:0;border-radius:999px;background:#080808;color:#f4f4f0;
  font:750 14px/1 "Inter",sans-serif;cursor:pointer
}

.step{animation:login-step .42s cubic-bezier(.16,1,.3,1) both}
@keyframes login-step{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-width:1050px){
  .login-layout{grid-template-columns:minmax(0,1fr) minmax(410px,.86fr)}
  .login-visual{padding-inline:38px}
  .login-brand{left:38px}
  .login-visual-copy{width:62%}
  .login-visual-copy h1{font-size:70px}
  .login-lama{right:-120px;width:470px;opacity:.72}
  .login-panel{padding-inline:32px}
}

@media(max-width:860px){
  body{background:var(--login-light)}
  .login-layout{display:block;overflow:visible;background:var(--login-light)}
  .login-visual{min-height:330px;padding:26px 20px 54px;align-items:flex-end}
  .login-brand{top:24px;left:20px}.login-brand img{width:98px}
  .login-visual-copy{width:75%}
  .login-eyebrow{font-size:10px}
  .login-visual-copy h1{margin-top:18px;font-size:47px}
  .login-visual-copy>p,.login-facts{display:none}
  .login-rings{width:390px;height:390px;right:-190px}
  .login-lama{width:285px;right:-60px;bottom:-23px;opacity:.72}
  .login-panel{
    min-height:calc(100svh - 300px);
    margin-top:-30px;
    padding:46px 20px max(34px,env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
    box-shadow:0 -24px 70px rgba(0,0,0,.58),0 -1px 0 rgba(255,255,255,.25);
  }
  .login-card{max-width:460px}
  .login-title{font-size:29px}
}

@media(max-width:390px){
  .login-visual{min-height:292px}
  .login-visual-copy h1{font-size:41px}
  .login-lama{width:245px;right:-62px}
  .login-panel{min-height:calc(100svh - 265px);margin-top:-27px;padding-inline:16px}
  .login-title{font-size:26px}
  .login-btn{min-height:50px}
}