.programming-stages{list-style:none;margin:0;padding:0}
.programming-stage{position:relative;display:flex;min-width:0;gap:14px;padding:18px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);margin-bottom:14px;transition:background 180ms ease,border-color 180ms ease}
.programming-stage>div{min-width:0;flex:1}
.programming-stage-number{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.programming-stage h4{font-size:var(--text-label);margin:4px 0 12px}
.programming-stage p{font-size:var(--text-body);margin:0;line-height:var(--leading-body)}
.programming-stage.stage-current{background:var(--accent-soft);border-color:var(--accent)}
.programming-stage.stage-current .programming-stage-number{background:var(--accent);color:var(--panel)}
.programming-stage-controls{align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px;border-radius:12px;background:var(--navigation-bg);margin-top:20px}
.programming-stage-controls>span{color:var(--muted);font-size:var(--text-label)}
.programming-stage-controls button{font-size:var(--text-label);font-weight:650}
.programming-worked-answer{padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--accent-soft);margin-top:24px}
.programming-worked-answer h3{font-size:var(--text-label);margin:0 0 12px}
.programming-worked-answer p{margin:0 0 16px}
.programming-worked-answer>:last-child{margin-bottom:0}
.code-example-label{font-size:var(--text-label);font-weight:650;color:var(--muted);margin:20px 0 12px}
@media(max-width:650px){.programming-stage{padding:14px 10px;gap:10px}.programming-stage-controls{padding:12px 10px}.programming-stage-controls button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.programming-stage{transition:none}}
.programming-overview .programming-stages{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.programming-overview .programming-stage{margin:0;flex-direction:row;gap:10px;background:var(--accent-soft)}
.programming-overview .programming-stage p{overflow-wrap:anywhere}
.programming-overview .programming-stage h4{margin-top:0}
.programming-flow-arrow{position:absolute;left:50%;top:-22px;transform:rotate(90deg);color:var(--accent);font-size:20px;line-height:1;z-index:1}
/* Screen descriptions contain prose; keep React source code horizontally scrollable. */
.interactive-course[data-course="react"] .pattern-example-output code{white-space:pre-wrap;overflow-wrap:anywhere}
.example-run{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:12px 0 24px;padding:10px 16px;background:var(--accent);color:var(--panel);border-radius:10px;font-weight:650;text-decoration:none}
.example-run:focus-visible{outline:3px solid var(--accent);outline-offset:4px}