.oscillation-graph{margin-top:18px;padding:24px}.oscillation-graph>svg{width:100%;display:block;margin-top:15px;max-height:270px}.oscillation-graph>p{font-size:10px;color:#93a6c0;margin-top:9px}.graph-switch{display:flex;gap:4px}.graph-switch button{background:transparent;color:#94a9c5;font-size:11px;padding:6px 10px;border:1px solid #2b3c52;border-radius:5px}.graph-switch button.active{background:#203149;color:#c7dcfb}.energy-track{display:flex;height:11px;border-radius:5px;overflow:hidden;background:#0c121c;border:1px solid #33445c;margin-top:18px}.energy-track>span{display:block;transition:width .05s linear}.energy-kinetic{background:#7daaff}.energy-potential{background:#e5b572}.energy-key{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#a5b8d2;margin-top:8px}.energy-key i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.energy-key .energy-kinetic,.energy-key .energy-potential{display:inline-block}.oscillation-switch{display:flex;gap:7px;margin-bottom:20px}.oscillation-switch a{font-size:11px;color:#93a9c8;text-decoration:none;border:1px solid #2a3b53;border-radius:5px;padding:6px 10px}.oscillation-switch a.active{color:#e5c591;border-color:#6f593a;background:#211e19}.pendulum-body{cursor:grab;touch-action:none}.pendulum-body:active{cursor:grabbing}.pendulum-body:focus{outline:none}.pendulum-body:focus circle,.pendulum-body:focus rect{stroke:#e5b572;stroke-width:3}.oscillation-workspace .simulation-notice{min-height:42px}.oscillation-workspace .diagram-wrap svg{max-height:430px}.oscillation-workspace .diagram-caption{font-size:9px}.os-label{font:12px var(--font);fill:#e7ecf4}.os-small{font:10px var(--font);fill:#bac8dc}.os-math{font:italic 17px Georgia,serif;fill:#e7ecf4}.os-amber{fill:#e5b572}.os-blue{fill:#9bc2fb}.os-white{fill:#f0f3fa}.os-muted{fill:#8299b9}.os-chart-text{font:11px var(--font);fill:#a9bcd6}.os-chart-value{font:13px var(--font);fill:#edf3fa}
@media(max-width:620px){.oscillation-graph{padding:18px 14px}.oscillation-graph .panel-heading{gap:8px}.oscillation-graph h2{font-size:14px}.graph-switch button{padding:5px 7px;font-size:9px}.oscillation-graph>p{font-size:9px}.oscillation-workspace .diagram-caption{font-size:7px}.os-small{font-size:12px}.os-label{font-size:14px}.oscillation-switch a{font-size:10px}}

@media(max-width:900px){.oscillation-workspace .oscillation-switch{grid-column:1/-1}}