/* Inline article explanations: all wording remains selectable HTML. */
.af-figure { margin:1.75rem 0 2rem; padding:clamp(1rem,3vw,1.5rem); border-radius:var(--radius-lg); background:var(--accent); color:var(--foreground); }
.af-figure .af-title { margin:0 0 1rem; font-size:1rem; font-weight:800; line-height:1.6; }
.af-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.875rem; }
.af-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.af-step { min-width:0; padding:1rem; border-radius:var(--radius-md,1rem); background:var(--card); }
.af-step > b { display:block; font-size:.9375rem; font-weight:800; line-height:1.6; }
.af-figure .af-step > p { margin:.4rem 0 0; font-size:.875rem; line-height:1.7; }
.af-icon { display:block; width:2rem; height:2rem; margin-bottom:.65rem; color:var(--foreground); }
.af-figure .af-label { display:block; margin:0 0 .4rem; font-size:.75rem; line-height:1.6; color:var(--muted-foreground); }
.af-note { padding:1rem 1.1rem; border-left:4px solid var(--primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--card); }
.af-figure .af-note > p { margin:0; font-size:.9375rem; line-height:1.8; }
.af-figure .af-note > p + p { margin-top:.5rem; }
.af-split { display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:1.5rem; align-items:center; }
.af-split > * { min-width:0; }
.af-screenshot { display:block; width:100%; max-width:18rem; height:auto; margin-inline:auto; border:1px solid var(--border); border-radius:var(--radius-md,1rem); background:var(--card); }
.af-figure .af-caption { margin:.875rem 0 0; color:var(--muted-foreground); font-size:.75rem; line-height:1.7; text-align:left; }
.af-figure .af-copy { margin:0; font-size:.9375rem; line-height:1.8; }
.af-figure .af-copy + .af-note { margin-top:1rem; }
@media(max-width:520px) {
  .af-grid, .af-grid--3, .af-split { grid-template-columns:minmax(0,1fr); }
  .af-grid--3 .af-step { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.15rem .75rem; align-items:center; }
  .af-grid--3 .af-icon { grid-row:1 / 3; margin:0; }
  .af-grid--3 .af-step > p { margin:0; }
  .af-split { gap:1rem; }
}

/* Key phrases only: a low marker leaves the original type weight and line height intact. */
.af-highlight { color:inherit; font-weight:inherit; background:linear-gradient(transparent 58%,color-mix(in srgb,var(--primary) 70%,transparent) 58%); padding:0 .06em; border-radius:.1em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }