:root { --bg: #ffffff; --fg: #1f2328; --muted: #59636e; --line: #d1d9e0; --accent: #0b5cad; --box: #f6f8fa; }
@media (prefers-color-scheme: dark) { :root { --bg: #16181d; --fg: #e6e8eb; --muted: #9aa3ad; --line: #30363d; --accent: #6cb0ff; --box: #1f232a; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
header.top { border-bottom: 1px solid var(--line); }
header.top nav { max-width: 1100px; margin: 0 auto; padding: 0.7em 16px; display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; align-items: baseline; }
header.top a { text-decoration: none; }
header.top .brand { font-weight: 600; font-size: 1.15em; color: var(--fg); margin-right: auto; }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 2em; }
.hero { text-align: center; padding-top: 2em; }
.hero h1 { font-size: 2.1em; line-height: 1.2; margin: 0.2em 0; }
.lead { font-size: 1.2em; color: var(--muted); max-width: 46em; margin: 0.5em auto 1em; }
.hero img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 1.5em; }
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; }
.button { display: inline-block; padding: 0.55em 1.1em; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
section { margin-top: 2.5em; }
.features li { margin: 0.5em 0; }
table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
code { background: var(--box); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.92em; overflow-wrap: anywhere; }
pre { background: var(--box); padding: 0.8em; overflow-x: auto; border-radius: 6px; }
pre code { padding: 0; }
.manual { max-width: 1200px; margin: 0 auto; display: flex; gap: 2em; padding: 0 16px; }
.manual aside { flex: 0 0 15em; font-size: 0.93em; padding-top: 1.5em; }
.manual aside ul { list-style: none; padding: 0; margin: 0; }
.manual aside li { margin: 0.25em 0; }
.manual main.topic { flex: 1; min-width: 0; padding: 0 0 2em; margin: 0; }
.os { border-left: 3px solid var(--line); padding: 0.1em 0 0.1em 1em; margin: 1em 0; }
.os-label { font-size: 0.85em; color: var(--muted); margin: 0.3em 0; text-transform: uppercase; letter-spacing: 0.04em; }
table.compare th[scope], table.compare tr th:first-child { white-space: nowrap; }
table.compare td, table.compare th { font-size: 0.93em; }
.note { color: var(--muted); font-size: 0.9em; }
main > p.lead { margin-left: 0; }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9em; padding: 1.2em 16px; text-align: center; }
@media (max-width: 760px) { .manual { flex-direction: column; gap: 0; } .manual aside { flex: none; } .hero h1 { font-size: 1.6em; } }