* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f4f7f5;
  color: #243d37;
  font: 17px/1.85 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
header { background: #154c43; color: white; padding: 40px 24px; }
header > div, main, footer { width: min(900px, 100%); margin: auto; }
header p { color: #d6ebe5; }
h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.3; margin: 12px 0; }
h2 { font-size: 25px; line-height: 1.4; margin-top: 0; }
h3 { font-size: 19px; line-height: 1.5; }
main { padding: 24px 16px; }
section, .toc {
  background: white;
  border: 1px solid #d9e6e0;
  border-radius: 18px;
  padding: 26px;
  margin-bottom: 20px;
  scroll-margin-top: 20px;
}
a { color: #166a59; text-underline-offset: 4px; overflow-wrap: anywhere; }
header a {
  color: white;
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #8eafa6;
  border-radius: 8px;
  margin: 4px;
}
nav a { display: inline-block; padding: 8px 12px; }
li { margin: 8px 0; }
ol, ul { padding-left: 24px; }
.note { border-left: 4px solid #d39b35; background: #fff7e6; padding: 14px 18px; border-radius: 6px; }
.tag { font-size: 14px; letter-spacing: 1px; color: #476b60; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: #f1f7f4; padding: 18px; border-radius: 12px; }
footer { padding: 0 24px 36px; font-size: 14px; color: #587268; }
a:focus-visible { outline: 3px solid #d39b35; outline-offset: 4px; }
@media (max-width: 600px) {
  section, .toc { padding: 20px; }
  .cards { grid-template-columns: 1fr; }
  header { padding: 28px 18px; }
}
@media print {
  body { background: white; font-size: 12pt; }
  header { background: white; color: black; padding: 0; }
  header p { color: black; }
  header nav, .toc { display: none; }
  main { padding: 0; }
  section { border: 0; border-radius: 0; padding: 12px 0; break-inside: avoid; }
  a { color: inherit; }
}