:root{--text:#0b1324;--muted:#5a6780;--brand:#1e90ff;--brand2:#0f6bdc;--card:#f6f8fc;--line:#e8edf6;}
    *{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fff}
    .wrap{max-width:1080px;margin:0 auto;padding:20px}
    header.hero{display:grid;gap:16px;padding:28px 20px;background:radial-gradient(1200px 600px at 80% -10%, #e9f2ff 10%, transparent 60%)}
    .badge{display:inline-block;padding:6px 10px;border-radius:20px;background:var(--card);border:1px solid var(--line);font-size:12px;color:var(--muted)}
    h1{margin:6px 0 2px;font-size:clamp(26px,4.8vw,40px)}
    .lead{color:var(--muted);max-width:760px}
    .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
    .btn{display:inline-flex;gap:8px;align-items:center;padding:12px 18px;border-radius:12px;
         color:#fff;background:linear-gradient(180deg,var(--brand),var(--brand2));text-decoration:none;font-weight:600}
    .btn.alt{background:#fff;border:1px solid var(--line);color:var(--brand2)}
    .board{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px}
    nav.toc{margin:22px 0} nav.toc ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
    nav.toc a{color:var(--brand2);text-decoration:none}
    section{padding:18px 0;border-top:1px solid var(--line)}
    h2{margin:0 0 8px;font-size:clamp(20px,3.8vw,30px)}
    .grid{display:grid;gap:14px}
    .grid.cols-3{grid-template-columns:1fr}
    .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
    table{width:100%;border-collapse:collapse;border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden}
    th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
    tr:nth-child(even){background:#fafbfe}
    footer{color:var(--muted);padding:24px 0}
    @media(min-width:860px){ header.hero{grid-template-columns:1.2fr .8fr;align-items:center}
      .grid.cols-3{grid-template-columns:repeat(3,1fr)} }