@font-face {
  font-family: Nunito;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --ink: #15241d;
  --muted: #49594f;
  --surface: #fff;
  --line: #cddbd2;
  --primary: #147441;
  --focus: #aa267d;
  font-family: Nunito, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f7f2;
    --muted: #b9cbc0;
    --surface: #102219;
    --line: #395448;
    --primary: #147441;
    --focus: #ec8fca;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--surface);
  color: var(--ink);
}
main {
  width: min(100%, 410px);
  padding: clamp(20px, 6vw, 36px);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 18px 45px #15241d14;
}
.brand { display: inline-block; }
.brand img { width: 140px; display: block; }
h1 { font-size: clamp(24px, 6vw, 32px); line-height: 1.15; margin: 24px 0 16px; }
p { color: var(--muted); overflow-wrap: anywhere; }
form, label { display: grid; gap: 9px; }
form + form { margin-top: 10px; }
label { font-weight: 700; }
input, button { min-height: 46px; border: 1px solid var(--line); font: inherit; }
input { min-width: 0; width: 100%; padding: 9px 12px; border-radius: 14px; }
button {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
button.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
a { color: var(--ink); }
form + a { display: inline-block; margin-top: 16px; }
.back { display: block; margin-top: 20px; color: var(--muted); }
main.prose { width: min(100%, 720px); line-height: 1.55; }
.prose h2 { font-size: 20px; margin: 28px 0 8px; color: var(--primary); }
.prose ul { padding-left: 20px; color: var(--muted); }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--ink); }
@media (prefers-color-scheme: dark) { .prose h2 { color: #8fd6ad; } }