.og-heading { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:20px; }
.og-heading .eyebrow { font-size:.75rem; }
.og-heading > span:last-child { font-size:.8125rem; color:var(--muted); }
.og-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
.og-controls[hidden] { display:none; }
.og-controls button { min-height:48px; padding:12px; border:1px solid #8a8a84; border-radius:4px; background:white; color:#353535; font:inherit; font-size:.875rem; line-height:1.5; font-weight:650; cursor:pointer; text-align:left; }
.og-controls button:hover { border-color:#a54b09; }
.og-controls button[aria-pressed="true"] { background:#353535; color:#fff; border-color:#353535; box-shadow:inset 0 -3px #f27200; }
.og-controls button:focus-visible { outline:3px solid #a54b09; outline-offset:3px; }
.og-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.og-panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.og-panel h3 { font-size:1rem; margin:0; padding:14px 16px; border-bottom:1px solid var(--line); }
.og-panel svg { max-width:360px; margin:10px auto 0; }
.og-weight, .og-contact, .og-car, .og-linkage, .og-anchor, .og-shoe, .og-jaw-left, .og-jaw-right, .og-spokes, .og-small-wheel { transition:transform 450ms ease; }
.og-weight-left { transform-origin:120px 175px; }
.og-weight-right { transform-origin:200px 125px; }
.og-contact { transform-origin:42px 277px; }
.og-spokes { transform-origin:160px 150px; }
.og-small-wheel { transform-origin:70px 70px; }
.og-demo:not([data-step="0"]) .og-weight-left { transform:rotate(-25deg); }
.og-demo:not([data-step="0"]) .og-weight-right { transform:rotate(-25deg); }
.og-demo:not([data-step="0"]) .og-contact { transform:rotate(-34deg); stroke:#a54b09; }
.og-demo[data-step="1"] .og-spokes { transform:rotate(30deg); }
.og-demo[data-step="1"] .og-small-wheel { transform:rotate(30deg); }
.og-demo[data-step="2"] .og-spokes, .og-demo[data-step="3"] .og-spokes { transform:rotate(60deg); }
.og-demo[data-step="2"] .og-small-wheel, .og-demo[data-step="3"] .og-small-wheel { transform:rotate(60deg); }
.og-demo[data-step="1"] .og-car, .og-demo[data-step="1"] .og-linkage, .og-demo[data-step="1"] .og-anchor, .og-demo[data-step="1"] .og-shoe { transform:translateY(10px); }
.og-demo[data-step="2"] .og-car, .og-demo[data-step="2"] .og-linkage, .og-demo[data-step="2"] .og-anchor, .og-demo[data-step="2"] .og-shoe { transform:translateY(20px); }
.og-demo[data-step="3"] .og-car { transform:translateY(40px); }
.og-demo[data-step="3"] .og-linkage, .og-demo[data-step="3"] .og-anchor { transform:translateY(20px); }
.og-demo[data-step="3"] .og-shoe { transform:translate(7px,20px); }
.og-demo[data-step="2"] .og-jaw-left, .og-demo[data-step="3"] .og-jaw-left { transform:translateX(9px); }
.og-demo[data-step="2"] .og-jaw-right, .og-demo[data-step="3"] .og-jaw-right { transform:translateX(-9px); }
.og-grip, .og-rope-hold, .og-pull, .og-reaction { opacity:0; transition:opacity 250ms ease; }
.og-demo[data-step="2"] .og-grip, .og-demo[data-step="3"] .og-grip, .og-demo[data-step="2"] .og-rope-hold, .og-demo[data-step="3"] .og-rope-hold, .og-demo[data-step="3"] .og-pull, .og-demo[data-step="3"] .og-reaction { opacity:1; }
.og-demo[data-step="3"] .og-car-arrow { opacity:0; }
.og-stage { border-left:3px solid #a54b09; background:#fff; padding:18px 20px; min-height:170px; }
.og-stage strong { font-size:1rem; }
.og-stage p { margin:8px 0 0; font-size:.9375rem; line-height:1.75; }
.og-signals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:16px 0; border-bottom:1px solid var(--line); gap:12px; }
.og-signals dt { font-size:.75rem; color:#60605c; line-height:1.5; }
.og-signals dd { margin:5px 0 0; font-size:.875rem; line-height:1.5; font-weight:700; color:#353535; }
.lesson-references li { scroll-margin-top:30px; }
@media(max-width:600px) {
 .og-panels { grid-template-columns:1fr; }
 .og-panel svg { max-width:320px; }
 .og-signals { grid-template-columns:1fr; gap:10px; }
 .og-signals > div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
 .og-signals dd { text-align:right; }
 .og-stage { min-height:0; padding:14px; }
 .og-controls { gap:6px; position:sticky; top:8px; z-index:2; padding:8px 0; background:var(--surface); }
 .og-controls button { padding:10px; font-size:.8125rem; }
}
@media(prefers-reduced-motion:reduce) { .og-demo * { transition:none !important; } }