:root{color-scheme:light;--ink:#233631;--muted:#64736e;--paper:#f5f4ee;--card:#fffefa;--teal:#196b64;--line:#dce2d9;--blue:#356ec0;--pink:#bf536c;--gold:#e2aa35;--focus:#005cbd;font-family:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{touch-action:manipulation}.lab{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:22px 0 12px}.app-header{display:flex;align-items:center;gap:13px;margin-bottom:21px}.brand-mark{background:var(--teal);width:44px;height:44px;position:relative;border-radius:13px;color:#fff;font-size:27px;font-weight:500;padding:0 7px}.brand-mark span{font-size:25px;position:absolute;right:6px;bottom:0}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:800;margin:0 0 6px;color:var(--muted)}h1{font-size:24px;margin:0;line-height:1.1;letter-spacing:-.5px}.notebook-button{margin-left:auto;display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);padding:10px 13px;border-radius:10px;color:var(--ink);font-size:12px;font-weight:650}.notebook-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.6}.notebook-button:hover{background:white}.scene-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.scene-nav button{display:flex;align-items:center;gap:10px;min-height:45px;padding:8px 12px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;color:var(--muted);font-size:12px;font-weight:650}.scene-nav button:hover{background:#eaf0e7}.scene-nav button[aria-current="step"]{background:#e3eee6;border-color:#c5d8cb;color:#195c48}.step-number{width:25px;height:25px;display:grid;place-items:center;border:1px solid #cad4c8;border-radius:50%;flex:none;font-size:11px}.scene-nav button[aria-current="step"] .step-number{background:var(--teal);color:white;border-color:var(--teal)}.step-check{margin-left:auto;color:var(--teal)}.activity{background:var(--card);border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 4px 20px #33412b05}.scene-heading{padding:21px 27px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0}.duration{font-size:11px;color:var(--muted);white-space:nowrap;border:1px solid var(--line);padding:5px 9px;border-radius:20px}.animation-stage{position:relative;padding:3px 20px 0;background-image:radial-gradient(#d6ddd150 .75px,transparent .75px);background-size:18px 18px;background-position:0 12px}#stage{display:block;width:100%;height:clamp(230px,34vh,330px);overflow:visible}#stage text{font-family:Inter,"Segoe UI",Arial,sans-serif}.legend{display:flex;align-items:center;gap:6px;justify-content:center;font-size:10px;color:var(--muted);height:24px}.electron-dot{width:8px;height:8px;background:var(--gold);border:1px solid #a7720c;border-radius:50%}.legend-note{margin-left:12px;border-left:1px solid var(--line);padding-left:12px}.caption{min-height:51px;display:flex;gap:11px;align-items:center;background:#eef3eb;padding:10px 27px;border-top:1px solid #e4eadf}.caption-marker{width:7px;height:7px;background:var(--teal);border-radius:50%;flex:none}.caption p{font-size:14px;line-height:1.45;margin:0}.playback{display:flex;align-items:center;gap:19px;padding:13px 27px}.playback-buttons{display:flex;gap:5px;flex:none}.button{border:1px solid transparent;border-radius:9px;padding:10px 15px;min-height:40px;font-size:12px;font-weight:700;white-space:nowrap}.button-primary{color:white;background:var(--teal)}.button-primary:hover{background:#115650}.button-quiet{background:transparent;color:var(--muted)}.button-quiet:hover:not(:disabled){background:#f0f2eb}.button-quiet:disabled{opacity:.4}.timeline{height:4px;flex:1;min-width:20px;border-radius:5px;background:#e7e9e0;overflow:hidden}.timeline span{height:100%;width:0;display:block;background:#729b76}.playback-status{font-size:10px;color:var(--muted);min-width:95px;text-align:right}.quick-check{display:flex;gap:22px;align-items:center;margin-top:14px;background:#fffefa;border:1px solid var(--line);border-radius:14px;padding:18px 23px}.check-content{flex:1;min-width:0}.quick-check .eyebrow{font-size:9px;margin-bottom:5px}h3{font-size:15px;font-weight:650;margin:0 0 10px;line-height:1.4}.choices{display:flex;gap:7px;flex-wrap:wrap}.choice{padding:9px 13px;border:1px solid #d7ded5;border-radius:8px;background:white;color:var(--ink);font-size:12px;line-height:1.3;text-align:left;min-height:35px;transition:background .15s}.choice:hover:not(:disabled){background:#eff5ee;border-color:#8aad91}.choice[aria-pressed="true"]{border-color:#59885c;background:#e5f0e3;color:#205828}.choice.incorrect[aria-pressed="true"]{background:#fff2dd;border-color:#c68b2b;color:#795112}.choice:disabled{opacity:.5}.feedback{font-size:11px;color:var(--muted);line-height:1.5;margin:9px 0 0;min-height:17px}.feedback.correct{color:#28643b}.feedback.try-again{color:#8b5918}.button-next{background:var(--ink);color:white;display:flex;gap:15px;align-items:center}.button-next:hover:not(:disabled){background:#14534c}.button-next:disabled{background:#e9ece5;color:#89948b}.page-note{text-align:center;font-size:10px;color:#829084;margin:12px 0 0}dialog{border:1px solid var(--line);border-radius:19px;padding:35px;width:min(570px,calc(100% - 30px));color:var(--ink);background:var(--card);box-shadow:0 20px 70px #152e3240}dialog::backdrop{background:#15343070;backdrop-filter:blur(3px)}.close-dialog{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:28px;color:var(--muted);width:36px;height:36px}.notebook-prompts{padding-left:22px;line-height:1.8;font-size:15px}.notebook-prompts li{padding:8px 0 16px}.writing-line{display:inline-block;border-bottom:1px solid #95a89a;min-width:100%;height:17px}#notebook-intro{font-size:14px;line-height:1.6;color:var(--muted)}noscript{display:block;margin:25px auto;padding:20px;width:min(600px,90%);background:#fff3cf;border:1px solid #dca742}
.mobile-readout{display:none}
.reset-progress-button{margin-left:auto;min-height:42px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--teal);font-size:12px;font-weight:650;white-space:nowrap}.reset-progress-button:hover{background:white}.app-header .notebook-button{margin-left:0}
@media(max-width:600px){.app-header{flex-wrap:wrap}.reset-progress-button{order:3;margin-left:0}.app-header .notebook-button{margin-left:auto}}
[hidden]{display:none!important}
.practice-nav{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:-7px;padding-top:7px;border-top:1px solid var(--line)}.practice-nav button{border:1px dashed #cad4c8;background:#f0f3eb}.practice-nav button[aria-current="step"]{border-style:solid}.scene-heading h2:focus-visible{outline:3px solid var(--focus);outline-offset:5px;border-radius:4px}
.takeaway{padding:17px 27px 20px;background:#eef4eb;border-top:1px solid #d6e3d1}.takeaway[hidden]{display:none}.takeaway h3{font-size:18px;color:var(--teal);margin:0 0 13px}.takeaway ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0}.takeaway li{border-left:3px solid #bdd3b7;padding-left:12px;font-size:14px;line-height:1.5}.takeaway strong{display:block;margin-bottom:4px}.takeaway span{display:block}
@media(max-width:760px){.takeaway{padding:16px 18px}.takeaway ul{grid-template-columns:1fr;gap:13px}.takeaway li{font-size:13px}}
.narration-toggle{color:var(--teal);border-color:#c5d8cb;background:#eef4eb;flex:none}.narration-toggle[aria-pressed="false"]{color:var(--muted);background:transparent;border-color:var(--line)}.narration-message{margin:0;padding:0 27px 12px;font-size:12px;line-height:1.4;color:#8b5918}
@media(max-width:760px){.playback{flex-wrap:wrap}.playback .button{font-size:11px;padding:9px 10px}.playback-buttons{flex:1}.playback .timeline{flex-basis:100%}.narration-message{padding:0 18px 12px}}
.why-prompt{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.why-prompt .eyebrow{color:var(--teal)}.why-question{margin:0;font-size:14px;line-height:1.5;font-weight:600}.why-instruction{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
@media(min-width:1200px) and (max-height:780px){.lab{padding-top:13px}.app-header{margin-bottom:12px}.scene-nav{margin-bottom:10px}.scene-heading{padding-top:15px}#stage{height:235px}.quick-check{padding-top:13px;padding-bottom:13px}.caption{min-height:46px}.playback{padding-top:10px;padding-bottom:10px}}
@media(max-width:760px){.lab{width:calc(100% - 28px);padding-top:15px}.brand .eyebrow{font-size:8px}h1{font-size:22px}.notebook-button{font-size:11px;padding:9px}.scene-nav{gap:4px}.scene-nav button{padding:7px 5px;gap:5px;flex-direction:column;justify-content:center;text-align:center;font-size:10px}.step-check{display:none}.scene-heading{padding:17px 18px 2px}.scene-heading h2{font-size:22px}.duration{display:none}.animation-stage{padding:0 6px}#stage{height:250px}.caption{padding:11px 18px;min-height:61px}.caption p{font-size:13px}.playback{padding:12px 15px;gap:8px}.playback-status{display:none}.quick-check{padding:16px;align-items:stretch;flex-direction:column;gap:12px}.button-next{align-self:flex-end}.choice{flex-grow:1;text-align:center}.legend{font-size:9px}.legend-note{margin-left:5px;padding-left:6px}.page-note{margin-bottom:10px}}
@media(max-width:420px){.notebook-button span{display:none}.notebook-button{padding:10px}#stage{height:235px}h2{font-size:20px!important}.scene-nav button{font-size:9px}.caption p{font-size:12px}}
@media(max-width:760px){#stage{height:175px}.mobile-readout{display:flex;justify-content:center;gap:0;margin:-10px 7px 10px;padding:9px 0;background:#fffefa;border:1px solid var(--line);border-radius:9px}.mobile-readout>div{flex:1;text-align:center;padding:0 4px;font-size:12px;line-height:1.6;border-right:1px solid var(--line)}.mobile-readout>div:last-child{border-right:0}.mobile-readout strong{display:block;font-size:14px}.mobile-readout span{display:block}.mobile-readout .wide{font-size:12px}.mobile-readout .wide strong{font-size:12px}.legend{margin-bottom:5px}.legend-note{max-width:200px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:white}.lab{display:none}dialog:not([open]){display:none}dialog[open]{display:block;position:static;border:0;box-shadow:none;width:100%;max-width:none;padding:25px}dialog::backdrop{display:none}.close-dialog,#print-prompts{display:none}.notebook-prompts{font-size:17px}.notebook-prompts li{margin:20px 0}.writing-line{height:40px}}

/* Questions shown while a lesson animation is paused. */
.lesson-question { width: min(620px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 32px; }
.lesson-question .eyebrow { margin-right: 38px; color: var(--teal); }
.lesson-question h2 { padding-right: 30px; }
.checkpoint-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; }
.checkpoint-close:hover { background: #eef3eb; color: var(--ink); }
.checkpoint-paused-note { margin: 10px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkpoint-context { padding: 12px 14px; margin: 0 0 19px; border-left: 3px solid #a7c5a3; border-radius: 0 8px 8px 0; color: #3d5b45; background: #eef4eb; font-size: 14px; line-height: 1.55; }
.checkpoint-context:empty { display: none; }
.checkpoint-prompt { margin: 0 0 15px; color: var(--ink); font-size: 19px; line-height: 1.45; font-weight: 650; }
.checkpoint-choices { display: grid; gap: 9px; }
.checkpoint-choice { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cbd7c8; border-radius: 9px; background: #fffefa; color: var(--ink); font-size: 14px; line-height: 1.5; text-align: left; }
.checkpoint-choice::before { content: ''; flex: none; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #9ead9a; border-radius: 50%; color: inherit; font-size: 13px; line-height: 1; font-weight: 800; }
.checkpoint-choice:hover:not(:disabled) { background: #f0f6ec; border-color: #719c77; }
.checkpoint-choice[aria-pressed="true"] { border-color: #427c67; background: #e7f1e7; color: #20543b; }
.checkpoint-choice[aria-pressed="true"]::before { content: '●'; border-color: currentColor; font-size: 10px; }
.checkpoint-choice.correct { border-color: #59885c; background: #e5f0e3; color: #205828; }
.checkpoint-choice.correct::before { content: '✓'; border-color: currentColor; font-size: 13px; }
.checkpoint-choice.incorrect { border-color: #c68b2b; background: #fff2dd; color: #795112; }
.checkpoint-choice.incorrect::before { content: '×'; border-color: currentColor; font-size: 17px; }
#lesson-question-feedback { min-height: 24px; margin: 14px 0 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }
#lesson-question-feedback.correct, #lesson-question-feedback.success { color: #28643b; }
#lesson-question-feedback.incorrect, #lesson-question-feedback.try-again { color: #805513; }
.checkpoint-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.checkpoint-footer .button { min-height: 44px; font-size: 13px; }
.checkpoint-review { border-color: #c5d8cb; background: #f5f8ef; color: var(--teal); }
.checkpoint-review:hover { background: #e8f0e2; }
#lesson-question-continue:disabled { color: #6c7b70; background: #e4e9e0; border-color: #d7dfd2; }
@media (max-width: 600px) {
  .lesson-question { padding: 25px 20px 21px; }
  .checkpoint-prompt { font-size: 17px; }
  .checkpoint-context { font-size: 13px; padding: 11px 12px; }
  .checkpoint-choice { padding: 11px 12px; }
  .checkpoint-footer .button { flex: 1 1 180px; }
}
@media print { .lesson-question[open] { display: none; } }

/* One screen, one task, with controls anchored beneath the workspace. */
@media screen {
  html,body { width:100%; height:100%; }
  .lab { width:min(1180px,calc(100% - 32px)); height:100dvh; margin:0 auto; padding:12px 0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:9px; }
  .lab[data-mode="test"],.lab[data-mode="practice"] { grid-template-rows:auto auto minmax(0,1fr); }
  .app-header { margin:0; gap:10px; flex-wrap:nowrap; min-height:36px; }
  .brand-mark { width:34px; height:34px; border-radius:10px; font-size:22px; }
  .brand-mark span { font-size:20px; }
  .brand .eyebrow { display:none; }
  .brand h1 { font-size:21px; }
  .lab-menu { position:relative; margin-left:auto; z-index:20; }
  .lab-menu summary { list-style:none; padding:8px 15px; min-height:36px; border:1px solid var(--line); border-radius:9px; font-size:12px; font-weight:650; cursor:pointer; }
  .lab-menu summary::-webkit-details-marker { display:none; }
  .lab-menu summary::after { content:' ▾'; }
  .lab-menu summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
  .lab-menu-items { position:absolute; right:0; top:calc(100% + 6px); width:200px; padding:7px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 8px 25px #23363125; display:grid; gap:5px; }
  .lab-menu-items button { margin:0!important; width:100%; min-height:44px; text-align:left; font-size:12px; }
  .lab-menu-items .notebook-button span { display:inline; }
  .slide-navigation { display:flex; gap:8px; min-width:0; }
  .slide-navigation .scene-nav { flex:1; min-width:0; margin:0; padding:0; border:0; gap:4px; }
  .scene-nav button { min-height:36px; padding:4px 6px; gap:6px; font-size:10px; flex-direction:row; }
  .step-number { width:24px; height:24px; }
  .activity { display:flex; flex-direction:column; min-height:0; border-radius:14px; overflow:visible; }
  .scene-heading { flex:none; padding:12px 18px 8px; gap:8px; min-height:54px; }
  .scene-heading .eyebrow { font-size:9px; margin-bottom:3px; }
  .scene-heading h2 { font-size:21px; }
  .duration { display:none; }
  #practice-stage,#assessment-stage { flex:1; min-height:0; }
  .animation-stage { flex:1; display:flex; flex-direction:column; min-height:0; padding:0 14px; }
  #stage { flex:1; min-height:0; height:0; width:100%; overflow:visible; }
  .legend { flex:none; height:22px; }
  .caption { flex:none; min-height:62px; padding:9px 20px; border-radius:0 0 14px 14px; }
  .caption p { font-size:15px; line-height:1.45; }
  .mobile-readout { flex:none; }
  .lab-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:55px; padding:6px 0 0; }
  #action-hint { flex:1; margin:0; font-size:13px; color:var(--muted); line-height:1.35; }
  .playback { margin:0; padding:0; display:flex; gap:8px; flex:none; flex-wrap:nowrap; }
  .playback-buttons { display:contents; }
  .playback #play-button { order:3; min-width:130px; }
  .playback #replay-button { order:1; }
  .playback #narration-toggle { order:2; }
  .playback .timeline,.playback-status { display:none; }
  .lab-footer .button { min-height:44px; font-size:13px; padding:10px 16px; }
  #next-button { margin-left:auto; min-width:145px; justify-content:center; }
  .quick-check { flex:1; min-height:0; margin:0; padding:22px; border:0; border-radius:0; background:transparent; display:flex; align-items:center; justify-content:center; }
  .check-content { flex:none; width:min(100%,820px); }
  #check-title { font-size:24px; margin-bottom:22px; }
  #choices { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #choices .choice { min-height:62px; font-size:16px; text-align:center; }
  #feedback { min-height:24px; margin:15px 0 0; font-size:14px; }
  .takeaway { flex:1; min-height:0; padding:18px 24px; border:0; border-radius:0 0 14px 14px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
  .takeaway h3 { margin:0; font-size:23px; }
  .takeaway ul { gap:20px; }
  .takeaway li { font-size:16px; line-height:1.5; }
  .takeaway .why-prompt { margin:0; padding-top:18px; }
  .why-question { font-size:16px; }
  .why-instruction { font-size:12px; }
  .lesson-question { max-height:calc(100dvh - 24px); padding:24px; width:min(590px,calc(100% - 24px)); }
  .checkpoint-paused-note,.checkpoint-context { display:none; }
  #lesson-question-title { font-size:22px; margin-bottom:17px; }
  .checkpoint-prompt { font-size:18px; }
  .checkpoint-choice { min-height:46px; padding:10px 12px; }
  #lesson-question-feedback { margin:12px 0; min-height:20px; }
  .checkpoint-footer { padding-top:12px; }
  .checkpoint-footer .button { min-height:44px; }
  #notebook-dialog { max-height:calc(100dvh - 24px); padding:24px; }
  .notebook-prompts { margin:12px 0; line-height:1.4; font-size:14px; }
  .notebook-prompts li { padding:5px 0 8px; }
  .writing-line { height:12px; }
}
@media screen and (max-width:1050px) {
  .scene-nav button > span:not(.step-number) { display:none; }
  .scene-nav button { justify-content:center; min-height:36px; }
}
@media screen and (max-width:600px) {
  .lab { width:calc(100% - 20px); padding:8px 0; gap:6px; }
  .brand h1 { font-size:19px; }
  .brand-mark { width:30px; height:30px; }
  .scene-heading { min-height:52px; padding:9px 12px 6px; }
  .scene-heading h2 { font-size:18px!important; }
  .animation-stage { padding:0 5px; }
  .mobile-readout { margin:0 5px 4px; padding:5px 0; }
  .mobile-readout>div { display:flex; flex-wrap:wrap; justify-content:center; gap:0 5px; font-size:10px; line-height:1.4; }
  .mobile-readout strong { width:100%; font-size:12px; }
  .legend { font-size:9px; height:18px; }
  .caption { min-height:74px; padding:8px 12px; }
  .caption p { font-size:13px; line-height:1.4; }
  .lab-footer { flex-wrap:wrap; min-height:58px; padding:0; gap:5px 8px; }
  #action-hint { font-size:11px; }
  .lab-footer .button { font-size:12px; min-height:42px; padding:9px 11px; }
  .lab[data-mode="watch"] #action-hint { flex-basis:100%; }
  .lab[data-mode="watch"] .playback { width:100%; }
  .playback #play-button { margin-left:auto; min-width:114px; }
  .playback #replay-button { padding-left:4px; padding-right:7px; }
  #next-button { min-width:128px; }
  .quick-check { padding:15px; }
  #check-title { font-size:20px; margin-bottom:18px; }
  #choices { grid-template-columns:1fr; gap:9px; }
  #choices .choice { min-height:46px; font-size:14px; }
  #feedback { font-size:12px; }
  .takeaway { padding:12px 16px; gap:13px; }
  .takeaway h3 { font-size:19px; }
  .takeaway ul { grid-template-columns:1fr; gap:12px; }
  .takeaway li { font-size:13px; line-height:1.4; padding-left:9px; }
  .takeaway strong { margin-bottom:2px; }
  .takeaway .why-prompt { padding-top:11px; }
  .why-question { font-size:13px; }
  .why-instruction { font-size:11px; }
  .lesson-question { padding:22px 16px 16px; }
  #lesson-question-title { font-size:20px; margin-bottom:12px; }
  .checkpoint-prompt { font-size:16px; margin-bottom:12px; }
  .checkpoint-choice { font-size:13px; min-height:44px; }
  .checkpoint-footer { gap:8px; }
  .checkpoint-footer .button { flex:1 1 0; font-size:11px; padding:9px; }
  #lesson-question-feedback { font-size:12px; line-height:1.4; }
}

/* Required notebook pause at the end of each learning slide. */
.scene-nav button:disabled,.scene-nav button:disabled:hover {
  background:#eceee7; border-color:#e0e4dc; color:#768179; opacity:.65; cursor:default;
}
.scene-nav button:disabled .step-number { border-style:dashed; background:transparent; color:inherit; }
.lesson-notes { width:min(620px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:26px; }
.lesson-notes[open] { display:flex; flex-direction:column; gap:18px; }
.lesson-notes .eyebrow { color:var(--teal); }
.lesson-notes h2 { font-size:24px; }
#lesson-notes-intro { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.4; }
#lesson-notes-list { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
#lesson-notes-list li { padding-left:13px; border-left:3px solid #bdd3b7; font-size:15px; line-height:1.4; }
#lesson-notes-list strong { display:block; margin-bottom:2px; }
.lesson-notes-why { padding:13px 15px; background:#eef4eb; border-radius:9px; }
#lesson-notes-why { margin:0; font-size:14px; font-weight:650; line-height:1.4; }
.lesson-notes-instruction { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.lesson-notes-footer { display:grid; grid-template-columns:auto 1fr; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.lesson-notes-footer .button { min-height:44px; font-size:13px; white-space:normal; }
@media screen and (max-width:600px) {
  .lesson-notes { padding:20px 17px; }
  .lesson-notes[open] { gap:13px; }
  #lesson-notes-intro { font-size:13px; margin-top:7px; }
  #lesson-notes-list { gap:10px; }
  #lesson-notes-list li { font-size:13px; line-height:1.35; padding-left:10px; }
  .lesson-notes-why { padding:10px 12px; }
  #lesson-notes-why { font-size:13px; }
  .lesson-notes-instruction { font-size:11px; }
  .lesson-notes-footer { gap:8px; padding-top:11px; }
  .lesson-notes-footer .button { padding:9px 10px; font-size:12px; }
}
@media screen and (max-height:600px) {
  .lesson-notes { padding:17px 20px; }
  .lesson-notes[open] { gap:11px; }
  #lesson-notes-list { gap:8px; }
  #lesson-notes-list li { font-size:13px; line-height:1.3; }
  .lesson-notes-why { padding:9px 12px; }
  .lesson-notes-footer { padding-top:10px; }
}
@media print { .lesson-notes-footer { display:none; } }