:root {
      --text:#0f172a; --muted:#475569; --brand:#0ea5e9; --bg:#ffffff; --card:#f8fafc; --border:#e2e8f0;
    }
    body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.65; margin:0;}
    .container {max-width: 980px; margin: 0 auto; padding: 32px 20px;}
    header {margin-bottom: 18px;}
    h1 {font-size: clamp(28px, 4vw, 40px); line-height:1.2; margin:0 0 10px;}
    .subtitle {color:var(--muted); font-size: 18px; margin:0 0 24px;}
    nav.toc {background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin: 20px 0 30px;}
    nav.toc a {color:var(--brand); text-decoration:none;}
    section {margin: 28px 0;}
    h2 {font-size: 24px; margin: 0 0 12px;}
    h3 {font-size: 20px; margin: 18px 0 10px;}
    .card {background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; margin:14px 0;}
    .cta {display:inline-block; background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600;}
    .cta:hover {opacity:.95;}
    .note {font-size:14px; color:var(--muted);}
    table {width:100%; border-collapse: collapse; background:var(--bg); border:1px solid var(--border); border-radius:10px; overflow:hidden;}
    th, td {padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
    th {background:#eef6ff; text-align:left;}
    tr:last-child td {border-bottom:none;}
    ul {padding-left: 18px;}
    a {color:var(--brand);}
    footer {margin-top: 36px; color: var(--muted); font-size:14px;}