:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182019;
  background: #f7f8f4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(100%, 620px); margin: 0 auto; padding: 30px 20px 50px; }
.site-link { display: inline-flex; align-items: center; min-height: 48px; color: #355541; font-size: 14px; font-weight: 750; text-decoration: none; }
header { margin: 48px 0 28px; }
.eyebrow { margin: 0 0 9px; color: #45634d; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(34px, 9vw, 48px); line-height: 1.08; letter-spacing: -.05em; }
header p:last-child { margin: 12px 0 0; color: #5a675d; font-size: 16px; }
.topics { display: grid; gap: 11px; }
.topics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
  padding: 16px 19px;
  border: 1px solid #d9e1d8;
  border-radius: 14px;
  background: #fff;
  color: #182019;
  text-decoration: none;
  box-shadow: 0 5px 20px #17221a06;
}
.topics a:focus-visible, .site-link:focus-visible { outline: 3px solid #258849; outline-offset: 3px; }
.topics strong, .topics small { display: block; }
.topics strong { font-size: 19px; letter-spacing: -.02em; }
.topics small { margin-top: 5px; color: #617066; font-size: 14px; }
.arrow { color: #3a6044; font-size: 24px; }
.note { margin: 25px 2px 0; color: #69756b; font-size: 13px; line-height: 1.5; }
:root:where([data-theme="dark"]) { color: #f1f5f0; background: #111914; }
:where([data-theme="dark"]) .site-link, :where([data-theme="dark"]) .eyebrow { color: #b0d3b6; }
:where([data-theme="dark"]) header p:last-child, :where([data-theme="dark"]) .note { color: #a7b7aa; }
:where([data-theme="dark"]) .topics a { background: #1c2820; border-color: #37463a; color: #f1f5f0; }
:where([data-theme="dark"]) .topics small { color: #acbcae; }
:where([data-theme="dark"]) .arrow { color: #b0d3b6; }