:root {
	color-scheme: light;
	--ink: #17231e;
	--muted: #66736c;
	--line: #dbe3dd;
	--paper: #f5f8f5;
	--green: #1b6848;
	--green-dark: #125237;
	--amber: #8b5624;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font:
		16px / 1.5 system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}
main {
	width: min(1080px, 100% - 32px);
	margin: 40px auto 80px;
}
h1,
h2,
h3,
p {
	margin-top: 0;
}
h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
}
h2 {
	font-size: 1.35rem;
	margin: 28px 0 14px;
}
h3 {
	font-size: 1.12rem;
}
header {
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 8px 28px #1b342012;
}
.eyebrow,
.meta {
	color: var(--muted);
	font-size: 0.84rem;
}
.card {
	padding: 20px;
	margin: 14px 0;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
}
.card pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font: inherit;
	line-height: 1.55;
}
.inline {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px;
}
label {
	display: block;
	margin: 10px 0;
	font-weight: 600;
}
.inline label {
	flex: 1 1 180px;
}
input,
textarea,
select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid #b8c7bc;
	border-radius: 9px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}
textarea {
	min-height: 125px;
	resize: vertical;
}
button {
	padding: 11px 15px;
	border: 0;
	border-radius: 9px;
	background: var(--green);
	color: white;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}
button:hover {
	background: var(--green-dark);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid #e39b45;
	outline-offset: 2px;
}
.secondary {
	background: #eaf0eb;
	color: var(--ink);
}
.secondary:hover {
	background: #dce8de;
}
nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0;
}
a {
	color: var(--green-dark);
	text-underline-offset: 3px;
}
.empty {
	color: var(--muted);
	padding: 16px 0;
}
.error {
	color: #a22626;
}
@media (max-width: 600px) {
	main {
		width: min(100% - 20px, 1080px);
		margin: 16px auto 50px;
	}
	header,
	.card {
		padding: 16px;
	}
	button {
		min-height: 44px;
	}
	.inline {
		align-items: stretch;
	}
	.inline > * {
		flex: 1 1 100%;
	}
}