.cx { margin-top: var(--s4); display: grid; gap: var(--s4); }
.cx-hook { border: 1px solid var(--warn-line, var(--warn)); background: var(--warn-soft); border-radius: var(--radius, 10px); padding: var(--s4); }
.cx-hook p { margin: 0; }
.cx-hook__k { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--warn-text); }
.cx-hook__n { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--warn-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cx-hook__l { color: var(--text); font-size: .9375rem; }
.cx-fig { margin: 0; }
.cx-cap { font-weight: 650; font-size: .9375rem; margin-bottom: var(--s2); }
.cx-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.cx-t { fill: var(--text-2); font-size: 12px; font-family: var(--font); }
.cx-v { fill: var(--text); font-weight: 650; }
.cx-bar { fill: var(--c1); }
.cx-bar--bad { fill: var(--bad); }
.cx-axis { stroke: var(--line-2); stroke-width: 1; }
.cx-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.cx-line--a { stroke: var(--c1); }
.cx-line--b { stroke: var(--c2); }
.cx-lab-a { fill: var(--c1); font-weight: 650; }
.cx-lab-b { fill: var(--c2); font-weight: 650; }
.cx-meaning { border-left: 3px solid var(--accent); background: var(--surface); padding: var(--s4) var(--s5); border-radius: 0 var(--radius, 10px) var(--radius, 10px) 0; }
.cx-meaning h2 { font-size: 1.125rem; margin: 0 0 var(--s2); }
.cx-related { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: var(--s3) 0 0; }
.cx-related a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; }
.cx-table-wrap { overflow-x: auto; }
.cx-verify { font-family: var(--mono); font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { .cx * { transition: none !important; animation: none !important; } }