:root {
    color-scheme: light;
    --ink: #152238;
    --muted: #5c6b7f;
    --line: #d9e1ea;
    --surface: #ffffff;
    --canvas: #f4f7fa;
    --accent: #0b6e8e;
    --accent-soft: #e4f3f7;
    --code: #edf2f6;
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --ink: #e7edf5;
        --muted: #aab8c9;
        --line: #334254;
        --surface: #172231;
        --canvas: #0e1620;
        --accent: #7dd3e8;
        --accent-soft: #123645;
        --code: #202d3c;
    }
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font:
        16px/1.65 system-ui,
        -apple-system,
        'Segoe UI',
        sans-serif;
}
a {
    color: var(--accent);
}
.shell {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}
.brand {
    color: var(--ink);
    font-weight: 750;
    text-decoration: none;
    letter-spacing: 0.02em;
}
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
nav a {
    text-decoration: none;
    font-size: 0.94rem;
}
.content {
    padding: 48px 0 72px;
}
.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
h1,
h2,
h3 {
    line-height: 1.2;
}
h1 {
    max-width: 850px;
    margin-top: 0;
    font-size: clamp(2rem, 5vw, 3.3rem);
}
h2 {
    margin-top: 2.4rem;
}
h3 {
    margin-top: 1.8rem;
}
table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
th,
td {
    border: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
th {
    background: var(--accent-soft);
}
pre {
    overflow-x: auto;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--code);
}
code {
    padding: 2px 4px;
    border-radius: 3px;
    background: var(--code);
}
pre code {
    padding: 0;
    background: transparent;
}
img {
    max-width: 100%;
    height: auto;
}
.site-footer {
    border-top: 1px solid var(--line);
    padding: 24px 0 36px;
    color: var(--muted);
    font-size: 0.9rem;
}
.site-footer .shell {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}