:root {
    --bg:#f5f7fb;
    --card:#ffffff;
    --ink:#10213f;
    --muted:#55677f;
    --line:#dbe3ee;
    --soft:#eef5fb;
    --accent:#3b6f88;
    --accent2:#5c7c64;
    --code:#0f172a;
    --code-border:#263247;
    --shadow:0 12px 32px rgba(15,23,42,.08);
    --radius:18px;
    --good:#e6f6ee;
    --warn:#fff5df;
    --bad:#ffe8e8;
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:linear-gradient(135deg,#f7f8fb,#eef5fb 55%,#f7f4ee);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    line-height:1.65
}
a {
    color:#2f5d78;
    text-decoration:none
}
a:hover {
    text-decoration:underline
}
.wrap {
    max-width:1180px;
    margin:0 auto;
    padding:28px
}
.hero {
    border:1px solid var(--line);
    background:linear-gradient(135deg,#fff,#edf6f3);
    border-radius:28px;
    padding:34px;
    margin:28px 0;
    box-shadow:var(--shadow)
}
.hero h1 {
    font-size:clamp(2rem,4vw,4rem);
    line-height:1.05;
    margin:.1em 0
}
.hero p {
    max-width:880px;
    color:var(--muted);
    font-size:1.08rem
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid #cfe1df;
    background:#ffffffa8;
    border-radius:999px;
    padding:.35rem .7rem;
    font-weight:700;
    color:#33556a;
    font-size:.88rem
}
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:18px
}
.card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow)
}
.card h3 {
    margin:.2rem 0 .5rem
}
.muted {
    color:var(--muted)
}
.toc {
    display:grid;
    grid-template-columns:300px 1fr;
    gap:24px;
    align-items:start
}
.sidebar {
    position:sticky;
    top:16px;
    max-height:calc(100vh - 32px);
    overflow:auto;
    background:#ffffffd9;
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px;
    box-shadow:var(--shadow)
}
.sidebar a {
    display:block;
    padding:7px 8px;
    border-radius:10px;
    color:#334761
}
.sidebar a:hover {
    background:#edf4f8;
    text-decoration:none
}
.content {
    background:#ffffffcf;
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow)
}
h1,h2,h3 {
    line-height:1.22
}
h2 {
    margin-top:2.2rem;
    border-top:1px solid var(--line);
    padding-top:1.2rem
}
pre {
    background:var(--code);
    color:#dbeafe;
    border:1px solid var(--code-border);
    border-radius:16px;
    padding:18px;
    overflow:auto;
    line-height:1.55;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
code {
    font-family:"Cascadia Code","JetBrains Mono","Fira Code",Consolas,monospace;
    font-size:.92em
}
p code,li code,td code {
    background:#edf3f7;
    color:#16324c;
    border:1px solid #d7e2ee;
    border-radius:6px;
    padding:.12rem .32rem
}
table {
    width:100%;
    border-collapse:collapse;
    margin:1.2rem 0;
    background:white;
    border-radius:14px;
    overflow:hidden
}
th,td {
    border:1px solid var(--line);
    padding:.65rem;
    vertical-align:top
}
th {
    background:#edf4f8;
    text-align:left
}
blockquote {
    border-left:5px solid #89a8b8;
    background:#f1f6f8;
    border-radius:12px;
    margin:1rem 0;
    padding:1rem 1.2rem;
    color:#334761
}
.svgbox {
    background:linear-gradient(135deg,#f9fbff,#eef7f4);
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    margin:1rem 0
}
.toolbar {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:16px 0
}
.btn {
    border:1px solid #bdd2dd;
    background:#fff;
    border-radius:12px;
    padding:.6rem .85rem;
    color:#24475e;
    font-weight:700;
    cursor:pointer
}
input.search {
    width:100%;
    padding:.9rem 1rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    font-size:1rem
}
.hit {
    outline:2px solid #f4c84d;
    background:#fff5bb;
    border-radius:4px
}
.searchNav {
    display:none;
    gap:8px;
    align-items:center
}
.small {
    font-size:.9rem
}
.kpi {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:12px 0
}
.kpi span {
    display:inline-flex;
    background:#eef5fb;
    border:1px solid #d6e4ee;
    border-radius:999px;
    padding:.25rem .6rem;
    font-weight:700;
    color:#36536b
}
.hl .c {
    color:#8fb3d9
}
.hl .k {
    color:#93c5fd;
    font-weight:700
}
.hl .s {
    color:#86efac
}
.hl .m {
    color:#fbbf24
}
.hl .n {
    color:#e2e8f0
}
.hl .o {
    color:#f0abfc
}
.hl .nd {
    color:#fda4af
}
.hl .nc {
    color:#67e8f9
}
.hl .nf {
    color:#c4b5fd
}
.hl .nt {
    color:#93c5fd
}
.hl .na {
    color:#f9a8d4
}
.hl .cp {
    color:#fde68a
}
@media(max-width:860px) {
    .wrap {
        padding:14px
    }
    .toc {
        display:block
    }
    .sidebar {
        position:relative;
        top:auto;
        max-height:none;
        margin-bottom:16px
    }
    .content {
        padding:18px
    }
    .hero {
        padding:24px
    }
    .grid {
        grid-template-columns:1fr
    }
    pre {
        border-radius:13px;
        padding:14px;
        font-size:.86rem
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:#0b1120;
        --card:#121a2b;
        --ink:#e7edf7;
        --muted:#b7c4d6;
        --line:#2b3b55;
        --soft:#111f30;
        --accent:#84a7ba;
        --code:#08111f;
        --code-border:#26364e
    }
    body {
        background:linear-gradient(135deg,#09111f,#102033 55%,#17221e);
        color:var(--ink)
    }
    .card,.content,.sidebar {
        background:#111a2bcc
    }
    .hero {
        background:linear-gradient(135deg,#10192b,#122b2b)
    }
    p code,li code,td code {
        background:#17243a;
        color:#dbeafe;
        border-color:#2b3b55
    }
    th {
        background:#16243a
    }
    blockquote {
        background:#111f30;
        color:#dbe6f4
    }
    .svgbox {
        background:#101b2b
    }
    .btn,input.search {
        background:#121a2b;
        color:#e7edf7;
        border-color:#2b3b55
    }
    .badge {
        background:#111a2bcc;
        color:#dbeafe
    }
    .kpi span {
        background:#16243a;
        color:#dbeafe;
        border-color:#2b3b55
    }
}