:root {
	--bg: #eef8f1;
	--surface: #f9fffb;
	--surface-soft: #f3fbf5;
	--text: #1f3b2e;
	--muted: #547565;
	--accent: #5ca882;
	--accent-strong: #3f8f69;
	--border: #cfe8d8;
	--shadow: 0 8px 20px rgba(52, 108, 79, 0.12);
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: var(--text);
	background: linear-gradient(180deg, #f5fdf7 0%, var(--bg) 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 0 1.2rem;
}

header,
main,
footer {
	width: min(900px, 92vw);
	margin: 0 auto;
	padding: 1rem 1.2rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

h1,
h2 {
	margin: 0 0 0.6rem;
	line-height: 1.25;
}

p {
	margin: 0.5rem 0;
}

nav ul {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

nav a {
	text-decoration: none;
	color: var(--accent-strong);
	font-weight: 600;
	padding-bottom: 0.1rem;
	border-bottom: 2px solid transparent;
}

nav a:hover,
nav a:focus-visible,
nav a.active,
nav a[aria-current="page"] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

a {
	color: var(--accent-strong);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--accent);
}

main ul {
	padding-left: 1.2rem;
}

li + li {
	margin-top: 0.35rem;
}

nav li + li {
	margin-top: 0;
}

.docs-page {
	display: grid;
	gap: 0.9rem;
}

.eyebrow {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}

.docs-section {
	padding: 0.65rem;
	background: var(--surface-soft);
	border: 1px dashed var(--border);
	border-radius: 10px;
}

.docs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.docs-list li {
	margin: 0;
	padding: 0.3rem 0.55rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
}

.doc-link {
	display: inline;
	font-weight: 700;
}

.doc-desc {
	display: inline;
	margin-left: 0.35rem;
	color: var(--muted);
	font-size: 0.95rem;
}

footer {
	color: var(--muted);
}

footer p {
	margin: 0.2rem 0;
}

@media (max-width: 640px) {
	header,
	main,
	footer {
		width: 94vw;
		padding: 0.9rem 1rem;
	}
}