@font-face{font-family:JetBrains Mono;src:url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:JetBrains Mono;src:url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:light dark;
}
*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text-strong);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px;
  line-height:1.5;
}

.shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.card{
  width:100%;
  max-width:400px;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:4px;
  padding:32px;
}

h1{
  margin:0 0 12px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.35;
}

.note{
  margin:0 0 28px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

.field{margin-bottom:4px}

label{
  display:block;
  margin-bottom:8px;
  font-size:12.5px;
  font-weight:700;
}

.input-row{
  display:flex;
  border:1px solid var(--border-2);
  border-radius:3px;
  background:var(--input-bg);
}
.input-row:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);
}

input{
  flex:1;
  min-width:0;
  padding:12px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-strong);
  font:inherit;
  /* 16px prevents iOS Safari zooming the page when the field takes focus */
  font-size:16px;
}

.input-row button{
  flex:0 0 auto;
  min-width:60px;
  padding:0 12px;
  border:0;
  border-left:1px solid var(--border-2);
  background:transparent;
  color:var(--info-fg);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.input-row button:hover{color:var(--text-strong);background:var(--control-hover)}

.message{
  min-height:20px;
  margin:10px 0 0;
  color:var(--critical-fg);
  font-size:12px;
  line-height:1.5;
}

.submit{
  width:100%;
  min-height:44px;
  margin-top:14px;
  padding:12px;
  border:1px solid var(--control-active);
  border-radius:3px;
  background:var(--control-active);
  color:var(--control-active-text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.submit:hover{filter:brightness(.92)}
.submit:disabled{opacity:.6;cursor:default}

.foot{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--border-2);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11.5px;
  color:var(--muted);
}
.foot a{color:var(--info-fg);text-decoration:none}
.foot a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:420px){
  .shell{padding:20px 14px}
  .card{padding:24px 20px}
}