:root{
      --bg:#f7f9fc;
      --card:#ffffff;
      --text:#1b2430;
      --muted:#5b667a;
      --primary:#0b5bd3;
      --border:#e6ebf2;
      --radius:18px;
      --shadow:0 6px 24px rgba(10,30,70,.08);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
      background:var(--bg); color:var(--text); line-height:1.65;
    }
    header{
      background:linear-gradient(135deg, #0b5bd3, #0aa1ff);
      color:#fff; padding:48px 20px 56px;
    }
    .wrap{max-width:1100px; margin:0 auto; padding:0 16px}
    .title{margin:0 0 6px; font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:.2px}
    .sub{margin:0; opacity:.95; font-size:clamp(14px,1.8vw,16px)}
    .meta{margin-top:10px; font-size:14px; opacity:.9}
    main{margin-top:-34px; padding-bottom:56px}
    .layout{display:grid; grid-template-columns:280px 1fr; gap:22px}
    .card{
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    nav.card{position:sticky; top:16px; height:max-content; padding:14px}
    .toc h3{margin:8px 10px 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
    .toc a{
      display:block; padding:10px 12px; margin:4px; border-radius:12px; text-decoration:none;
      color:var(--text); font-size:14.5px; border:1px solid transparent;
    }
    .toc a:hover{background:#f1f5ff; border-color:#e1e9ff}
    article.card{padding:24px}
    h2{
      font-size:22px; margin:28px 0 10px;
    }
    p,li{color:#2a3342}
    .note{
      padding:12px 14px; background:#f1f6ff; border:1px dashed #cfe0ff; border-radius:12px; color:#153e82;
      font-size:14px;
    }
    .divider{height:1px; background:var(--border); margin:18px 0}
    .muted{color:var(--muted)}
    .chip{
      display:inline-block; padding:6px 10px; font-size:12px; border-radius:999px; background:#eef4ff; color:#0b5bd3; border:1px solid #d9e6ff;
    }
    .footer{
      text-align:center; font-size:13px; color:var(--muted); padding:26px 0 10px;
    }
    .agree-cta{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;
    }
    .btn{
      appearance:none; border:none; background:var(--primary); color:#fff; padding:10px 16px; border-radius:12px; cursor:pointer;
      font-weight:600; box-shadow:0 6px 20px rgba(11,91,211,.22);
    }
    .btn:disabled{opacity:.55; box-shadow:none; cursor:not-allowed}
    code.inline{background:#f3f5f9; border:1px solid #e6eaf1; padding:2px 6px; border-radius:8px}
    @media (max-width: 980px){ .layout{grid-template-columns:1fr} nav.card{position:static} }