:root{
  color-scheme:dark;
}

html.master-locked,
html.master-locked body{
  min-height:100%;
  margin:0;
  background:#080808;
}

.master-lock{
  min-height:100vh;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(1.25rem,3vw,3rem);
  color:#f3f0e7;
  background:
    radial-gradient(circle at 82% 18%,rgba(195,255,0,.12),transparent 30rem),
    #080808;
  font-family:Arial,Helvetica,sans-serif;
}

.master-lock__brand{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(243,240,231,.25);
  font-size:.78rem;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.master-lock__brand strong{
  font-size:1rem;
  letter-spacing:0;
  text-transform:none;
}

.master-lock__panel{
  width:min(76rem,100%);
  align-self:center;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);
  gap:clamp(3rem,10vw,10rem);
  padding:clamp(4rem,9vw,8rem) 0;
}

.master-lock__eyebrow,
.master-lock__status,
.master-lock__note{
  font-size:.75rem;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.master-lock h1{
  max-width:10ch;
  margin:.75rem 0 1.5rem;
  font-size:clamp(3.2rem,8vw,8.5rem);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.07em;
}

.master-lock__intro{
  max-width:36rem;
  margin:0;
  color:rgba(243,240,231,.72);
  font-size:clamp(1rem,1.5vw,1.3rem);
  line-height:1.5;
}

.master-lock__form{
  align-self:end;
  padding-top:1rem;
  border-top:1px solid rgba(243,240,231,.25);
}

.master-lock__form label{
  display:block;
  margin-bottom:.7rem;
  font-size:.78rem;
  letter-spacing:.04em;
}

.master-lock__field{
  display:grid;
  grid-template-columns:1fr auto;
  border:1px solid rgba(243,240,231,.45);
}

.master-lock__field:focus-within{
  border-color:#c3ff00;
  box-shadow:0 0 0 1px #c3ff00;
}

.master-lock__field input,
.master-lock__field button{
  min-height:3.6rem;
  border:0;
  border-radius:0;
  font:inherit;
}

.master-lock__field input{
  min-width:0;
  padding:0 1rem;
  color:#f3f0e7;
  background:transparent;
  outline:0;
}

.master-lock__field button{
  padding:0 1.25rem;
  color:#080808;
  background:#c3ff00;
  cursor:pointer;
}

.master-lock__field button:disabled,
.master-lock__field input:disabled{
  opacity:.65;
}

.master-lock__status{
  min-height:1.2em;
  margin:.75rem 0 0;
  color:#c3ff00;
}

.master-lock__status.error{
  color:#ff8f80;
}

.master-lock__note{
  margin:1.5rem 0 0;
  color:rgba(243,240,231,.48);
  letter-spacing:.04em;
  text-transform:none;
}

.master-lock__footer{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(243,240,231,.25);
  color:rgba(243,240,231,.5);
  font-size:.75rem;
}

@media (max-width:760px){
  .master-lock__panel{
    grid-template-columns:1fr;
    gap:3.5rem;
    padding:4rem 0;
  }
  .master-lock h1{
    font-size:clamp(3.6rem,17vw,6rem);
  }
  .master-lock__field{
    grid-template-columns:1fr;
  }
  .master-lock__field button{
    width:100%;
  }
  .master-lock__footer{
    display:block;
  }
  .master-lock__footer span:last-child{
    display:block;
    margin-top:.35rem;
  }
}