:root {
    --bg:#f4f6fb;
    --panel:#ffffff;
    --text:#172033;
    --muted:#536079;
    --brand:#3d6f88;
    --soft:#e8f1f5;
    --line:#d9e1ea;
    --code:#0f1726;
    --codeText:#d7e5ff;
    --accent:#dfecf2
}
@media (prefers-color-scheme:dark) {
    :root {
        --bg:#101621;
        --panel:#172131;
        --text:#eef4ff;
        --muted:#b9c6d8;
        --brand:#91c7dd;
        --soft:#1e2b3d;
        --line:#34445a;
        --code:#081120;
        --codeText:#e7f0ff;
        --accent:#24374a
    }
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
a {
    color:var(--brand);
    font-weight:650;
    text-decoration:none
}
a:hover {
    text-decoration:underline
}
.wrap {
    max-width:1180px;
    margin:0 auto;
    padding:28px
}
.hero {
    padding:30px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(135deg,var(--panel),var(--soft));
    box-shadow:0 12px 40px rgba(20,35,60,.08)
}
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px
}
.card,section {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    margin:18px 0;
    box-shadow:0 8px 24px rgba(20,35,60,.05)
}
h1,h2,h3 {
    line-height:1.2
}
h1 {
    font-size:2.2rem
}
h2 {
    border-bottom:1px solid var(--line);
    padding-bottom:8px;
    margin-top:28px
}
.badge {
    display:inline-block;
    background:var(--accent);
    padding:4px 10px;
    border-radius:999px;
    margin:3px;
    font-size:.86rem
}
.muted {
    color:var(--muted)
}
table {
    width:100%;
    border-collapse:collapse;
    margin:14px 0
}
th,td {
    border:1px solid var(--line);
    padding:8px 10px;
    vertical-align:top
}
th {
    background:var(--soft)
}
pre {
    background:var(--code);
    color:var(--codeText);
    padding:18px;
    border-radius:16px;
    overflow:auto;
    border:1px solid #27364d;
    tab-size:2
}
code {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.kw {
    color:#84c5ff;
    font-weight:700
}
.st {
    color:#73f0a7
}
.co {
    color:#8aa1bd
}
.an {
    color:#f3c37b
}
.toc {
    columns:2;
    column-gap:36px
}
details {
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    margin:10px 0;
    background:var(--panel)
}
summary {
    cursor:pointer;
    font-weight:700
}
@media(max-width:720px) {
    .wrap {
        padding:16px
    }
    .toc {
        columns:1
    }
    h1 {
        font-size:1.65rem
    }
    pre {
        font-size:.86rem
    }
}