/* Functional form: variance 3, motion 2, density 4. Existing Smile green accent. */
:root {
  color-scheme: light dark;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  --page: #f3f5f2; --surface: #fcfdfb; --text: #24322d; --muted: #52645b;
  --border: #bac7be; --accent: #305947; --on-accent: #f6faf7;
  --error: #9b3028; --error-bg: #fff0ec; --focus: #286547;
  background: var(--page); color: var(--text); font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #101720; --surface: #14232c; --text: #e1eaf0; --muted: #a6baca;
    --border: #506575; --accent: #b3dfcf; --on-accent: #123029;
    --error: #ffc1b4; --error-bg: #392629; --focus: #b3dfcf;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
a { color: var(--accent); text-underline-offset: 4px; }
.site-header { max-width: 1080px; height: 72px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header > a:last-child { font-size: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 21px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
main { max-width: 540px; margin: 0 auto; padding: 24px 24px 32px; }
h1 { font-size: 30px; line-height: 1.3; letter-spacing: -.6px; font-weight: 650; margin: 0 0 10px; }
h2 { font-size: 23px; margin: 0 0 18px; }
p { line-height: 1.7; }
.intro { color: var(--muted); font-size: 15px; margin: 0 0 26px; }
.field { margin-bottom: 18px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
input, button { font: inherit; border-radius: 6px; }
input { display: block; width: 100%; min-width: 0; height: 45px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
input:focus { border-color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button { border: 1px solid var(--border); min-height: 45px; padding: 10px 16px; cursor: pointer; white-space: nowrap; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .65; }
.primary { display: block; width: 100%; margin-top: 22px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 650; }
.quiet { background: var(--surface); color: var(--text); font-size: 14px; }
.password-field, .challenge-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.help { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.6; }
#question { display: inline-block; color: var(--accent); margin-left: 12px; font-size: 16px; font-variant-numeric: tabular-nums; }
.message { padding: 12px 14px; font-size: 14px; border-radius: 6px; }
.error { background: var(--error-bg); color: var(--error); }
.success { padding: 24px 0 12px; }
.success strong { color: var(--accent); font-size: 22px; overflow-wrap: anywhere; }
.notes { border-top: 1px solid var(--border); margin-top: 26px; padding-top: 16px; color: var(--muted); font-size: 12px; }
.notes p { margin: 0 0 8px; }
footer { padding: 0 20px 24px; text-align: center; color: var(--muted); font-size: 12px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .site-header { height: 64px; padding: 0 20px; }
  main { padding: 20px 20px 28px; }
  h1 { font-size: 27px; }
  .brand { font-size: 19px; }
  .brand small { display: none; }
}