.hero h1{font-size:clamp(1.9rem,3.2vw,2.6rem);text-wrap:balance}
.toc{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem;margin-top:1rem}
.note{border-left:4px solid var(--html);background:#F1F7FD;padding:14px 16px;border-radius:0 8px 8px 0;font-size:.93rem;color:var(--ink-soft);margin-top:1.2rem}
.body-text{max-width:80ch;margin:1.2rem 0 0;color:var(--ink-soft);line-height:1.65}
.body-text code{background:var(--bg-alt);padding:.1rem .35rem;border-radius:4px;font-size:.88em}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:1.4rem}
.cmp>div{min-width:0}
.cmp .lbl{margin:0 0 .4rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp .lbl.next{color:var(--html)}
.cmp pre.code{margin:0;font-size:.78rem;white-space:pre;word-break:normal;overflow-x:auto}
.card pre.cmd{margin:.6rem 0 .8rem;font-size:.75rem;white-space:pre;overflow-x:auto;padding-right:6.2rem}
.card p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.codecard{margin-top:1.4rem}
.hero .codecard{margin-top:0}
.faq{margin-top:1rem}
.faq p a{color:var(--html)}
@media (max-width:960px){.cmp{grid-template-columns:1fr}}
@media (max-width:480px){.install code{word-break:break-all;font-size:.78rem}}
.body-text code{white-space:nowrap}