.content-body{min-height:100vh;background:var(--page);color:var(--ink)}
.content-main{width:min(920px,calc(100% - 32px));margin:0 auto;padding:56px 0 84px}
.content-hero{padding:34px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--brand-soft) 42%,var(--surface)));box-shadow:var(--shadow-sm);margin-bottom:28px}
.content-hero h1{margin:8px 0 14px;font-size:clamp(34px,6vw,58px);letter-spacing:-.045em;line-height:1.02}
.content-hero p{max-width:710px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}
.content-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;margin:18px 0;box-shadow:var(--shadow-xs)}
.content-card h2{margin:0 0 14px;font-size:24px;letter-spacing:-.025em}
.content-card h3{margin:24px 0 10px;font-size:17px}
.content-card p,.content-card li{color:var(--muted);line-height:1.72}
.content-card strong{color:var(--ink)}
.content-card ul,.content-card ol{padding-left:22px}
.content-card li+li{margin-top:7px}
.callout{border-left:4px solid var(--brand);background:var(--brand-soft);padding:16px 18px;border-radius:12px;color:var(--ink);line-height:1.65}
.callout.warning{border-color:var(--warning);background:var(--warning-soft)}
.content-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.content-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.content-table th,.content-table td{text-align:left;border-bottom:1px solid var(--border);padding:11px 10px;vertical-align:top}
.content-table th{color:var(--ink)}
.content-table td{color:var(--muted)}
.kbd{display:inline-flex;min-width:28px;justify-content:center;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);padding:2px 7px;font-size:12px;color:var(--ink)}
.code-block{overflow:auto;background:#17181e;color:#f3f4f8;border-radius:14px;padding:16px 18px;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.content-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:24px;color:var(--muted);font-size:13px}
.content-footer nav{display:flex;gap:16px}
@media(max-width:620px){.content-main{width:min(100% - 20px,920px);padding-top:24px}.content-hero,.content-card{padding:22px;border-radius:18px}.content-table{display:block;overflow-x:auto}}