.energy-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.energy-nav a { padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--accent); font-weight: 700; text-decoration: none; }
.learning-step { margin: 24px 0; }
.learning-step h2 { margin: 0 0 12px; padding-left: 42px; font-size: 1.5rem; }
.formula-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.formula-pair > div { padding: 16px; border-radius: 13px; background: #edf3fa; text-align: center; overflow-x: auto; }
.formula-pair strong { display: block; }
.energy-lab, .drive-lab { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #f8fbfe; }
#pendulum-model { display: block; width: 100%; height: auto; background: white; border-radius: 10px; }
.energy-lab > label, .drive-controls > label { display: block; margin: 16px 0 7px; font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.energy-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 18px; }
.energy-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; }
.bar-track { grid-column: 1 / -1; height: 23px; overflow: hidden; border: 1px solid #9caeba; border-radius: 7px; background: white; }
.bar-track span { display: block; height: 100%; transition: width .12s linear; }
#bar-pot { background: #779bbb; }
#bar-kin { background: #bc7a4d; }
.lab-readout { margin: 14px 0 0; padding: 13px 15px; border-radius: 10px; background: #edf3fa; line-height: 1.6; }
.damping-choice, .case-buttons, .drive-controls > div { display: flex; flex-wrap: wrap; gap: 9px; margin: 17px 0; }
.damping-choice button, .case-buttons button, .drive-controls button { padding: 10px 13px; border: 1px solid var(--accent); border-radius: 9px; background: white; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.damping-choice button[aria-pressed="true"], .case-buttons button[aria-pressed="true"], .drive-controls button:not(.secondary) { background: var(--accent); color: white; }
.lesson-plot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }
.drive-controls output { display: block; margin-top: 7px; color: var(--muted); }
.sketch--transparent { background: white; }
.equation-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.equation-map p { margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfe; }
.equation-map strong, .equation-map span { display: block; }
.equation-map span { margin-top: 5px; }
.expert { border-color: #b9cce0; background: #fbfdff; }
.expert-formula { font-size: clamp(1rem, 3vw, 1.25rem); }
.learning-step details { margin-top: 18px; padding: 16px 18px; border: 1px solid #b8cadb; border-radius: 12px; background: #f8fbfe; }
.learning-step summary { cursor: pointer; font-weight: 700; }
@media (max-width: 640px) { .formula-pair, .energy-bars, .equation-map { grid-template-columns: 1fr; } .energy-lab, .drive-lab { padding: 12px; } }