:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text: #1f2933;
    --muted: #52606d;
    --line: #d9dee3;
    --accent: #2457c5;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; color: var(--text); text-decoration: none; }

nav { display: flex; gap: 1.25rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a.active { color: var(--accent); }

.page { max-width: 52rem; margin: 2rem auto; padding: 0 1.5rem; }

h1 { font-size: 1.75rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 0.5rem 0.75rem; border: 1px solid var(--line); text-align: left; }
th { background: #eef1f4; }

code, pre { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
pre { padding: 1rem; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }

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

.foot { max-width: 52rem; margin: 3rem auto 2rem; padding: 0 1.5rem; color: var(--muted); font-size: 0.875rem; }