:root { color-scheme: light dark; --measure: 74rem; --border: 1px solid CanvasText; }
* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
body { margin: 0; color: CanvasText; background: Canvas; }
header, main { width: min(calc(100% - 2rem), var(--measure)); margin-inline: auto; }
header { padding-block: 1.5rem; }
main { padding-block-end: 4rem; }
nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; list-style: none; }
a { color: LinkText; text-underline-offset: .15em; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: .2rem solid Highlight; outline-offset: .2rem; }
section { border-top: var(--border); padding-block: 1.5rem; }
p, li, dd { max-width: 78ch; }
pre { overflow-x: auto; padding: 1rem; border: var(--border); }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.line-explanation dt { margin-block-start: 1rem; font-weight: 700; }
.line-explanation dd { margin-inline-start: 1.5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { border: var(--border); padding: .65rem; text-align: left; vertical-align: top; }
.table-wrap { overflow-x: auto; }
.implementation-picker fieldset { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.skip-link { z-index: 9999; padding: .75rem 1rem; background: Canvas; color: CanvasText; border: .2rem solid currentColor; max-width: calc(100vw - 2rem); }
.focus-wrapper { padding: 1rem; border: .15rem solid currentColor; }
.variant-meta { font-size: .9em; opacity: .8; }
.callout-lead { padding: .75rem 1rem; border-inline-start: .3rem solid currentColor; background: color-mix(in srgb, Canvas 92%, CanvasText); }