/* render with slight depth */ @supports #{'selector\(:has(kbd))'} { /* style individual keys only (for the innermost element) */ kbd kbd, kbd:not(:has(kbd)) { font-family: monospace; padding: 0.25em; background: var(--ui-overlay); color: var(--ui-overlay-text); border: 1px solid var(--primary-accent-transparent); margin-inline: 0.25em; } } @supports not #{'selector\(:has(kbd))'} { /* style the entire key sequence */ kbd { font-family: monospace; padding: 0.25em; background: var(--ui-overlay); color: var(--ui-overlay-text); } /* and prevent double-styling for nested keys */ kbd kbd { background: none; } } /* render as highlighting */ mark { background: var(--primary-accent-transparent); color: var(--ui-text); --pad-x-highlight: 0.125em; padding-inline-start: var(--pad-x-highlight); padding-inline-end: var(--pad-x-highlight); } /* lists */ ul {list-style: disc;} ol {list-style: decimal;} /* tables */ table {text-align: center;} thead { font-weight: bold; background: var(--ui-overlay); color: var(--ui-overlay-text); } th, td { border: 1px solid var(--ui-text); padding: 0.5em; } /* figures */ figure { margin: 0; } figcaption { padding-block: 1em; padding-inline: 1em; } /* extra style and flair */ code { background: var(--ui-overlay); color: var(--ui-overlay-text); padding: 0.25rem; } /* fix pre */ pre { margin: 0; } /* limit img to page width */ img { max-inline-size: 100%; }