:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#000000;background:#ffffff;font-size:16px;--ink:#000000;--blue:#8b0f04;--amber:#8b0f04;--line:#fcb034;--gold:#ffffff;--plot:#000000}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{min-height:50px;border:1px solid #bfbfbf;border-radius:12px;background:white;color:var(--ink);padding:11px 18px;font-weight:650;cursor:pointer;touch-action:manipulation;transition:background .15s,box-shadow .15s}button:hover{background:#f1f1f1}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #fcb034;outline-offset:3px}button:disabled{opacity:.42;cursor:default}button:active:not(:disabled){transform:translateY(1px)}button[aria-pressed=true]{background:#fcb03433;border-color:#8b0f04}.app{height:100vh;height:100dvh;display:grid;grid-template-rows:72px minmax(0,1fr) 100px}header{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dddddd;background:white;gap:16px}.brand{display:flex;align-items:baseline;gap:18px}.brand strong{font-size:25px;letter-spacing:-.7px}.brand span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#4b4b4b}.header-actions{display:flex;gap:10px}main{display:grid;grid-template-columns:minmax(300px,29%) minmax(0,1fr);min-height:0}.lesson{padding:28px clamp(22px,2.2vw,42px);background:white;overflow:auto;display:flex;flex-direction:column}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:#8b0f04;font-weight:750}h1{font-size:clamp(26px,2.35vw,42px);line-height:1.13;letter-spacing:-.9px;margin:16px 0 0;font-weight:680}.equation{font-size:clamp(34px,3.25vw,60px);line-height:1.2;letter-spacing:-1.5px;font-weight:580;margin:25px 0 20px;white-space:nowrap}.m{color:var(--blue)}.b{color:var(--amber)}.work{font-size:clamp(21px,1.9vw,32px);line-height:1.5;min-height:125px}.work small{font-size:.68em;color:#4a4a4a;display:block;line-height:1.45;margin-bottom:4px}.work .row{margin-bottom:9px}.work .sub{font-size:.75em;color:#4a4a4a;line-height:1.4}.work .answer{display:inline-block;border-bottom:3px solid #fcb034;padding:0 3px}.question-wrap{margin-top:auto;padding-top:24px}.question-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#4b4b4b;font-weight:700;border-top:1px solid #dddddd;padding-top:20px}.question{font-size:clamp(20px,1.65vw,28px);line-height:1.4;margin:10px 0 0}.graph-area{background:var(--plot);position:relative;overflow:hidden;min-height:0;display:grid;grid-template-rows:64px minmax(0,1fr) 60px;color:#ffffff}.graph-top{display:flex;align-items:center;justify-content:space-between;padding:20px 30px 0;gap:16px}.graph-top span{font-size:14px;color:#cccccc}.graph-top strong{font-size:16px;font-weight:550;letter-spacing:.02em}.legend{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.legend span{color:#ffffff;display:inline-flex;gap:9px;align-items:center}.legend i{width:28px;border-top:3px solid var(--line);display:inline-block}.legend .reference i{border-color:var(--gold);border-top-style:dashed}.plot{position:relative;min-height:0;margin:0 16px}#graph{display:block;width:100%;height:100%;overflow:visible}#graph text{font-family:inherit;fill:#ffffff;font-size:18px;font-weight:500}#graph .tick{fill:#bdbdbd;font-size:16px}#graph .point-label{font-size:22px;font-weight:650;paint-order:stroke;stroke:var(--plot);stroke-width:7px;stroke-linejoin:round}#graph .step-label{font-size:20px;font-weight:650;fill:var(--gold);paint-order:stroke;stroke:var(--plot);stroke-width:6px;stroke-linejoin:round}#graph .axis-name{font-size:18px;fill:#ffffff}#graph .origin{fill:#bdbdbd;font-size:15px}.graph-caption{padding:5px 28px 17px;align-self:center;text-align:center;font-size:clamp(18px,1.5vw,25px);color:#ffffff;line-height:1.3;min-height:40px}.graph-caption strong{color:var(--gold);font-weight:650}footer{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:16px 28px;background:white;border-top:1px solid #dddddd}.progress{font-size:16px;color:#444444;line-height:1.5}.progress strong{color:var(--ink);font-weight:650}.track{height:4px;background:#e2e2e2;width:180px;margin-top:9px;overflow:hidden;border-radius:2px}.track span{height:100%;display:block;background:#8b0f04;transition:width .3s}.navigation{display:flex;gap:10px;align-items:center}.next{background:#8b0f04;color:white;border-color:#8b0f04;min-width:330px;font-size:18px;min-height:60px;box-shadow:0 4px 12px #00000020}.next:hover{background:#650b03}.next span{margin-left:14px}#pause{min-width:87px}.key-hint{font-size:12px;color:#555555;margin-top:5px}.controls{display:grid;gap:18px;margin-top:4px}.controls label{display:block;font-size:17px;font-weight:650}.slider-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.slider-heading output{font-size:25px;font-weight:700}.controls input[type=range]{width:100%;height:38px;margin:0;accent-color:#8b0f04;touch-action:pan-y}.controls input.b-range{accent-color:#8b0f04}.controls small{font-size:14px;color:#4b4b4b}.explore-readout{font-size:19px;line-height:1.45;border-top:1px solid #dddddd;padding-top:16px;margin-top:4px}.explore-readout strong{font-size:25px;display:block}.explore-readout .compact{font-size:16px;font-weight:400;color:#444444}#explore-panel[hidden],#lesson-panel[hidden],[hidden]{display:none!important}.toast{position:absolute;right:24px;top:80px;background:white;color:#000000;box-shadow:0 8px 35px #00000035;padding:16px 20px;max-width:340px;border-radius:12px;z-index:5;font-size:17px;line-height:1.4}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.restart{font-size:15px}.explore-footer{display:flex;gap:16px;align-items:center}.motion-label{color:var(--gold)!important}
@media(min-width:1700px){.app{grid-template-rows:86px minmax(0,1fr) 115px}header{padding:0 40px}.brand strong{font-size:30px}.graph-area{grid-template-rows:75px minmax(0,1fr) 75px}button{font-size:20px;min-height:58px}.next{font-size:22px;min-height:68px;min-width:400px}.eyebrow{font-size:17px}.question-label{font-size:16px}.graph-top strong,.graph-top span{font-size:19px}.progress{font-size:20px}#graph .point-label{font-size:27px}#graph .step-label{font-size:24px}#graph .tick{font-size:20px}#graph .axis-name{font-size:22px}.controls label{font-size:22px}.controls small{font-size:18px}.explore-readout{font-size:23px}}
@media(max-width:1050px){.brand span{display:none}.app{grid-template-rows:65px minmax(0,1fr) 91px}main{grid-template-columns:290px minmax(0,1fr)}.lesson{padding:23px 22px}h1{font-size:28px}.equation{font-size:39px;margin:22px 0 16px}.work{font-size:24px;min-height:100px}.question{font-size:21px}.question-wrap{padding-top:18px}.question-label{padding-top:14px}.next{min-width:285px;font-size:16px;min-height:56px}header{padding:0 20px}footer{padding:13px 20px}.graph-top{padding:15px 20px 0}.graph-area{grid-template-rows:60px minmax(0,1fr) 66px}.graph-caption{font-size:19px}#graph .point-label{font-size:19px}#graph .step-label{font-size:18px}#graph .tick{font-size:14px}.legend{gap:12px}.legend span{font-size:13px}.progress{font-size:14px}}
@media(max-height:660px) and (min-width:760px){.app{grid-template-rows:58px minmax(0,1fr) 78px}.lesson{padding:16px 23px}h1{font-size:25px;margin-top:10px}.equation{font-size:34px;margin:13px 0}.work{font-size:21px;min-height:85px}.question{font-size:18px}.question-wrap{padding-top:13px}.question-label{padding-top:10px}.graph-area{grid-template-rows:45px minmax(0,1fr) 50px}.graph-caption{font-size:17px}.graph-top{padding-top:8px}.next{min-height:50px}footer{padding:10px 20px}.controls{gap:9px}.controls label{font-size:15px}.controls input[type=range]{height:30px}.explore-readout{font-size:17px;padding-top:9px}.key-hint{display:none}.track{margin-top:5px}}
@media(max-width:760px){.app{height:auto;min-height:100dvh;display:flex;flex-direction:column}header{min-height:66px;padding:10px 16px}.brand strong{font-size:21px}.header-actions{gap:7px}.header-actions button{font-size:14px;padding:10px 12px}main{display:flex;flex-direction:column}.lesson{padding:23px 22px}h1{font-size:30px;margin-top:10px}.equation{font-size:44px;margin:15px 0}.work{font-size:25px;min-height:0}.question-wrap{padding-top:10px}.question{font-size:21px}.question-label{padding-top:12px}.graph-area{height:540px;min-height:540px;grid-template-rows:60px 1fr 60px}.plot{margin:0 8px}.graph-top{padding:12px 18px 0}.graph-top strong{font-size:14px}.graph-top span{font-size:12px}.graph-caption{padding:0 20px 14px;font-size:18px}footer{position:sticky;bottom:0;z-index:3;display:flex;flex-direction:column;gap:9px;padding:12px 14px;box-shadow:0 -4px 18px #00000012}.progress{width:100%;font-size:14px;display:flex;gap:12px;align-items:center}.track{flex:1;margin:0;max-width:160px}.navigation{width:100%;gap:7px}.navigation button{padding:10px 12px;min-height:52px;font-size:15px}.next{flex:1;min-width:0}.next span{display:none}.key-hint{display:none}#pause{min-width:70px}.explore-footer{width:100%;justify-content:space-between}.controls{gap:14px}.controls input[type=range]{height:44px}.explore-readout{margin-top:4px}.toast{top:74px;right:12px;left:12px;max-width:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}