* { 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; } }

dl { margin: 20px 0; } dt { font-weight: 700; margin-top: 18px; } dd { margin: 4px 0 0; } .example, .boundary { border: 1px solid #d8d7d2; border-radius: 12px; padding: 20px; margin: 28px 0; } .example h2 { margin-top: 0; } textarea { display: block; width: 100%; min-width: 0; padding: 16px; border: 1px solid #a7afa8; border-radius: 8px; background: inherit; color: inherit; font: 15px/1.7 ui-monospace, monospace; resize: vertical; } @media (prefers-color-scheme: dark) { .example, .boundary, textarea { border-color: #64776e; } }