/* A quiet route through a lesson. Optional settings stay available on demand. */
.lesson-page header.wrap,.revision-page header.wrap{padding-top:18px;padding-bottom:18px}
.lesson-page .breadcrumbs{margin:8px 0 14px;font-size:16px}
.lesson-page .tutor-introduction,.revision-page .tutor-introduction{margin:0 0 20px;padding:14px 18px;gap:16px;align-items:center}
.lesson-page .tutor-introduction__portrait,.revision-page .tutor-introduction__portrait{width:56px;flex:0 0 56px}
.lesson-page .tutor-introduction__portrait img,.revision-page .tutor-introduction__portrait img{width:56px;height:64px;object-fit:cover}
.lesson-page .tutor-introduction__portrait figcaption,.revision-page .tutor-introduction__portrait figcaption{font-size:11px;line-height:1.3;margin-top:3px}
.lesson-page .tutor-introduction__copy,.revision-page .tutor-introduction__copy{display:block}
.lesson-page .tutor-introduction__heading h2,.revision-page .tutor-introduction__heading h2{font-size:21px;margin:0}
.lesson-page .tutor-introduction__heading p,.revision-page .tutor-introduction__heading p{font-size:16px;margin:2px 0}
.lesson-page .tutor-introduction__subjects,.revision-page .tutor-introduction__subjects{display:none}
.lesson-page .tutor-introduction__link,.revision-page .tutor-introduction__link{font-size:16px;padding:8px 0}
.explorer-heading{padding:24px 32px 12px}
.explorer-heading h1{font-size:clamp(28px,3.5vw,42px);line-height:1.18;margin:8px 0 12px}
.explorer-heading #tool-intro{font-size:20px;max-width:65ch;margin-bottom:8px}
.lesson-options{padding:12px 32px 18px;background:#f8f5ff;border-bottom:1px solid #ded6ed}
.lesson-options>summary{display:inline-flex;align-items:center;gap:28px;cursor:pointer;color:#514297;font-weight:700;list-style:none;text-decoration:underline;text-underline-offset:4px}
.lesson-options .learning-mode{padding:16px 0;border:0}
.lesson-options .view-choice,.lesson-options .reading-controls{margin:12px 0;padding:0;flex-wrap:wrap}
.lesson-options .view-help{flex-basis:100%;font-size:17px}
.lesson-options>p{font-size:18px;max-width:65ch}
.guided-navigation{padding:14px 32px;background:#eff4df;display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap}
#guided-position{font-size:18px;font-weight:700;margin:0;flex:1 1 auto}
#guided-goal{display:none}
.guided-navigation details>summary{cursor:pointer;color:#514297;text-decoration:underline;text-underline-offset:4px;font-size:17px}
.guided-navigation details[open]{flex-basis:100%}
.guided-navigation ol{margin:12px 0 0}
#resume-stage{font-size:17px}
body.guided-mode .foundation .lesson-goal{display:block}
#activity-stage{display:none}
.foundation{padding:22px 32px}
.concept-lines{max-width:68ch}
.foundation #guided-warmups{margin-top:20px}
.practice{display:block;padding:28px 32px}
.practice-main,.practice-help{max-width:920px}
.practice h3{margin-top:0;margin-bottom:12px}
.practice .mini-heading{margin-bottom:12px}
#question-level{display:block;background:none;border:none;padding:0;margin:8px 0 16px;font-size:17px;font-weight:400;color:#5e526e}
#about-practice{margin:0 0 18px;font-size:17px}
#about-practice summary{cursor:pointer;color:#514297;text-decoration:underline;text-underline-offset:4px}
#about-practice .practice-note{font-size:17px;margin:12px 0}
#question-counter{margin:8px 0}
#question{font-size:24px;line-height:1.5;margin:14px 0 20px;max-width:60ch}
#answer-note{font-size:17px;line-height:1.6;max-width:65ch}
.practice-help{margin-top:22px;padding:20px;background:#fffefb;border:1px solid #ddd3eb;border-radius:16px}
.practice-help h3{font-size:21px;margin:0 0 16px}
.practice-help>.caption{font-size:16px;margin:12px 0}
.practice-help #question-guide{margin-top:16px}
.practice-help #worked{margin-top:16px}
.practice-help #worked>summary{color:#514297;background:#f4effb;padding:16px;border-radius:10px;border:1px solid #d6c7eb;cursor:pointer}
.help-question{font-size:19px;line-height:1.6;border-left:4px solid #8b72b7;padding:10px 14px;background:#f8f5ff;margin:18px 0}
.practice-change{border-left:4px solid #8b72b7;padding:12px 16px;background:#f4effb;margin:14px 0}
.practice-change p{font-size:18px;margin:0 0 12px}
.more-example-controls{padding:12px 0}
.more-example-controls>summary,.model-notes>summary,.think-box>summary{cursor:pointer;color:#514297;font-weight:700}
.more-example-controls .control{margin-top:18px}
.model-notes{margin-top:14px}
.model-notes p,.model-notes summary{font-size:17px}
.think-box{margin-top:16px;padding:16px 20px}
.think-box p{font-size:18px;margin-bottom:0}
#reset{margin:8px 0 0;font-size:17px}
.diagram-key{font-size:18px;line-height:1.6;padding:0 10px 0 30px;margin:12px 0}
#visual svg{min-width:0}
#visual{overflow:visible}
.ready-next{padding:28px 32px}
.ready-next h3{margin-top:0}
.ready-next>p{max-width:65ch}
.ready-next details{margin:18px 0;padding:14px 18px;border:1px solid #d8cdea;border-radius:12px;background:#fffefa}
.ready-next summary{color:#514297;font-size:18px;font-weight:700;cursor:pointer}
.ready-next .learning-progress{border:0;margin:0;padding:14px 0;background:transparent}
.ready-next .revision-save{background:#fffefa}
.ready-next .recap-reflection{padding:20px;margin:18px 0}
.ready-next #recap-how{font-size:18px;max-width:65ch}
.ready-next .note-storage{padding:0;border:0;margin:12px 0;background:transparent}
.note-storage summary,.note-storage p{font-size:16px}
.recap-scope{font-size:17px;color:#5e526e}
.recap-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:24px}
.guided-bottom{padding:20px 32px;border-top:1px solid #ddd3eb}
.guided-bottom button{font-size:18px}
.guided-bottom #guided-next:not(.text-button){background:#514297;color:white;border-color:#514297}
.route-navigation{padding:12px 32px;font-size:16px;gap:12px}
.route-navigation a{font-size:16px}
body.guided-mode .tool-bottom{display:none}
.revision-page .intro{padding:20px 0}
.revision-page .intro h1{font-size:36px;margin:10px 0}
.revision-page .intro p{font-size:19px;max-width:65ch}
.revision-page .revision-context>p{font-size:17px}
#change-revision{margin-bottom:18px}
@media(max-width:650px){
 .lesson-page header.wrap,.revision-page header.wrap{padding-top:12px;padding-bottom:10px;gap:12px}
 .lesson-page header .brand small,.revision-page header .brand small{display:none}
 .lesson-page header nav,.revision-page header nav{gap:16px;font-size:15px}
 .lesson-page .breadcrumbs{font-size:14px;margin:6px 0 10px;line-height:1.5}
 .lesson-page .tutor-introduction,.revision-page .tutor-introduction{display:grid;grid-template-columns:48px 1fr;gap:6px 12px;padding:10px 12px;margin-bottom:14px}
 .lesson-page .tutor-introduction__portrait,.revision-page .tutor-introduction__portrait{grid-row:1/3;width:48px}
 .lesson-page .tutor-introduction__portrait img,.revision-page .tutor-introduction__portrait img{width:48px;height:56px}
 .lesson-page .tutor-introduction__portrait figcaption,.revision-page .tutor-introduction__portrait figcaption{font-size:10px}
 .lesson-page .tutor-introduction__copy,.revision-page .tutor-introduction__copy{display:block}
 .lesson-page .tutor-introduction__heading h2,.revision-page .tutor-introduction__heading h2{font-size:18px}
 .lesson-page .tutor-introduction__heading p,.revision-page .tutor-introduction__heading p{font-size:15px}
 .lesson-page .tutor-introduction__link,.revision-page .tutor-introduction__link{grid-column:2;padding:0;font-size:15px;width:auto;justify-self:start}
 .explorer-heading,.foundation,.practice,.ready-next{padding:20px 18px}
 .explorer-heading{padding-bottom:8px}
 .explorer-heading .eyebrow{font-size:14px;letter-spacing:0;text-transform:none;margin:0}
 .explorer-heading h1{font-size:28px}
 .lesson-options{padding:10px 18px}
 .guided-navigation{padding:12px 18px;gap:8px}
 #guided-position{font-size:16px;flex-basis:100%}
 .guided-navigation details>summary{font-size:16px}
 .model-grid{display:flex;flex-direction:column;gap:14px;padding:20px 18px}
 .model-grid .controls-panel,.model-grid .visual-panel,#controls{display:contents}
 .model-grid .mini-heading{display:none}
 .model-grid #example-return{order:0;margin:0}
 .model-grid .example-selector{order:1;margin:0}
 .model-grid #visual{order:2;border-radius:12px;padding:12px 6px;max-width:100%;width:100%;box-sizing:border-box}
 #visual svg{min-width:0!important;width:100%;height:auto}
 .model-grid #result{order:3;margin:0;font-size:21px;padding:14px}
 .model-grid #particle-playback,.model-grid #sketch-playback{order:4;margin:0;padding:12px}
 .model-grid .control{order:5;margin:0}
 .model-grid .control label{font-size:18px;margin-bottom:4px}
 .model-grid .control input[type=range]{min-height:40px;margin:0}
 .model-grid .more-example-controls{order:6;margin:0}
 .model-grid #balance-actions{order:7}
 .model-grid #reset{order:8;align-self:flex-start;margin:0}
 .model-grid .think-box{order:9;margin:0}
 .model-grid .model-notes{order:10;margin:0}
 .diagram-key{font-size:17px}
 #question{font-size:22px;margin-top:10px}
 .practice-help{padding:16px;margin-top:16px}
 .practice-help>button{font-size:17px;margin:0 10px 10px 0}
 .practice-help h3{font-size:20px}
 .answer-row{gap:12px}
 .answer-row button{font-size:18px}
 #answer-note{font-size:16px}
 .practice .question-guide>summary{font-size:18px;padding:16px}
 .practice .question-guide-body{padding:14px}
 .help-question{font-size:18px}
 .guided-bottom{padding:18px;gap:14px;flex-wrap:wrap}
 .guided-bottom button{max-width:100%;font-size:17px}
 .route-navigation{padding:12px 18px}
 .recap-actions{align-items:flex-start;flex-direction:column}
 .ready-next .recap-reflection{padding:16px}
}
.diagram-key--three{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:16px;line-height:1.5;text-align:center}
@media(max-width:650px){
 .lesson-page .breadcrumbs [aria-current=page],.lesson-page .breadcrumbs>span:last-of-type{display:none}
 .lesson-page .breadcrumbs{margin-bottom:8px}
 .lesson-page .tutor-introduction__link,.revision-page .tutor-introduction__link{min-height:32px;padding:3px 8px;text-align:left;line-height:1.4}
 #visual:has(.diagram-key--three){display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center}
 #visual:has(.diagram-key--three) svg{width:130px}
 .diagram-key--three{display:flex;flex-direction:column;text-align:left;font-size:16px;margin:0}
}
@media(max-width:650px){
 .model-grid .control.example-selector{order:1}
 .model-grid #particle-playback,.model-grid #sketch-playback{padding:10px 12px}
 .model-grid .particle-playback p{font-size:16px;line-height:1.5;margin:8px 0}
 .model-grid .particle-playback details{font-size:16px;margin-top:8px}
 .model-grid .particle-playback summary{color:#514297;cursor:pointer}
 .model-grid .particle-playback button{font-size:17px}
 .topic-enquiry{padding:20px 18px}
 .topic-enquiry h2{font-size:22px}
 .topic-enquiry p{font-size:18px;line-height:1.6}
}
@media(max-width:650px){
 .model-grid .control{order:4}
 .model-grid #particle-playback,.model-grid #sketch-playback{order:5}
 .model-grid .control.example-selector{order:1}
}
.topic-uses{max-width:920px;border-left:4px solid #b5c77c;background:#f0f4e4;padding:18px 22px;margin:24px 0 0;border-radius:0 12px 12px 0}
.practice-figure{margin:20px 0 24px;max-width:440px}
.practice-figure svg{display:block;width:100%;height:auto;background:#fffdf8;border-radius:12px;font-family:inherit;font-size:20px}
.practice-figure svg text{font-family:inherit;font-size:20px;font-weight:500}
.practice-figure figcaption{font-size:18px;line-height:1.6;margin-top:12px;color:#514665}
.topic-uses h3{font-size:22px;margin:0 0 12px}
.topic-uses ul{padding-left:22px;margin:0}
.topic-uses li{font-size:18px;line-height:1.65;margin:10px 0}
@media(max-width:650px){.topic-uses{padding:16px;margin-top:20px}.topic-uses h3{font-size:21px}.topic-uses li{font-size:18px}}

/* Keep both layouts and the interactive shortcuts visible outside lesson options. */
.lesson-view{padding:18px 32px 20px;background:#fffefa;border-bottom:1px solid #ded6ed}
.lesson-view h2{font-size:20px;margin:0 0 4px;line-height:1.4}
.lesson-view-intro{font-size:18px;line-height:1.5;margin:0 0 14px;max-width:65ch}
.lesson-view .view-choice{display:flex;gap:12px;margin:0 0 16px;align-items:stretch}
.lesson-view .view-choice button{flex:0 1 265px;text-align:left;padding:12px 18px;min-height:76px;border-width:2px}
.lesson-view .view-choice strong{display:block;font-size:19px;line-height:1.4}
.lesson-view .view-choice button span{display:block;font-size:16px;line-height:1.5;margin-top:2px}
.lesson-shortcuts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;font-size:17px;line-height:1.6}
.lesson-shortcuts a{color:#514297;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.lesson-shortcuts>span{font-weight:700}
#interactive-example,#practice-questions,.lesson-view{scroll-margin-top:16px}
@media(max-width:650px){
 .lesson-view{padding:16px 18px}
 .lesson-view-intro{font-size:17px}
 .lesson-view .view-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
 .lesson-view .view-choice button{min-width:0;min-height:90px;padding:10px}
 .lesson-view .view-choice strong{font-size:17px}
 .lesson-view .view-choice button span{font-size:15px}
 .lesson-shortcuts{gap:0 18px;font-size:16px}
 .lesson-shortcuts>span{flex-basis:100%;margin-top:4px}
}

/* A direct way back, beside the current guided-stage heading. */
.guided-stage-heading{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
#guided-back{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:0;font-size:26px;line-height:1;background:#fffefa;color:#514297;border:1px solid #a793c7;border-radius:9px}
#guided-back:hover{background:#e9e1f8}
@media(max-width:650px){.guided-stage-heading{flex-basis:100%;gap:10px}.guided-stage-heading #guided-position{flex:1;min-width:0}}

/* Each guided stage carries the context needed to read it on its own. */
.guided-orientation{display:none;max-width:68ch;color:#514665;font-size:18px;line-height:1.6;margin:12px 0 24px}
body.guided-mode .guided-orientation{display:block}
.idea-layout{min-width:0}
.idea-layout.has-primer{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.8fr);gap:28px;align-items:start}
.idea-primer{margin:0;padding:20px;background:#fffefa;border:1px solid #d6cae9;border-radius:14px;font-size:18px;line-height:1.6;min-width:0}
.idea-primer figcaption{font-weight:700;color:#514297;margin-bottom:14px}
.idea-primer p{font-size:18px;line-height:1.6;margin:14px 0 0}
.primer-row{margin-bottom:14px}
.primer-row>strong{display:block;margin-bottom:8px}
.primer-bar{display:grid;grid-template-columns:repeat(var(--pieces),1fr);gap:3px;height:34px}
.primer-bar i,.primer-hundred i,.primer-area i{display:block;background:#ede7f5;border-radius:2px}
.primer-bar .filled,.primer-hundred .filled,.primer-area .base{background:#a28bc5}
.primer-hundred{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:160px;height:160px;margin-bottom:14px}
.primer-area{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,50px);gap:3px;margin:14px 0}
.primer-area .product{background:#514297}
.worked-example-context{display:none;margin:0;min-width:0}
body.guided-mode .worked-example-context{display:block}
body.guided-mode .explanation-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
body.guided-mode .explanation-grid>.mistake{grid-column:1/-1;max-width:74ch}
.worked-explanation{min-width:0}
.worked-example-context figcaption{font-size:20px;font-weight:700;margin:0 0 18px;color:#514297}
.worked-example-context svg{min-width:0}
.worked-example-context .result{font-size:22px;overflow-wrap:anywhere}
.worked-example-context .caption{font-size:17px;line-height:1.6}
@media(max-width:1000px){
 .idea-layout.has-primer,body.guided-mode .explanation-grid{grid-template-columns:minmax(0,1fr)}
 .idea-primer{max-width:450px}
}