:root{
  --board:#0E2429;--board-2:#122C32;--board-3:#173840;--paper:#EDE8DD;
  --ink:#0B1518;--amber:#F0B429;--mint:#57D9A3;
  --rule:rgba(237,232,221,.14);--dim:rgba(237,232,221,.62);
  --display:"Anton",Impact,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--board);color:var(--paper);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.96;margin:0}
h1{font-size:clamp(30px,5vw,44px)}
h2{font-size:clamp(19px,2.4vw,24px)}
a{color:var(--mint)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.top{border-bottom:1px solid var(--rule)}
.top-in{max-width:1000px;margin:0 auto;padding:0 24px;height:62px;display:flex;
  align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-size:22px;letter-spacing:.03em;text-decoration:none;color:var(--paper)}
.logo span{color:var(--mint)}
.shell{max-width:1000px;margin:0 auto;padding:clamp(36px,7vw,72px) 24px}
.narrow{max-width:440px}
.card{background:var(--board-2);border:1px solid var(--rule);padding:clamp(24px,4vw,36px);margin-bottom:20px}
.kicker{font-family:var(--mono);font-size:13px;color:var(--mint);margin-bottom:16px}
.sub{color:var(--dim);margin:14px 0 26px}
label{display:block;margin-bottom:16px}
label span{display:block;font-size:14px;color:var(--dim);margin-bottom:8px}
input[type=email],input[type=password],input[type=text]{width:100%;background:var(--board);
  border:1px solid var(--rule);color:var(--paper);font-family:var(--body);font-size:16px;
  padding:13px 14px;border-radius:2px}
input:focus{border-color:var(--mint)}
.btn{display:inline-block;background:var(--mint);color:var(--ink);font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:2px;text-decoration:none;border:0;cursor:pointer;font-family:var(--body)}
.btn:hover{background:#6FE7BB}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--rule)}
.btn-ghost:hover{background:rgba(237,232,221,.07)}
.wide{width:100%}
.msg{padding:12px 14px;border-radius:2px;font-size:15px;margin-bottom:18px;display:none}
.msg.err{display:block;background:rgba(240,180,41,.12);border:1px solid var(--amber);color:var(--amber)}
.msg.ok{display:block;background:rgba(87,217,163,.1);border:1px solid var(--mint);color:var(--mint)}
.alt{color:var(--dim);font-size:15px;text-align:center;margin-top:20px}
.rows{border-top:1px solid var(--rule)}
.r{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.r b{font-weight:500;color:var(--dim)}
.pill{font-family:var(--mono);font-size:12.5px;padding:3px 9px;border:1px solid currentColor;border-radius:2px}
.pill.on{color:var(--mint)}.pill.off{color:var(--amber)}
.keybox{font-family:var(--mono);font-size:14.5px;background:var(--board);border:1px solid var(--rule);
  padding:14px;word-break:break-all;margin:14px 0;color:var(--mint)}
.bar{height:5px;background:rgba(237,232,221,.1);margin-top:10px}
.bar i{display:block;height:100%;background:var(--mint)}
.note{font-size:14.5px;color:var(--dim);line-height:1.55}
ol.steps{padding-left:20px;color:var(--dim);font-size:15.5px}
ol.steps li{margin-bottom:9px}
ol.steps code{font-family:var(--mono);font-size:14px;color:var(--paper)}
