:root {
	--bg: #f6f3ec;
	--surface: #ffffff;
	--text: #1d2230;
	--muted: #5b6375;
	--line: #e2ddd1;
	--accent: #b36a12;
	--accent-soft: #fff1d6;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1020;
		--surface: #121a2e;
		--text: #f3ead7;
		--muted: #a3abbd;
		--line: #26314a;
		--accent: #ffcf6b;
		--accent-soft: #2a2414;
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
header.site { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
header.site a { color: inherit; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; }
.mark {
	width: 34px; height: 34px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #fff4d6 0, #ffcf6b 38%, #f08a24 72%, transparent 74%);
	box-shadow: 0 0 18px rgba(255, 190, 90, 0.55);
	flex: none;
}
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 36px 0 8px; }
h3 { font-size: 1rem; margin: 20px 0 4px; }
p, li { max-width: 68ch; }
.lead { color: var(--muted); font-size: 1.05rem; margin-top: 0; }
a { color: var(--accent); }
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 20px 0;
}
.card h2 { margin-top: 0; }
.note { background: var(--accent-soft); border-radius: 10px; padding: 12px 16px; }
.links { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; list-style: none; }
.meta { color: var(--muted); font-size: 0.9rem; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
code { font-size: 0.92em; overflow-wrap: anywhere; }