:root { --accent: #222e50; }
body { line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.page-header { margin: 1rem 0 2rem; text-align: center; }
.page-header h1 { margin: 0; }
.lead { color: #555; }
.toc { background: #f6f8fa; border: 1px solid #e5e7eb; padding: 1rem; border-radius: .5rem; }
.toc h2 { margin-top: 0; }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.2rem; }
@media (max-width: 800px) { .toc ol { columns: 1; } }

.grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.meta { font-size: .9rem; color: #666; margin-bottom: .5rem; }
.badge { display: inline-block; background: var(--accent); color: #fff; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; margin-right: .35rem; }
.anchor { color: inherit; text-decoration: none; }
.anchor:hover { text-decoration: underline; }
.back-top { text-align: right; margin-top: .5rem; }
.back-top a { font-size: .85rem; color: var(--accent); }