/* Fonts are served with the lesson; no third-party font request is needed. */
@font-face{font-family:'Classroom Sans';src:url('fonts/classroom-sans.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

@font-face{font-family:'Classroom Math';src:url('fonts/classroom-math.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

:root{color-scheme:dark;--bg:#101719;--surface:#172326;--border:#344448;--text:#c5cece;--muted:#a2b3b5;--bright:#f1f1e9;--accent:#9adecf;--gold:#edc681;--serif:'Classroom Math',Georgia,'Times New Roman','Classroom Sans',serif;--sans:'Classroom Sans','PingFang SC','Microsoft YaHei',sans-serif}

*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font:19px/1.85 var(--sans);font-weight:400;line-break:strict;word-break:normal;overflow-wrap:break-word;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:5px}
button,input,select{font:inherit}
button{cursor:pointer;background:transparent;color:var(--bright);border:1px solid var(--border);padding:9px 17px;border-radius:5px;line-height:1.5}
button:hover{background:var(--surface);border-color:var(--accent)}
button:disabled{opacity:.4;cursor:default}
.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.primary:hover{background:#b7ebdf;color:var(--bg)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.skip{position:absolute;left:16px;top:-100px;z-index:20;background:var(--bg)}
.skip:focus{top:10px}
.toolbar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border);padding:14px 4vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{text-decoration:none;font:27px var(--serif);color:var(--bright)}
.brand span{color:var(--accent)}
.toolbar-actions{display:flex;align-items:center;gap:12px}
.toolbar small{font-size:14px;color:var(--muted)}
main{max-width:1080px;margin:auto;padding:0 56px}
.slide{padding:80px 0;border-bottom:1px solid var(--border);scroll-margin-top:20px;min-width:0}
.slide:last-child{border:0}
.chapter{font-size:14px;font-weight:500;color:var(--accent);margin:0 0 20px;line-height:1.6}
h1,h2,h3{color:var(--bright);font-weight:600;line-height:1.45;margin:0 0 28px;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,64px);letter-spacing:0;line-height:1.3}
h2{font-size:clamp(28px,2.8vw,38px);letter-spacing:0}
h3{font-size:22px;margin-bottom:16px;font-weight:500}
p{margin:0 0 20px;max-width:42em;text-wrap:pretty}
.lead{font-size:clamp(21px,2vw,25px);line-height:1.8;max-width:34em}
.cover{min-height:calc(100svh - 86px);display:flex;flex-direction:column;justify-content:center}
.route{display:flex;gap:20px;align-items:center;color:var(--accent);font:clamp(26px,3vw,40px)/1.5 var(--serif);margin:28px 0 42px;flex-wrap:wrap}
.route .line{width:100px;height:1px;background:var(--border)}
.question{border-left:3px solid var(--accent);padding:8px 0 8px 24px;margin:28px 0;font-size:24px;color:var(--bright)}
.muted,.note{color:var(--muted)}
.note{font:400 16px/1.8 var(--sans);max-width:48em}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.two-col>*,.three-col>*,.demo-columns>*{min-width:0}
.two-col>div>p:last-child,.three-col>div>p:last-child{margin-bottom:0}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.equation{font:400 clamp(24px,2.35vw,30px)/1.7 var(--serif);font-variant-numeric:lining-nums;letter-spacing:0;color:var(--bright);margin:24px 0;overflow-wrap:normal;word-break:normal}
.math-term{display:inline-block;white-space:nowrap}
.equation .note{display:block;margin-top:10px}
.equation sub{font-size:.65em}
.equation .math-zh{font-family:var(--sans);font-size:.8em}
.equation strong{color:var(--accent);font-weight:400}
.formula-panel{background:var(--surface);padding:24px 30px;border-radius:7px;margin:24px 0}
.formula-panel>.equation:first-child{margin-top:0}
.formula-panel>p:last-child{margin-bottom:0}
.two-col>.formula-panel{margin-top:0}
.formula-panel h3{font-family:var(--sans)}
code,pre{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
code{font-size:.94em}
pre code{font-size:1em}
pre{background:var(--surface);padding:26px;border-radius:7px;font-size:16px;line-height:1.85;overflow:auto;tab-size:4;margin:0 0 22px;color:var(--bright)}
.layers{display:grid;grid-template-columns:repeat(4,1fr);margin:32px 0;gap:0}
.layer{border-top:2px solid var(--accent);padding:22px 22px 4px 0}
.layer:not(:first-child){padding-left:22px;border-left:1px solid var(--border)}
.layer b{display:block;font-size:24px;color:var(--bright);font-weight:500}
.layer p{font-size:18px;line-height:1.85;margin-top:14px}
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0;padding:0;list-style:none;counter-reset:flow}
.flow li{counter-increment:flow;display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--border);padding:10px 0;color:var(--bright);font-size:17px;line-height:1.65}
.flow li::before{content:counter(flow);font:16px var(--serif);color:var(--accent);flex-shrink:0}
.ref{font-size:13px;line-height:0;vertical-align:super;margin-inline:3px;text-decoration:none;white-space:nowrap}
.proof-step{margin-bottom:26px}
.proof-step b{color:var(--accent);font-weight:500}
.toc{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
.toc a{font-size:16px}
.demo{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:28px;margin:28px 0}
.inputs{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.inputs label{font-size:16px;display:flex;flex-direction:column;gap:6px}
input{width:130px;padding:8px 12px;background:var(--bg);color:var(--bright);border:1px solid var(--border);border-radius:4px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.presets button{font-size:15px;padding:5px 12px}
.demo-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:26px 0}
.trace{max-height:300px;overflow:auto;padding-right:12px}
.trace ol{margin:0;padding-left:30px;font:16px/1.8 'SFMono-Regular',Consolas,'Classroom Sans',monospace;font-variant-numeric:tabular-nums}
.trace li{padding:4px 8px;color:var(--muted)}
.trace li:last-child{color:var(--bright);background:var(--bg)}
.counter{color:var(--accent);font-size:16px;font-variant-numeric:tabular-nums;margin-bottom:10px}
.demo-actions{display:flex;flex-wrap:wrap;gap:10px}
.error{color:#ffc9b5;min-height:1.5em;font-size:16px;margin:10px 0}
.error:empty{display:none}
.bar-track{height:12px;background:var(--bg);margin:12px 0 20px;max-width:100%;overflow:hidden}
.bar{height:100%;background:var(--accent);min-width:2px}
.subtraction .bar{background:var(--gold)}
details{margin:22px 0;padding-top:18px;border-top:1px solid var(--border)}
summary{cursor:pointer;color:var(--accent);font-size:17px}
details p{margin-top:16px;font-size:17px}
.sources{font-size:17px;padding-left:26px}
.sources li{padding:0 0 28px 12px;scroll-margin-top:100px}
.sources p{font-size:16px;margin:6px 0 0;color:var(--muted)}
.checks{width:100%;border-collapse:collapse;font-size:16px;line-height:1.8}
.checks th:nth-child(1){width:28%}
.checks th:nth-child(2){width:37%}
.checks th,.checks td{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--border)}
.checks th{color:var(--bright)}
.table-wrap{overflow:auto}
.pager{display:none;position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--bg);padding:12px 4vw;border-top:1px solid var(--border);align-items:center;justify-content:space-between;gap:16px}
.pager-group{display:flex;align-items:center;gap:16px}
.pager span{font-size:16px;color:var(--muted)}
.progress{position:absolute;top:-2px;left:0;height:2px;background:var(--accent);transition:width .15s}
.presenting .slide{display:none;border:0;padding:40px 0 112px;min-height:calc(100svh - 82px);font-size:21px;line-height:1.8}
.presenting .slide.active{display:flex;flex-direction:column;justify-content:flex-start}
.presenting .slide.cover{justify-content:center}
.presenting .pager{display:flex}
.presenting .reading-only{display:none}
.presenting main{max-width:1280px;padding-inline:64px}
.presenting .slide.active#references{justify-content:flex-start}
.presenting .slide.active#references .sources{columns:2;column-gap:40px}
.presenting .sources li{break-inside:avoid}
.presenting h2{font-size:clamp(30px,3vw,42px);line-height:1.4}
.presenting h3{font-size:24px}
.presenting .note{font-size:17px}
.presenting .equation{font-size:32px}
.presenting .two-col .equation{font-size:29px}
.presenting pre{font-size:18px}
.presenting .chapter{margin-bottom:16px}
.presenting .question{font-size:24px}
.presenting .lead{font-size:26px;line-height:1.75}
.presenting .cover{padding-bottom:100px}
footer{max-width:1080px;margin:auto;padding:32px 48px 60px;font-size:15px;color:var(--muted)}
.presenting footer{display:none}
[hidden]{display:none!important}

@media(max-width:820px){body{font-size:18px;line-height:1.9}
main,.presenting main{padding:0 24px}
.toolbar{padding:12px 20px;gap:12px}
.toolbar small{display:none}
.toolbar-actions{gap:8px}
.toolbar button{font-size:14px;padding:8px 12px}
.slide{padding:48px 0}
.two-col,.three-col,.demo-columns{grid-template-columns:1fr;gap:24px}
.layers{grid-template-columns:1fr 1fr}
.layer:nth-child(3){border-left:0;padding-left:0}
.layer p{font-size:17px}
.layer b{font-size:22px}
.equation,.presenting .equation,.presenting .two-col .equation{font-size:24px}
.formula-panel,.demo{padding:20px}
pre,.presenting pre{font-size:15px;padding:18px}
.question{font-size:21px}
.route{gap:14px}
.route .line{width:45px}
.presenting .slide{padding:32px 0 110px;font-size:18px;line-height:1.85}
.presenting .lead{font-size:22px}
.presenting h3{font-size:22px}
.presenting .question{font-size:21px}
.presenting .slide.active#references .sources{columns:1}
.pager{padding:12px 20px}
.pager button{font-size:15px;padding:8px 12px}
.pager-group{gap:10px}
.pager .hint{display:none}
.trace{max-height:240px}
footer{padding:24px 22px 48px}
.checks th,.checks td{padding:12px;min-width:160px}
.cover h1{font-size:clamp(32px,7vw,48px)}
.slide h2{font-size:28px}
.note,.presenting .note{font-size:16px}
.two-col .equation{margin-block:18px}
.question{padding-left:18px}
.route{margin-block:24px 32px}
.flow{gap:8px 16px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}

@media(max-width:420px){.pager{flex-wrap:wrap;gap:4px}
.pager #page-label{flex-basis:100%;font-size:14px}
.pager-group{margin-left:auto}
}

@media(min-width:821px) and (max-height:820px){.presenting .slide{padding-top:28px;font-size:19px}
.presenting h2{font-size:36px;margin-bottom:22px}
.presenting .equation{margin-block:18px}
.presenting .lead{font-size:23px}
.presenting .chapter{margin-bottom:12px}
.presenting .question{margin-block:22px}
.presenting .demo{padding:22px;margin-block:20px}
.presenting .trace{max-height:190px}
}

@media print{:root{color-scheme:light;--bg:white;--surface:#f2f5f4;--text:#222;--bright:#111;--muted:#444;--accent:#216654;--border:#ccc}
body{font-size:12pt}
.toolbar,.pager,.reading-only,.demo-actions,.presets,.inputs,.skip,footer{display:none!important}
main{max-width:none;padding:0}
.slide,.presenting .slide,.presenting .slide.active{display:block!important;min-height:0;padding:25px 0;break-inside:avoid}
.cover{min-height:0}
.slide h1{font-size:36pt}
.slide h2,.presenting h2{font-size:26pt}
.lead,.presenting .lead{font-size:16pt}
.presenting .slide{font-size:12pt}
.presenting main{max-width:none;padding:0}
pre,.presenting pre{font-size:10pt;white-space:pre-wrap}
.trace{max-height:none}
.sources{columns:1!important}
a{color:var(--accent)}
details{display:block}
details>*{display:block}
summary{list-style:none}
.demo{break-inside:avoid}
.checks{font-size:10pt}
}