:root{--fg:#0f172a;--muted:#475569;--bg:#f8fafc;--card:#ffffff;--brand:#0ea5e9}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue','Apple Color Emoji','Segoe UI Emoji',Arial,sans-serif;line-height:1.55}
.wrap{max-width:900px;margin:48px auto;padding:0 20px}
header{background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));border:1px solid #e2e8f0;border-radius:20px;padding:28px 24px;box-shadow:0 6px 24px rgba(2,6,23,.06)}
h1{margin:0 0 8px 0;font-size:clamp(28px,4vw,36px)}
.sub{color:var(--muted);margin:0 0 6px 0}
.badge{display:inline-block;background:rgba(14,165,233,.1);color:var(--brand);padding:4px 10px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid rgba(14,165,233,.25)}
section{background:var(--card);border:1px solid #e2e8f0;border-radius:16px;padding:22px 20px;margin:18px 0}
h2{margin:0 0 6px 0;font-size:22px}
p,li{color:var(--fg)}
ul{margin:10px 0 0 18px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px}
footer{color:var(--muted);font-size:14px;margin-top:22px;text-align:center}