* { box-sizing: border-box; } body { margin: 0; background: #f6f4ef; color: #252c32; font: 17px/1.8 system-ui, sans-serif; } main, header, footer { width: min(100% - 40px, 880px); margin: auto; } header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 28px 0; border-bottom: 1px solid #d8d7d2; } main { padding: 48px 0; } h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.35; overflow-wrap: anywhere; } h2 { margin-top: 36px; font-size: 24px; } a { color: #1c625a; text-underline-offset: 4px; } .actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0; } .actions a { border: 1px solid #1c625a; border-radius: 8px; padding: 10px 18px; } footer { padding: 24px 0; border-top: 1px solid #d8d7d2; font-size: 14px; } :focus-visible { outline: 3px solid #1c625a; outline-offset: 4px; } @media (prefers-color-scheme: dark) { body { background: #171d20; color: #e7e9e5; } header, footer { border-color: #48524e; } a { color: #9acfc0; } .actions a { border-color: #9acfc0; } }

.skip { position: absolute; left: 20px; top: -70px; background: #fff; padding: 8px; z-index: 2; } .skip:focus { top: 8px; }
nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 15px; } .lede { font-size: 20px; }
figure { margin: 24px 0; } img { display: block; max-width: 100%; height: auto; border-radius: 12px; } figcaption { font-size: 14px; margin-top: 10px; }
.notice { border-left: 4px solid #1c625a; padding: 8px 20px; background: #e8eeea; border-radius: 8px; } .notice h2 { margin-top: 10px; }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 12px; border-bottom: 1px solid #b8cac2; min-width: 130px; }
pre { max-width: 100%; overflow-x: auto; padding: 16px; border: 1px solid #b8cac2; border-radius: 8px; font-size: 14px; } li { margin-block: 12px; } p, li { overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .notice { background: #253832; border-color: #9acfc0; } .skip { background: #171d20; } }