/* Original illustrative control and audio diagrams. */
.concept-figure{margin:30px 0;background:var(--card);border:1px solid var(--line-strong)}
.concept-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;background:var(--ink);color:var(--paper);font: .78rem/1.5 var(--font-mono);letter-spacing:.04em}
.control-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:0}
.control-flow>li{position:relative;padding:26px 28px;border-right:1px solid var(--line)}
.control-flow>li:last-child{border:0}
.control-flow>li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:30px;z-index:1;width:28px;text-align:center;color:var(--ink);background:var(--card);font-size:1.5rem}
.flow-number{color:var(--accent);font:700 1.5rem/1.4 var(--font-mono)}
.control-flow h3{font-size:1.15rem;line-height:1.35;margin:12px 0}
.control-flow p{font-size:1rem;color:var(--ink-2);margin:12px 0}
.concept-figure figcaption{padding:18px 24px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.92rem}
.routing-diagram{padding:8px 24px 24px}
.route{padding:18px 0;border-bottom:1px solid var(--line)}
.route:last-child{border:0;padding-bottom:0}
.route h3{margin:0 0 14px;font-size:1rem}
.route ol{display:flex;align-items:stretch;gap:28px;list-style:none;margin:0;padding:0}
.route li{position:relative;display:flex;align-items:center;flex:1;min-width:0;padding:15px 14px;background:var(--paper-2);border:1px solid var(--line-strong);font-size:.94rem;line-height:1.45}
.route li:not(:last-child)::after{content:"→";position:absolute;left:calc(100% + 5px);width:20px;color:var(--ink);font-size:1.3rem;text-align:center}
.route p{margin:12px 0 0;font-size:.94rem;color:var(--ink-2)}
.route-reference li{border-top:3px solid var(--accent)}
.route-optional li{border-style:dashed}
.reinforcement-branch{border:1px dashed var(--line-strong);border-left:4px solid var(--accent);padding:24px 28px;margin:24px 0}
.reinforcement-branch h3{margin:8px 0 12px}
.reinforcement-branch p{margin:0;color:var(--ink-2)}
.concept-sources{font-size:.9rem;color:var(--ink-2)}
@media(max-width:760px){
  .control-flow{grid-template-columns:1fr}
  .control-flow>li{border-right:0;border-bottom:1px solid var(--line);padding:22px 24px}
  .control-flow>li:not(:last-child)::after{content:"↓";top:auto;bottom:-18px;right:calc(50% - 14px)}
  .route ol{flex-direction:column;gap:26px}
  .route li:not(:last-child)::after{content:"↓";left:calc(50% - 10px);top:calc(100% + 1px)}
  .route li{justify-content:center;text-align:center;padding:14px}
  .concept-bar,.concept-figure figcaption{padding:16px 20px}
  .routing-diagram{padding:6px 20px 20px}
  .reinforcement-branch{padding:22px}
}