:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #07131c;
  color: #f3ead7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #17394b, #07131c 58%); }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 560px); padding: clamp(28px, 6vw, 54px); border: 1px solid #7f9bad55; border-radius: 18px; background: #0b1c28ee; box-shadow: 0 24px 80px #0009; }
.eyebrow { margin: 0 0 10px; color: #a9c9d8; font: 700 0.72rem/1.4 system-ui, sans-serif; letter-spacing: .18em; }
h1 { margin: 0; color: #f0c879; font-size: clamp(2.4rem, 9vw, 4.3rem); font-weight: 500; line-height: .95; }
.lede { margin: 18px 0 30px; color: #c8d7dc; font: 1rem/1.6 system-ui, sans-serif; }
.field { margin: 0 0 18px; }
label, small { display: block; font-family: system-ui, sans-serif; }
label { margin-bottom: 7px; font-size: .92rem; font-weight: 650; }
small { margin-top: 6px; color: #8fa8b3; font-size: .78rem; }
input { width: 100%; border: 1px solid #496574; border-radius: 9px; padding: 13px 14px; background: #061018; color: #fff; font: 1rem system-ui, sans-serif; outline: none; }
input:focus { border-color: #e0b862; box-shadow: 0 0 0 3px #e0b86222; }
button { width: 100%; margin-top: 8px; border: 0; border-radius: 9px; padding: 14px 18px; background: linear-gradient(#e8c675, #b98b36); color: #1b1408; font: 750 1rem system-ui, sans-serif; cursor: pointer; }
button:hover { filter: brightness(1.08); }
.notice { margin-bottom: 22px; border-radius: 9px; padding: 12px 14px; font: .9rem/1.45 system-ui, sans-serif; }
.notice.error { border: 1px solid #b75a5a; background: #521f1f66; }
.notice.success { border: 1px solid #5b9b72; background: #173e2866; }
.footnote { margin: 24px 0 0; color: #718b97; text-align: center; font: .76rem/1.5 system-ui, sans-serif; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }