html { font-size: clamp(16px, 1.04vw, 40px); background: #12100e; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: #12100e; color: #f3ede5;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.box {
  width: min(22rem, calc(100vw - 32px));
  background: #1a1714; border: 1px solid #2e2823; border-radius: 0.9rem;
  padding: 1.8rem; display: grid; gap: 0.8rem;
}
h1 { margin: 0 0 0.4rem; font-weight: 500; font-size: 1.6rem; }
input, button { font: inherit; border-radius: 0.55rem; padding: 0.65rem 0.8rem; }
input { background: #211d19; border: 1px solid #2e2823; color: inherit; }
button { background: #e2b56a; color: #1a1408; border: 0; font-weight: 600;
  cursor: pointer; }
:focus-visible { outline: 0.18rem solid #e2b56a; outline-offset: 0.15rem; }
.msg { color: #e3907f; margin: 0; min-height: 1.2em; }
.small { color: #92887d; font-size: 0.8rem; margin: 0; }