/* Shared by every earl.md page. */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
ul { padding-left: 1.2rem; }
img { max-width: 100%; height: auto; }
.home { display: inline-block; font-size: .85rem; color: #6b6b6b; text-decoration: none; }
.home:hover { color: inherit; text-decoration: underline; }

/* The Markdown source view and the switch for it (site.js). */
.md-src {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 1.34rem 0 1rem;
}
.md-src a { color: inherit; text-decoration-color: rgba(127, 127, 127, .5); text-underline-offset: .2em; }
.md-toggle {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 10;
    display: flex; align-items: center; padding: .35rem;
    color: #8a8a8a; background: none; border: 0; cursor: pointer;
    opacity: .55; transition: opacity .2s; -webkit-tap-highlight-color: transparent;
}
.md-toggle:hover, .md-toggle:focus-visible { opacity: 1; }
.md-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.md-track {
    position: relative; width: 22px; height: 12px; box-sizing: border-box;
    border: 1px solid currentColor; border-radius: 6px;
}
.md-knob {
    position: absolute; top: 1px; left: 1px; width: 8px; height: 8px;
    border-radius: 50%; background: currentColor; transition: transform .2s;
}
.md-toggle[aria-checked="true"] .md-knob { transform: translateX(10px); }

@media (prefers-color-scheme: dark) {
    body { background: #111; color: #e6e6e6; }
    a { color: #8ab4f8; }
    .home, .md-toggle { color: #9a9a9a; }
}
@media (prefers-reduced-motion: reduce) {
    .md-toggle, .md-knob { transition: none; }
}