:root{
      --ink:#0f172a;--muted:#475569;--brand:#0ea5e9;--bg:#ffffff;--card:#f8fafc;--border:#e2e8f0;
    }
    html{scroll-behavior:smooth}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
    .wrap{max-width:960px;margin:auto;padding:28px}
    header.hero{background:linear-gradient(135deg,#f5e6d4,#e6b37c 60%,#d89558);color:#fff;border-radius:18px;padding:36px 28px;position:relative;overflow:hidden}
    header.hero h1{margin:0 0 8px;font-size:clamp(28px,3.4vw,44px);line-height:1.15}
    header.hero p{margin:0;font-size:clamp(16px,2vw,19px);opacity:.95}
    .toc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin:24px 0}
    .toc h3{margin:0 0 10px}
    .toc a{color:var(--brand);text-decoration:none}
    h2{margin-top:32px;font-size:clamp(22px,2.6vw,30px)}
    h3{margin-top:22px}
    .note{background:#ecfeff;border:1px solid #bae6fd;padding:14px;border-radius:12px}
    .grid{display:grid;gap:14px}
    @media(min-width:760px){.grid.cols-2{grid-template-columns:1fr 1fr}}
    table{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
    th,td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
    th{background:#eef2ff;text-align:left}
    ul{padding-left:18px}
    .cta{margin:34px 0;padding:18px;border-radius:16px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff}
    .cta a{color:#fff;text-decoration:underline}
    footer{margin-top:36px;font-size:14px;color:var(--muted)}
    img.resp{max-width:100%;height:auto;border-radius:16px}
    .badge{display:inline-block;background:#fff3;border:1px solid #fff6;border-radius:999px;padding:6px 10px;margin-top:10px}