.graphs-lesson .lesson-heading{margin-bottom:22px}.graphs-lesson .worked-example{padding-top:22px}.learn-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:19px;flex-wrap:wrap}.learn-toolbar h2{margin:0}.learn-toolbar p{margin:0;color:#52677a;font-size:15px}.graph-svg{width:100%;height:auto;display:block;overflow:visible}.graphs-lesson .worked-grid,.graphs-lesson .question-grid{gap:24px;align-items:start}.graph-copy p{margin:0 0 15px}.graph-copy ol{margin:0;padding-left:24px;display:grid;gap:13px}.graph-copy li{padding-left:4px}.graph-copy strong{color:#13263e}.graph-example-answer{background:#edf4fa;padding:13px 15px;border-left:3px solid #1768ac;border-radius:0 8px 8px 0;margin-top:18px}.graph-example-answer p:last-child{margin-bottom:0}.learn-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e0e7ee;margin-top:20px;padding-top:16px}.graph-question-title{margin:4px 0 10px!important}.graph-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0}.skills-main .graph-option{display:flex;align-items:center;gap:10px;min-height:58px;padding:11px;text-align:left;font-size:17px;font-weight:650;min-width:0;overflow-wrap:anywhere}.option-letter{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid #a8b9c9;border-radius:4px;font-size:14px}.graph-option.correct,.graph-option.correct:hover{background:#edf8f0;border-color:#36825a;color:#185732}.graph-option.incorrect,.graph-option.incorrect:hover{background:#fff3ec;border-color:#b66448;color:#82361e}.graphs-lesson .graph-option:disabled{opacity:1}.graph-question .help-actions{margin-top:12px}.graph-question .feedback{margin-top:12px}.graph-question .question-prompt{font-size:18px;line-height:1.5;margin:0}.graph-question figcaption{font-size:14px}.lesson-links{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:16px;font-weight:650;margin:14px 0 30px}.graphs-lesson .question-picker{gap:6px;padding-bottom:16px;margin-bottom:18px}.graphs-lesson .question-picker button{width:38px}.graph-guide{display:none}.graph-question.show-guides .graph-guide{display:block}#large-diagram .graph-svg{min-width:650px;max-height:none}.graph-data-note{font-size:14px;color:#52677a;margin:12px 0 0}.graphs-lesson .jump-link{display:inline-block;min-height:44px;padding:7px 0}.graphs-lesson h1{font-size:clamp(28px,4.2vw,40px)}
@media(max-width:700px){.graphs-lesson .worked-grid,.graphs-lesson .question-grid{gap:13px}.graphs-lesson .worked-example,.graphs-lesson .practice{padding:19px 14px}.graphs-lesson .lesson-heading h1{margin-bottom:8px}.graphs-lesson .question-grid .diagram{max-width:440px}.learn-toolbar{margin-bottom:13px}.graph-copy ol{gap:10px}.graph-copy p{margin-bottom:10px}.graph-options{gap:7px;margin:12px 0}.skills-main .graph-option{font-size:17px;padding:10px 9px;gap:8px;min-height:54px}.graphs-lesson .graph-question-title{font-size:20px}.graphs-lesson .question-picker{gap:5px}.graphs-lesson .question-picker button{width:37px}.graphs-lesson .practice-header p{font-size:14px}.graphs-lesson .question-prompt{font-size:17px}.learn-navigation{margin-top:16px}.graphs-lesson .worked-example h3{font-size:23px}.graph-example-answer{margin-top:13px}.graphs-lesson .diagram .enlarge{margin-top:0}}
@media(max-width:360px){.skills-main .graph-option{gap:6px;padding:10px 8px}.option-letter{width:23px;height:25px}.graphs-lesson .question-picker button{width:35px}.graphs-lesson .question-picker{gap:5px}}
@media print{.learn-toolbar,.learn-navigation,.graph-options,.lesson-links{display:none!important}.teach-step[hidden]{display:block!important}.teach-step{break-inside:avoid;margin:18px 0}.graph-svg{max-height:270px}.graph-question .question-controls{padding-top:0}.graph-question[hidden]{display:block!important}.graph-question{break-inside:avoid}.graph-question.show-guides .graph-guide{display:none}}
/* Optional text keeps the plotted route at the centre of each example. */
.graph-explanation{margin-top:18px}
.graphs-lesson .worked-prompt{font-size:21px;font-weight:650;line-height:1.45}
.graphs-lesson .animation-control{display:block;margin:12px auto 0;font-size:14px}
.animated-route .route-leg{stroke-dasharray:100;stroke-dashoffset:0}
.animated-route .route-first{animation:draw-up 7s linear infinite}
.animated-route .route-second{animation:draw-across 7s linear infinite}
.animated-route .route-point{animation:reach-point 7s linear infinite}
.is-paused .animated-route *{animation-play-state:paused}
@keyframes draw-up{0%,10%{stroke-dashoffset:100}40%,100%{stroke-dashoffset:0}}
@keyframes draw-across{0%,45%{stroke-dashoffset:100}75%,100%{stroke-dashoffset:0}}
@keyframes reach-point{0%,39%{opacity:0}40%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.animated-route .route-leg,.animated-route .route-point{animation:none}.graphs-lesson .animation-control{display:none}}
@media print{.animated-route .route-leg,.animated-route .route-point{animation:none}.animation-control,[data-explanation]{display:none!important}}