@font-face { font-family: OCR; src: url("OCRA.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100svh; display: grid;
  grid-template-rows: 1fr auto; color: #d4dcdd;
  background: #000 url("tentacle.svg") center / min(120vw, 2000px) auto no-repeat;
  font-family: OCR, monospace;
}
main { align-self: center; text-align: center; padding: 60px 24px 28px; }
.logo { width: min(100%, 720px); height: auto; }
.tagline { margin: 28px auto 0; max-width: 42ch; line-height: 1.6; text-shadow: 0 2px 10px #000; }
form { width: min(100% - 40px, 370px); margin: 0 auto clamp(28px, 6vh, 70px); }
label { display: block; font-size: .8rem; color: #a7cacc; margin-bottom: 8px; }
.controls { display: flex; }
input, button { border: 1px solid #58797c; min-height: 48px; font: inherit; color: inherit; }
input { flex: 1; min-width: 0; padding: 8px 12px; background: #090e0f; }
button { padding: 8px 14px; background: #173134; cursor: pointer; }
:focus-visible { outline: 2px solid #8bd9dd; outline-offset: 3px; }
.error { color: #ffc4bb; font-size: .85rem; margin: 0 0 10px; }
@media (max-width: 600px) { body { background-size: auto 78svh; } }