@font-face{font-family:"SlipCond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/BarlowCondensed-Medium.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.ttf") format("truetype")}
:root{
  --bg:#06080c; --panel:#101820; --line:#243244; --text:#f7fafc; --muted:#d5deea;
  --amber:#ffc633; --green:#22e06b; --blue:#5ec4ff;
  --cond:"SlipCond","Arial Narrow","Roboto Condensed",Impact,system-ui,sans-serif;
  --ui:"SlipSans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:#06080c;color:var(--text)}
body{
  min-height:100vh; font-family:var(--ui); font-weight:400; font-synthesis:none;
  background:radial-gradient(90% 50% at 50% -10%, #1a2433 0%, transparent 55%), #06080c;
}
b,strong{font-weight:400}
a,a:link,a:visited,a:hover,a:focus,a:active,a *,a:link *,a:visited *{text-decoration:none;-webkit-text-decoration:none}
button,input{font-family:var(--ui);font-weight:400;font-synthesis:none}
.sample{
  position:sticky; top:0; z-index:5; margin:0; padding:.55rem .8rem; text-align:center;
  background:#2a2108; color:var(--amber); border-bottom:2px dashed #ffb400;
  font-family:var(--cond); font-weight:400; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem;
}
.auth{
  position:relative; width:min(28rem, calc(100% - 1.5rem)); margin:0 auto; padding:1.1rem 0 3rem;
  display:flex; flex-direction:column; align-items:stretch; gap:.7rem;
}
.logo{width:min(22rem, 100%); height:auto; display:block; margin:0 auto .2rem}
h1{margin:0; font-family:var(--cond); font-weight:400; font-size:2rem; letter-spacing:.04em; text-align:center}
.free,.lead{margin:0; color:var(--muted); font-weight:400; line-height:1.4; text-align:center}
.lead{color:var(--text); font-size:1.15rem}
form{display:flex; flex-direction:column; gap:.65rem; margin-top:.4rem}
label{display:flex; flex-direction:column; gap:.3rem; color:var(--muted); font-weight:400}
input{
  background:#0c1218; color:var(--text); border:1px solid var(--line); border-radius:.5rem;
  min-height:2.8rem; padding:.45rem .7rem; font:inherit;
}
input:focus{outline:2px solid var(--blue); outline-offset:1px}
button[type=submit],a.pill,button.signout{
  display:inline-flex; align-items:center; justify-content:center; min-height:2.8rem;
  border:1px solid #2c3a4e; border-radius:.5rem; background:#141c27; color:var(--text);
  font-weight:400; padding:.45rem .8rem; cursor:pointer;
}
button[type=submit]:hover,a.pill:hover,a.pill:focus-visible,button.signout:hover,button.signout:focus-visible{background:#1c2838}
button[type=submit]:disabled{opacity:.6; cursor:wait}
.note{margin:0; color:var(--amber); font-weight:400; min-height:1.2rem}
.note[hidden]{display:none}
.switch{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:.2rem 0 0}
.switch a{
  color:var(--blue); font-weight:400; border-radius:.5rem; padding:.35rem .55rem;
}
.switch a:hover,.switch a:focus-visible{background:#1c2838}
.account{
  align-self:flex-end; display:flex; align-items:center; gap:.45rem; max-width:100%;
}
.account[hidden]{display:none}
.acct-email{color:var(--muted); font-size:.92rem; font-weight:400; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width: 700px){
  .auth{padding-top:.8rem}
  h1{font-size:1.7rem}
}