.sg-source { font-size: .875rem !important; }
.sg-demo-heading { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sg-demo-heading .eyebrow { font-size: .75rem; }
.sg-view-label { font-size: .8125rem; color: var(--muted); }
.sg-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sg-controls[hidden] { display: none; }
.sg-controls button { flex: 1 1 130px; min-height: 48px; border: 1px solid #8a8a84; border-radius: 4px; background: #fff; color: #353535; font: inherit; font-size: .875rem; line-height: 1.5; font-weight: 650; padding: 10px 12px; cursor: pointer; }
.sg-controls button[aria-pressed="true"] { background: #353535; color: white; border-color: #353535; box-shadow: inset 0 -3px #f27200; }
.sg-controls button:focus-visible { outline: 3px solid #a54b09; outline-offset: 3px; }
.sg-demo svg { max-width: 520px; }
.sg-wedge { transition: transform 400ms ease; }
.sg-pull, .sg-reaction { opacity: 0; transition: opacity 200ms ease; }
.sg-demo[data-step="1"] .sg-wedge { transform: translate(-18px, -39px); }
.sg-demo[data-step="2"] .sg-wedge { transform: translate(-38px, -83px); }
.sg-demo[data-step="1"] .sg-pull, .sg-demo[data-step="2"] .sg-reaction { opacity: 1; }
.sg-demo:not([data-step="0"]) .sg-clearance { opacity: 0; }
.sg-stage { border-left: 3px solid #b64a00; padding: 16px 18px; background: #fff; min-height: 142px; }
.sg-stage strong { font-size: 1rem; }
.sg-stage p { font-size: .9375rem; line-height: 1.7; margin: 10px 0 0; }
.lesson-references li { scroll-margin-top: 30px; }
@media (max-width:600px) { .sg-controls { gap: 6px; } .sg-controls button { flex-basis: 100%; } .sg-stage { min-height: 0; padding: 14px; } }
@media (prefers-reduced-motion:reduce) { .sg-wedge, .sg-pull, .sg-reaction { transition: none; } }