:root{
  --navy:#06172f;
  --navy2:#0d2446;
  --cyan:#00ddeb;
  --blue:#087cff;
  --white:#fff;
  --muted:#bed0e8;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at top,#123d70 0,#06172f 42%,#020814 100%);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
}
.card{
  width:min(480px,100%);
  padding:30px 24px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:rgba(6,23,47,.93);
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  text-align:center;
}
.logo{
  width:126px;
  height:126px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 0 30px rgba(0,221,235,.24);
}
h1{margin:20px 0 10px;font-size:28px}
.lead{margin:0 auto 22px;max-width:380px;color:var(--muted);line-height:1.6}
.primary,.secondary{
  width:100%;
  display:block;
  margin-top:12px;
  padding:15px 18px;
  border-radius:30px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}
.primary{
  border:0;
  color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.secondary{
  border:1px solid var(--cyan);
  color:var(--cyan);
  background:transparent;
}
.status{
  min-height:24px;
  margin-top:16px;
  color:#d9faff;
  font-size:14px;
  line-height:1.5;
}
.guide{
  display:none;
  margin-top:18px;
  padding:18px;
  border-radius:15px;
  background:rgba(255,255,255,.07);
  text-align:left;
}
.guide.show{display:block}
.guide h2{font-size:17px;margin:0 0 12px;color:var(--cyan)}
.guide ol{padding-left:22px;margin:0;line-height:1.8;color:#e9f3ff}
.small{margin-top:18px;color:#8fa8c5;font-size:12px;line-height:1.5}