:root {
  --navy: #05080e;
  --gold: #c4a35a;
  --gold2: #d4b05a;
  --muted: #6b7384;
  --line: #1a2433;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Consolas, "Courier New", "Segoe UI", monospace;
  background: #070b14;
  color: #d6dbe6;
  display: grid;
  place-items: center;
  padding: 24px;
}
.card {
  width: min(var(--gate-w, 440px), 100%);
  text-align: center;
}
.hud {
  position: relative;
  margin: 0 auto;
  padding: 28px 22px 22px;
  border: 1px solid var(--gold);
  background: var(--navy);
  width: 100%;
}
@font-face {
  font-family: "Saira Stencil One";
  src: url("SairaStencilOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.card.size-s { --gate-w: 260px; }
.card.size-m { --gate-w: 380px; }
.card.size-l { --gate-w: 480px; }
.card.size-xl { --gate-w: 600px; }
.card.size-s .hud { padding: 16px 12px 14px; }
.card.size-s .hud-top { font-size: 18px; }
.card.size-s .hud-logo { font-size: 16px; letter-spacing: 0.12em; }
.card.size-xl .hud { padding: 32px 28px 26px; }
.kicker {
  letter-spacing: 0.35em;
  font-size: 11px;
  color: var(--gold);
  margin: 0 0 8px;
}
.hud-logo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto 16px;
}
.hud-top {
  display: block;
  width: min(92%, 380px);
  height: auto;
  margin: 0 auto 18px;
}
.hud-access {
  letter-spacing: 0.34em;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin: 18px 0 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.frame {
  position: relative;
  padding: 10px;
  border: 1px solid #3d6b48;
}
.frame::before, .frame::after,
.ticks::before, .ticks::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #5cff8a;
  pointer-events: none;
}
.frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.frame::after { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.ticks::before { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.ticks::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.ticks {
  position: relative;
}
#pattern { width: 100%; background: #05080e; }
#pattern canvas { display: block; width: 100%; height: auto; }
.ok { color: #8dffb0; }
.btn {
  display: inline-block;
  margin-top: 12px;
  background: var(--gold);
  color: #0b1220;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  padding: 10px 16px;
  letter-spacing: 0.12em;
  font-size: 11px;
}