* { box-sizing: border-box; }

body {
	margin: 0;
	background: #f4f1ea;
	color: #2e3438;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

a { color: #a6401f; }
a:hover { text-decoration: none; }

.wrap { max-width: 740px; margin: 0 auto; padding: 0 18px; }

.top { padding: 20px 0 6px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #2b3a42;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
}

.logo svg { display: block; }
.nav a { color: #5d646a; margin-left: 18px; font-size: 15px; text-decoration: none; }
.nav a:hover { color: #a6401f; }

h1, h2, h3 { color: #2b3a42; line-height: 1.25; }
h1 { font-size: 31px; margin: 22px 0 10px 0; }
h2 { font-size: 22px; margin: 38px 0 10px 0; }
h3 { font-size: 17px; margin: 24px 0 6px 0; }
p { margin: 0 0 14px 0; }

.lead { font-size: 18px; color: #4d555b; }

.card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(40, 50, 60, 0.09);
	padding: 26px 28px;
	margin: 22px 0;
}

.answer-label { margin: 0 0 4px 0; font-size: 15px; color: #6a7075; }

.answer {
	margin: 0 0 14px 0;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 600;
	color: #1f2a30;
	overflow-wrap: anywhere;
}

.tags { margin: 0 0 10px 0; }

.tags span {
	display: inline-block;
	background: #f1ede4;
	border-radius: 14px;
	padding: 2px 12px;
	margin: 0 6px 6px 0;
	font-size: 14px;
	color: #4a5258;
}

.note {
	background: #fdf6e3;
	border-left: 3px solid #e0b43a;
	padding: 10px 14px;
	margin: 16px 0 0 0;
	font-size: 14.5px;
	color: #6b5513;
}

.note p { margin: 0; }
.note p + p { margin-top: 8px; }

.buttons { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

button {
	font: inherit;
	font-size: 15px;
	border-radius: 6px;
	padding: 8px 18px;
	cursor: pointer;
	border: 1px solid #c9c2b2;
	background: #fff;
	color: #3b4349;
}

button:hover { border-color: #a6401f; color: #a6401f; }
button.main { background: #b8472a; border-color: #b8472a; color: #fff; }
button.main:hover { background: #9d3a21; border-color: #9d3a21; color: #fff; }

.rows { margin: 0; }
.row { display: flex; gap: 16px; padding: 9px 0; border-top: 1px solid #ece8de; font-size: 15px; }
.row:first-child { border-top: 0; }
.row dt { width: 190px; flex: none; color: #6a7075; }
.row dd { margin: 0; overflow-wrap: anywhere; }

.card h2 { margin-top: 0; font-size: 18px; }

.content ul, .content ol, article ul, article ol { padding-left: 22px; margin: 0 0 16px 0; }
li { margin-bottom: 6px; }

.crumbs { font-size: 14px; color: #7b8186; margin: 18px 0 0 0; }
.crumbs a { color: #7b8186; }

pre {
	background: #fff;
	border: 1px solid #e3ded2;
	border-radius: 6px;
	padding: 10px 14px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.5;
}

code { font-family: Consolas, Monaco, monospace; font-size: 14px; background: #ebe6da; padding: 1px 5px; border-radius: 3px; }
pre code { background: none; padding: 0; }

details { border-top: 1px solid #e0dbcf; padding: 11px 0; }
details:last-of-type { border-bottom: 1px solid #e0dbcf; }
summary { cursor: pointer; font-weight: 600; color: #2b3a42; }
details p { margin: 8px 0 0 0; color: #4d555b; }

.findlist { list-style: none; padding: 0; }
.findlist li { margin: 0; padding: 10px 0; border-top: 1px solid #e0dbcf; }
.findlist li:last-child { border-bottom: 1px solid #e0dbcf; }
.findlist span { display: block; font-size: 14.5px; color: #6a7075; }

.guidelist { list-style: none; padding: 0; }
.guidelist li { padding: 12px 0; border-top: 1px solid #e0dbcf; margin: 0; }
.guidelist li:last-child { border-bottom: 1px solid #e0dbcf; }
.guidelist span { display: block; font-size: 15px; color: #5d646a; }

.foot { margin-top: 50px; padding: 26px 0 10px 0; border-top: 1px solid #e3ded2; font-size: 14px; color: #6a7075; }
.foot a { color: #5d646a; margin-right: 16px; }
.foot p { margin: 0 0 8px 0; }

.stats { margin: 10px 0 0 0; padding-bottom: 20px; font-size: 12px; color: #8b9095; }
.stats b { font-weight: 600; color: #6a7075; }

@media (max-width: 600px) {
	h1 { font-size: 26px; }
	.answer { font-size: 27px; }
	.card { padding: 20px 18px; }
	.row { flex-direction: column; gap: 0; }
	.row dt { width: auto; font-size: 13px; }
	.nav a { margin: 0 14px 0 0; }
}