/* Shared lesson shell. Model geometry and its explanatory colours stay intact. */
:root{color-scheme:light;--bg:#f7f7ef;--panel:#fffefa;--panel2:#e4eddf;--ink:#193c3b;--muted:#59706b;--accent:#174c45;--accent2:#ac6b20;--line:#d9e1d6}
.lesson-page{height:auto;background:var(--bg)}.lesson-page button{border-radius:5px;font-size:13px}.lesson-page button:hover{background:#e4eddf}.lesson-page .header-inner{max-width:1440px}.lesson-page .brand{margin-right:0}.lesson-page .eyebrow{color:var(--green)}
#app{max-width:1440px;min-height:0;padding:24px 36px 40px;gap:22px}#app .breadcrumbs{margin:0}.lesson-heading{display:flex;justify-content:space-between;gap:30px;align-items:center}.lesson-heading h1{font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-1px;margin:0 0 8px}.lesson-heading .eyebrow{margin:0 0 10px}.objective{margin:0;line-height:1.6;color:var(--muted);font-size:14px}.lesson-tools{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.lesson-tools>label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}.lesson-tools select{background:#fffefa;border:1px solid var(--line);padding:9px;border-radius:5px;font-size:13px}.tool-row{display:flex;gap:6px}.tool-row button{min-height:32px;padding:5px 10px;font-size:11px}.tool-row button[aria-pressed=true]{background:var(--green);color:white}
.lesson-stages{border-top:1px solid var(--line);padding-top:15px}.stage-heading{display:flex;justify-content:space-between;margin-bottom:10px;font-size:11px;font-weight:700;color:var(--muted)}.stage-hint{font-weight:400}#stage-list{display:flex;flex-direction:row;gap:7px;flex-wrap:wrap}#stage-list li{flex:1;min-width:125px}#stage-list button{padding:9px 10px;min-height:48px;border:1px solid var(--line);background:#fffefa;font-size:11px;height:100%;gap:7px}#stage-list .d{display:none}#stage-list button .n{background:#edf0e5;color:var(--green)}#stage-list button[aria-current=step]{background:var(--green);color:white}#stage-list button[aria-current=step] .n{background:#dbeedc;color:#174c45}#stage-list button.done .n{background:#dbeedc;color:var(--green)}
.layout{grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start;flex:none}.stagewrap{background:#fffefa;border-radius:7px}#viewport{min-height:380px;max-height:none;aspect-ratio:16/10;flex:none}.panel{border-radius:7px;padding:18px;gap:18px;max-height:none;overflow:visible}.learning-tabs{display:flex;border-bottom:1px solid var(--line);gap:2px;padding-bottom:10px}.learning-tabs button{flex:1;border:0;font-size:12px;padding:8px 4px;color:var(--muted)}.learning-tabs button[aria-pressed=true]{background:#e4eddf;color:var(--green)}.stage-card{border:0;padding:0}.stage-card h2{font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.18;margin:10px 0 16px}.stage-card .body{color:var(--ink);font-size:14px;line-height:1.75}.key{background:#edf2e7;padding:12px 14px;border-radius:0 5px 5px 0;margin:16px 0}.key p{font-size:13px;line-height:1.65}.chips button{font-size:11px;color:var(--green);border-color:var(--line)}.tag{background:#f4ead0;color:#765016;border-color:#e5d7b4;border-radius:3px}.transport{background:#fffefa;padding:12px;gap:7px}.transport .primary{background:var(--green);color:white;width:44px;height:44px}.transport .primary:hover{background:#2b6758}.transport>button{width:36px;height:36px}.tl{min-width:180px}#tl-segs div{background:#dce5d9}#tl-segs div.on{outline:1px solid var(--green)}#tl-head{background:var(--green);box-shadow:0 0 0 2px #fffefa}.tl-meta{font-size:10px}.opts{width:100%;justify-content:space-between;font-size:11px}.opts select{background:white;border-radius:4px}.opts .pe{display:flex}.think{background:#f0f3e8;border:0;border-radius:5px;padding:18px}.think h5{color:var(--green)}.think p{font-size:15px;line-height:1.7}.think .ans{color:var(--ink)}.think button{background:var(--green);color:white}.think button:hover{background:#2b6758}details.more{margin:0}details.more ol{color:var(--ink);line-height:1.8;padding-left:20px}#explain-panel{border:0;padding:0}#explain-panel summary{font-family:Georgia,serif;font-size:25px;font-weight:400}.teacher-notes{font-size:11px}.next{border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0 0;font-size:12px}.next:hover{background:transparent;text-decoration:underline}.lesson-quiz{font-size:12px;font-weight:700;color:var(--green);line-height:1.6}.glossary{border-top:1px solid var(--line);padding-top:17px;font-size:13px}.glossary summary{cursor:pointer;font-weight:650}.glossary dl{display:grid;grid-template-columns:150px 1fr;gap:12px 20px;line-height:1.7;max-width:880px}.glossary dt{font-weight:700}.glossary dd{margin:0;color:var(--muted)}.model-note{font-size:11px;color:var(--muted);margin:0}
/* Overlay contrast remains independent from the light page palette. */
#viewport{--ink:#f3f6ef;--muted:#c3d4d3;--accent:#9cddc1;--accent2:#f9cb5a;color:#f3f6ef}#viewctl button:hover{background:#174c45}#viewctl button[aria-pressed=true]{background:#c9e8d2;color:#174c45}#viewctl button{border-radius:6px}#card .eyebrow{color:#9cddc1}#card button:hover{background:#174c45}#card{border-radius:7px}#help kbd{background:#edf2e7}#help .box{border-radius:7px}#help{color:var(--ink)}
#reading-view{max-width:960px;margin:auto;width:100%}#reading-view>img{width:100%;max-height:330px;object-fit:cover;border-radius:7px}#reading-view article{padding:24px 0;border-bottom:1px solid var(--line);line-height:1.8}#reading-view h2{font:400 27px Georgia,serif}#reading-view article p{font-size:15px}#reading-view summary{cursor:pointer;font-weight:650}.presentation .lesson-heading,.presentation>.breadcrumbs,.presentation .lesson-stages{display:none}.presentation .stage-card .body{font-size:19px}.presentation .stage-card h2{font-size:32px}.presentation .layout{grid-template-columns:minmax(0,1fr) 400px}.presentation #viewport{min-height:480px}.exit-present{align-self:flex-end;background:var(--green);color:white}
@media(max-width:1050px){.layout{grid-template-columns:minmax(0,1fr) 300px;gap:15px}#app{padding:22px}.panel{padding:15px}#viewport{min-height:360px}.lesson-heading h1{font-size:36px}#stage-list li{min-width:120px}.presentation .layout{grid-template-columns:1fr}.presentation .stage-card .body{font-size:17px}}
@media(max-width:760px){.lesson-heading{align-items:start;flex-direction:column;gap:18px}.lesson-tools{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center}.lesson-tools>label{grid-column:1/-1}.tool-row{justify-content:flex-end}.layout{grid-template-columns:1fr}#app{padding:20px;gap:20px}#stage-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px}#stage-list li{flex:0 0 140px}.stage-hint{display:none}#viewport{min-height:330px;aspect-ratio:1.15}.lesson-heading h1{font-size:37px}.lesson-tools select{min-width:0;width:100%;font-size:11px}.tool-row button{padding:5px 7px;font-size:10px}.panel{max-height:none}.glossary dl{grid-template-columns:1fr;gap:5px}.glossary dd{margin-bottom:14px}.tl{min-width:150px}.presentation #viewport{min-height:350px}.opts .pe{display:flex}#app:fullscreen .panel{max-height:none}}
@media(prefers-reduced-motion:reduce){.hs .dot{animation:none}}
/* Keep playback close to the model on classroom laptop screens. */
@media(min-width:761px){#viewport{max-height:min(540px,calc(100vh - 490px))}.presentation #viewport{max-height:calc(100vh - 150px)}}