:root {
  font-family: "Yu Gothic UI", "Hiragino Sans", system-ui, sans-serif;
  color: #1d2946;
  background: #f5f5f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

main {
  width: min(100%, 26rem);
  padding: clamp(1.5rem, 6vw, 2.5rem);
  border: 1px solid #dedfdf;
  border-radius: 1rem;
  background: #fff;
}

h1 { margin: 1.25rem 0 1.75rem; font-size: 1.5rem; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }

input:not([type=hidden]), button {
  width: 100%;
  border-radius: .45rem;
  padding: .75rem;
  font: inherit;
}

input { border: 1px solid #8994a6; }
button { border: 0; background: #263859; color: #fff; font-weight: 700; cursor: pointer; }
.error { color: #962837; }
.error:empty { margin: .95rem 0; }
:focus-visible { outline: 3px solid #387fa3; outline-offset: 2px; }
.setup-key { font-family: Consolas, "Courier New", monospace; font-size: 1.15rem; letter-spacing: .05em; padding: .75rem; border: 1px dashed #8994a6; border-radius: .45rem; word-break: break-all; user-select: all; }