/* Shared by every page under /learn/. Colours and widths follow support.html. */
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #14151a;
	background: #f7f5f0;
	line-height: 1.6;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
a { color: #e4002b; }
h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; }
.lede { color: #6b6f76; margin: 0 0 24px; font-size: 17px; }
h2 { font-size: 19px; margin: 34px 0 10px; }
h3 { font-size: 16px; margin: 26px 0 8px; }
p, li { color: #2a2c33; }
ul, ol { padding-left: 20px; }
li { margin: 4px 0; }
.back { display: inline-block; margin-bottom: 24px; text-decoration: none; font-weight: 600; }
.page-nav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 24px; }
.page-nav .back { margin-bottom: 0; }
.language-switch { margin-left: auto; font-size: 14px; white-space: nowrap; }
.language-switch a { font-weight: 600; text-underline-offset: 3px; }
.goal { background: #fff; border: 1px solid #e4e0d8; border-radius: 12px; padding: 14px 20px; margin: 18px 0 8px; }
.goal strong { display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #6b6f76; }
.toc { list-style: none; padding: 0; }
.toc li { background: #fff; border: 1px solid #e4e0d8; border-radius: 12px; padding: 14px 20px; margin: 10px 0; }
.toc a { font-weight: 600; text-decoration: none; font-size: 17px; }
.toc span { display: block; color: #6b6f76; font-size: 15px; }
figure { margin: 16px 0; }
figure img { width: 100%; max-width: 100%; height: auto; display: block; }
figure video { width: 100%; max-width: 100%; height: auto; display: block; border: 1px solid #e3e1da; border-radius: 6px; }
figcaption { color: #6b6f76; font-size: 14px; margin-top: 6px; }
.todo { border: 1px dashed #b9b3a6; border-radius: 8px; padding: 10px 14px; color: #6b6f76; font-size: 14px; margin: 10px 0; }
.next { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; font-weight: 600; }
.next a { text-decoration: none; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid #e4e0d8; color: #6b6f76; font-size: 14px; }
code { background: #ece8df; border-radius: 4px; padding: 1px 5px; font-size: 0.92em; }
figure img[style] { margin: 0 auto; }
figure[style*="flex"] img { flex: 1 1 0; min-width: 0; }
pre { background: #f1eee6; border: 1px solid #e4e0d8; border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
pre code { background: none; padding: 0; font-size: inherit; }
.tablewrap { overflow-x: auto; margin: 14px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { border: 1px solid #e4e0d8; padding: 7px 10px; text-align: left; vertical-align: top; }
th { background: #f1eee6; }
blockquote { margin: 14px 0; padding: 4px 16px; border-left: 3px solid #b9b3a6; color: #44474e; }
.contents { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin: 14px 0 6px; }
.guide h2 { border-top: 1px solid #e4e0d8; padding-top: 26px; }
.guide h4 { font-size: 15px; margin: 20px 0 6px; }
.guide code { overflow-wrap: anywhere; }
.guide td:first-child code { overflow-wrap: normal; white-space: nowrap; }