* { box-sizing: border-box; } body { margin:0; background:#fffdf8; color:#203b36; font:1.125rem/1.7 system-ui,sans-serif; } header,main,footer { width:min(100% - 2rem, 76rem); margin-inline:auto; } header { padding-block:1.5rem; } main { max-width:54rem; padding-block:1rem 4rem; overflow-wrap:anywhere; } h1 { font-size:2.4rem; line-height:1.15; color:#183d35; } h2 { font-size:1.55rem; line-height:1.3; margin-top:2.4rem; } h3 { line-height:1.35; } p,li { max-width:75ch; } li { margin-block:.5rem; } a { color:#17564d; text-underline-offset:.2em; } a:hover { text-decoration-thickness:.15em; } :focus-visible { outline:3px solid #963e06; outline-offset:4px; } .meta { font-size:1rem; color:#405f56; } nav { display:flex; flex-wrap:wrap; gap:1rem; } pre { background:#eef3ed; padding:1rem; border:1px solid #83978a; border-radius:.4rem; overflow:auto; font:0.92rem/1.65 ui-monospace,monospace; } code { font-family:ui-monospace,monospace; } img,video,audio { max-width:100%; height:auto; } figure { margin:2rem 0; } figcaption { font-size:.95rem; color:#405f56; } .index-list li { margin-block:1.2rem; } footer { padding:1.5rem 0; font-size:.95rem; } @media print { body { background:white; color:black; font-size:11pt; } header nav, footer { display:none; } main { width:100%; } pre { white-space:pre-wrap; overflow-wrap:anywhere; } h2 { break-after:avoid; } figure,pre { break-inside:avoid; } }