.pendulum-page { --accent: var(--teal); --accent-rgb: var(--teal-rgb); }
#scene-drawing { stroke-linecap: round; stroke-linejoin: round; }
.scene-rail { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.scene-guide { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 7; fill: none; }
.scene-cart { stroke: var(--ink); stroke-width: 2.5; fill: var(--surface-muted); }
.scene-joint { stroke: var(--ink); stroke-width: 2; fill: var(--surface); }
.scene-pole { stroke: var(--accent); stroke-width: 7; }
.scene-bob { stroke: var(--accent); stroke-width: 2.5; fill: var(--surface); }
.scene-force { stroke: var(--orange); stroke-width: 2.5; fill: none; }
.scene-angle { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.scene-label { font: 17px var(--font-sans); fill: var(--muted); }
.scene-variable { font: italic 21px Georgia, serif; fill: var(--muted); }

.plot-axis { stroke: var(--line); fill: none; }.plot-zero { stroke: var(--line-strong); stroke-dasharray: 4 5; }.plot-line { stroke: var(--accent); fill: none; stroke-width: 2; }
.plot-label { fill: var(--muted); font: 12px var(--font-sans); }

.pendulum-inputs { margin-top: 14px; }
.pendulum-push { display: flex; gap: 4px; }
.plots { margin-top: 22px; display: grid; gap: 18px; }
.plots h3 { font-size: 12px; font-weight: 500; color: var(--muted); }
.plots svg { display: block; width: 100%; height: auto; }