:root {
  --ground: #262924;
  --surface: #2E322B;
  --sunk: #1F221D;
  --raised: #3A3F35;
  --line: #3D4238;
  --edge: #7F8873;
  --ink: #FCF7EA;
  --ink-2: #D5D8CC;
  --muted: #A9AF9E;
  --mark: #8D9782;
  --link: #B3BDA5;
  --accent-fill: #8D9782;
  --accent-fill-hover: #A3AA97;
  --on-accent: #161515;
  --track: #3A3F35;
  --wash: 0.16;
  --pass: #8CC08C;
  --pass-tint: #394337;
  --pass-line: #8D9782;
  --danger: #F2937E;
  --danger-tint: #47392F;
  --danger-mark: #E0644B;
  --danger-fill: #F2937E;
  --danger-fill-hover: #F4A794;
  --on-danger: #161515;
  --drag: #3B4037;
  --focus: #FCF7EA;
  --shadow: inset 0 1px 0 rgba(252, 247, 234, 0.04), 0 1px 2px rgba(10, 12, 9, 0.30), 0 12px 32px -12px rgba(10, 12, 9, 0.55);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --pad-control: 12px;
  --gutter: 16px;
  --radius-card: 16px;
  --radius-inner: 12px;
  --radius-small: 8px;
  --radius-pill: 999px;
  --font: "Apfel Grotezk", sans-serif;
  --text-label: 0.8125rem;
  --text-body: 1rem;
  --text-heading: 1.25rem;
  --text-display: 2.5rem;
  --weight-regular: 400;
  --weight-strong: 500;
  --leading-label: 1.4;
  --leading-body: 1.5;
  --leading-tight: 1.2;
  --leading-display: 1.1;
  --track-display: -0.02em;
  --track-heading: -0.01em;
  --track-caps: 0.1em;
  --track-eyebrow: 0.14em;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms;
  --dur-enter: 200ms;
  --dur-fade: 200ms;
  --dur-point: 100ms;
  --step: 30ms;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #FCF7EA;
  --surface: #FFFEFA;
  --sunk: #F3EEDF;
  --raised: #ECE6D4;
  --line: #D5CFC1;
  --edge: #67705C;
  --ink: #161515;
  --ink-2: #3F4637;
  --muted: #5E6257;
  --mark: #67705C;
  --link: #3F4637;
  --accent-fill: #3F4637;
  --accent-fill-hover: #262924;
  --on-accent: #FCF7EA;
  --track: #DBDDD4;
  --wash: 0.12;
  --pass: #3F6B3F;
  --pass-tint: #EDF3E9;
  --pass-line: #8D9782;
  --danger: #A63A26;
  --danger-tint: #FBEDE8;
  --danger-mark: #D9533A;
  --danger-fill: #A63A26;
  --danger-fill-hover: #8C2F1E;
  --on-danger: #FCF7EA;
  --drag: #F1EBDA;
  --focus: #161515;
  --shadow: 0 1px 2px rgba(38, 41, 36, 0.05), 0 12px 32px -12px rgba(38, 41, 36, 0.14);
  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
/* Apfel Grotezk by Luigi Gorlero and Collletttivo, SIL Open Font License 1.1, /fonts/OFL.txt */
@font-face { font-family: "Apfel Grotezk"; src: url("/fonts/apfel-grotezk-400-5fd817f2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Apfel Grotezk"; src: url("/fonts/apfel-grotezk-500-869899ef.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
*, *::before, *::after { box-sizing: border-box; }
html { color: var(--ink); background: var(--ground); font-family: var(--font); font-size: 100%; line-height: var(--leading-body); font-kerning: normal; font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
:root:not([data-theme="light"]) body { letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1 { font-size: var(--text-display); font-weight: var(--weight-strong); line-height: var(--leading-tight); text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: var(--text-heading); font-weight: var(--weight-strong); line-height: var(--leading-tight); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h3, .note-title { font-size: var(--text-body); font-weight: var(--weight-strong); line-height: var(--leading-body); }
strong, b, th, label, legend { font-weight: var(--weight-strong); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 16px; height: 16px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}
.field { display: grid; gap: var(--space-sm); }
label { color: var(--ink); font-size: var(--text-label); font-weight: var(--weight-strong); line-height: var(--leading-label); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea { display: block; width: 100%; min-height: 44px; margin: 0; padding: var(--space-sm) var(--pad-control); color: var(--ink); font: inherit; font-size: var(--text-body); line-height: var(--leading-body); background: var(--sunk); border: 1px solid var(--edge); border-radius: var(--radius-inner); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { padding: calc(var(--space-sm) - 1px) calc(var(--pad-control) - 1px); border: 2px solid var(--danger-mark); }
.hint { color: var(--muted); font-size: var(--text-label); line-height: var(--leading-label); }
.field-error { color: var(--danger); font-size: var(--text-label); line-height: var(--leading-label); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; margin: 0; padding: 0 var(--space-lg); font: inherit; font-size: var(--text-label); font-weight: var(--weight-strong); line-height: var(--leading-label); letter-spacing: var(--track-caps); text-transform: uppercase; text-align: center; white-space: normal; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.button:active { transform: scale(0.97); }
.button-primary { color: var(--on-accent); background: var(--accent-fill); }
.button-secondary { color: var(--ink); background: transparent; border-color: var(--edge); }
.button-danger { color: var(--on-danger); background: var(--danger-fill); }
.status { display: flex; align-items: flex-start; gap: var(--pad-control); max-width: 760px; padding: var(--pad-control) var(--space-md); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-inner); transition: opacity var(--dur-fade) var(--ease-out); }
.status > .i { margin-top: var(--space-xs); }
@starting-style { .status { opacity: 0; } }
.status-success { background: var(--pass-tint); border-color: var(--pass-line); }
.status-success > .i { color: var(--pass); }
.status-error { background: var(--danger-tint); border-color: var(--danger-mark); }
.status-error > .i { color: var(--danger); }
.status-info { background: var(--surface); border-color: var(--line); }
.status-info > .i { color: var(--muted); }
.status-lead { color: var(--danger); font-weight: var(--weight-strong); }
.card { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; padding: var(--space-md); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { background: var(--accent-fill-hover); }
  .button-secondary:hover { background: var(--raised); }
  .button-danger:hover { background: var(--danger-fill-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}
main.signin { display: grid; place-items: center; align-content: center; gap: var(--space-lg); min-height: 100dvh; padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + 12vh); }
.signin-card { gap: 0; width: 100%; max-width: 400px; }
.wordmark-mark { display: block; width: 200px; color: var(--ink); }
.signin-card > h1 { margin-top: var(--space-xl); color: var(--ink); font-size: var(--text-heading); letter-spacing: var(--track-heading); }
.signin-card > h1 ~ * { margin-top: var(--space-lg); }
.signin-card form { display: grid; gap: var(--space-md); }
.signin-card form .button { width: 100%; margin-top: var(--space-sm); }
@media (min-width: 768px) {
  .signin-card { padding: var(--space-lg); }
}