/* Worked examples share the established editorial surfaces and type. */
.visual-example{margin:0;min-width:0;background:var(--bg);overflow-wrap:anywhere}
.visual-example img,.visual-example video{display:block;width:100%;max-width:100%;height:auto;min-width:0}
.visual-example img{object-fit:contain}.visual-example .media-cover{object-fit:cover}
.visual-example video{background:#080c10;object-fit:contain}
.visual-example-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line)}
.visual-panel{margin:0;min-width:0;background:var(--surface);display:flex;flex-direction:column}
.visual-panel-label{margin:0;padding:.65rem .85rem;font:600 .88rem/1.5 var(--font-body);color:var(--text);background:var(--raised);border-top:1px solid var(--line)}
.visual-example-description{margin:0;padding:.85rem 1rem;font-size:.94rem;line-height:1.65;color:var(--muted);background:var(--surface)}
.visual-example--gallery>img{aspect-ratio:16/10;object-fit:contain}.visual-example--gallery>img.media-cover{object-fit:cover}
.visual-example--gallery .visual-panel img{aspect-ratio:4/3;object-fit:contain}
.visual-example--article{margin-block:1.25rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.visual-example--article .visual-panel img{object-fit:contain}
.visual-example video:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.guide-visual-lead{margin-bottom:2rem}.guide-visual-lead>.visual-example{margin-top:0}
.example-steps{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1rem}
.example-steps summary{font:600 1rem/1.5 var(--font-heading);cursor:pointer;min-height:30px}
.example-steps ol{margin:1rem 0 0;padding-left:1.4rem;display:grid;gap:.9rem}.example-steps li{min-width:0}.example-steps .map-label{display:none}.example-steps strong{font-size:1rem}.example-steps p{margin:.2rem 0 0;font-size:.92rem;color:var(--muted)}
@media(min-width:600px){.visual-example-panels{grid-template-columns:repeat(var(--example-panels,2),minmax(0,1fr))}}
@media print{.visual-example{break-inside:avoid;background:#fff}.visual-example-description,.visual-panel-label{color:#222;background:#fff}.visual-example video{max-height:14rem}}