
    :root { --maxw: 1080px; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#0f172a; line-height:1.65; margin:0; }
    header { background:#f8fafc; border-bottom:1px solid #e2e8f0; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px; }
    h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 8px; }
    h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: 36px; }
    h3 { font-size: 1.05rem; margin-top: 20px; }
    p { margin: 12px 0; }
    ul { padding-left: 20px; }
    table { width:100%; border-collapse: collapse; margin:16px 0; }
    th, td { border:1px solid #e2e8f0; padding:10px; text-align:left; }
    .toc { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
    .badge { display:inline-block; font-size:.8rem; background:#eef2ff; color:#3730a3; padding:4px 10px; border-radius:999px; margin-right:8px; }
    .cta { background:#111827; color:#fff; padding:18px 20px; border-radius:14px; margin: 32px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .cta a { background:#facc15; color:#111827; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:600; }
    footer { background:#f8fafc; border-top:1px solid #e2e8f0; }
    .muted { color:#475569; }
    .grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .card { border:1px solid #e2e8f0; border-radius:14px; padding:16px; background:#ffffff; }
    .pill { font-size:.8rem; color:#334155; background:#e2e8f0; padding:2px 8px; border-radius:999px; }
  