.lesson-visual{margin:30px 0 38px;border:1px solid var(--line2);background:var(--surf);overflow:hidden}
.lesson-visual__heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.lesson-visual__heading span{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}
.lesson-visual__heading strong{font:500 19px var(--display);color:var(--ink)}
.lesson-visual__image{display:block;width:min(100%,520px);height:auto;margin:0 auto;background:#08090d}
.lesson-visual figcaption{border-top:1px solid var(--line2);padding:14px 18px}
.lesson-visual__note{display:block;font:10px/1.5 var(--mono);color:var(--mut)}
.lesson-visual__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:12px 0 0;padding-left:20px}
article .lesson-visual__steps li{margin:0;font:13px/1.5 var(--sans);color:var(--ink2);min-width:0}
.lesson-visual__steps li::marker{color:var(--gold)}
.lesson-visual__steps li.is-current{color:var(--ink)}
.lesson-visual__controls{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line2)}
.lesson-visual__controls[hidden]{display:none}
.lesson-visual__controls button{min-height:36px;padding:6px 11px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:500 11px var(--sans);cursor:pointer}
.lesson-visual__controls button:hover:not(:disabled),.lesson-visual__controls button:focus-visible{border-color:var(--aqua);color:var(--aqua)}
.lesson-visual__controls button:disabled{opacity:.4;cursor:default}
.lesson-visual__count{margin-left:auto;min-width:78px;text-align:center;font:10px var(--mono);color:var(--mut);white-space:nowrap}
@media(max-width:520px){.lesson-visual__heading{padding:12px 14px}.lesson-visual figcaption{padding:12px 14px}.lesson-visual__steps{grid-template-columns:1fr;gap:6px}.lesson-visual__controls{flex-wrap:wrap;padding:10px 14px}.lesson-visual__count{order:2;width:100%;text-align:left;margin:0}}