:root{
  --bg:#0a080c;
  --line:#2e2836;
  --text:#ece5db;
  --muted:#7d7484;
  --accent:#e8b98f;
  --danger:#c96f6f;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{
  display:flex;
  align-items:center;
  gap:32px;
  padding:32px 64px;
  max-width:1200px;
  width:100%;
  justify-content:space-between;
}
.art{margin:0;flex:0 1 380px}
.art picture{display:block}
.art img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%),linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%),linear-gradient(to right,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
  mask-composite:intersect;
}
.panel{flex:0 1 210px;width:100%}
form{display:grid;gap:20px}
input[type=text],input[type=password]{
  width:100%;
  padding:8px 2px;
  font-size:14px;
  font-family:var(--mono);
  color:var(--text);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  outline:none;
  transition:border-color .15s;
}
input::placeholder{color:var(--muted)}
input:focus{border-bottom-color:var(--accent)}
.reject{animation:reject .3s}
@keyframes reject{0%{transform:translateX(0);border-bottom-color:var(--danger)}30%{transform:translateX(-5px);border-bottom-color:var(--danger)}60%{transform:translateX(4px)}100%{transform:translateX(0);border-bottom-color:var(--line)}}
button{
  justify-self:start;
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--accent);
  font-family:var(--mono);
  font-size:22px;
  line-height:1;
  padding:4px 2px;
  display:flex;
  align-items:center;
  transition:opacity .15s,transform .1s;
}
button:hover:not(:disabled){transform:translateX(3px)}
button:disabled{opacity:.6;transform:none}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
footer{
  position:fixed;
  bottom:18px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  font-family:var(--mono);
  letter-spacing:.08em;
  color:#4d4554;
}
.center{text-align:center}
.center a{
  color:var(--accent);
  font-size:34px;
  text-decoration:none;
  line-height:1;
}
@media(max-width:760px){
  .stage{flex-direction:column;gap:8px;padding:24px}
  .art{flex-basis:auto;max-width:250px}
  .panel{flex-basis:auto;max-width:260px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}