:root {
    --text: #202124;
    --muted: #5f6368;
    --bg: #fff;
    --accent: rgb(52, 117, 224);
    --rule: #dadce0;
    --code-bg: #f1f3f4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #e8eaed;
        --muted: #9aa0a6;
        --bg: #202124;
        --accent: rgb(138, 180, 248);
        --rule: #3c4043;
        --code-bg: #303134;
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    max-width: 44em;
    margin: 0 auto;
    padding: 1em;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--accent); }

nav.crumbs, nav.pager, footer {
    color: var(--muted);
    font-size: small;
}

nav.crumbs { margin-bottom: 1.5em; }

nav.pager {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid var(--rule);
}

nav.pager a { text-decoration: none; }

footer {
    margin-top: 2em;
    text-align: center;
}

h1 { font-size: 1.9em; line-height: 1.2; }
h2 { font-size: 1.35em; margin-top: 1.8em; color: var(--accent); }
h3 { font-size: 1.1em; margin-top: 1.5em; }

img { max-width: 100%; height: auto; }

/* Screenshots are 720 px wide phone pictures: half that, as on a phone. */
img.shot {
    display: block;
    width: 360px;
    margin: 1em auto;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

img.chapter-icon { width: 72px; display: block; margin: 0.5em 0; }
img.symbol { height: 1.3em; width: auto; vertical-align: -0.3em; }

/* The symbols are dark grey on transparent: on a dark page they need a light chip. */
@media (prefers-color-scheme: dark) {
    img.symbol { background: #e8eaed; border-radius: 4px; padding: 1px; }
}
img.qr { width: 160px; display: block; margin: 1em auto; background: #fff; padding: 8px; }

figure { margin: 1em 0; }
figcaption { text-align: center; color: var(--muted); font-size: small; }

table { border-collapse: collapse; margin: 1em 0; width: 100%; font-size: 0.95em; }
th, td { border: 1px solid var(--rule); padding: 0.35em 0.6em; text-align: left; vertical-align: top; overflow-wrap: break-word; }

code { background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
pre { background: var(--code-bg); padding: 0.8em; border-radius: 6px; overflow-x: auto; }
pre code { padding: 0; background: none; }

ol.toc, ol.toc ol { padding-left: 1.4em; }
ol.toc > li { margin: 0.5em 0; }
ol.toc ol li { margin: 0.15em 0; font-size: 0.95em; }

.cover { margin: 2em 0; }
.cover h1 { font-size: 2.4em; }