:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#173c59;background:#e5f1f5;font-synthesis:none;--blue:#157fbd;--ink:#133954;--muted:#678294;--orange:#ef9b24;--teal:#1fa6bd}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 0%,#fff 0%,#eaf6fa 45%,#d5e9ef 100%)}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,input:focus-visible{outline:3px solid #156ca5;outline-offset:4px}button:hover{filter:brightness(.95)}[hidden]{display:none!important}#lesson{height:100dvh;min-height:700px;max-width:2400px;margin:auto;padding:24px 30px 12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:14px}.page-header{display:flex;align-items:center;justify-content:space-between;padding:0 7px 6px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;display:flex;gap:10px;align-items:center;color:#4b748b}.brand-mark{font:26px Georgia;color:#1787bf;line-height:20px}.slash{color:#a4bfcc}.lesson-tag{font-size:10px;letter-spacing:1px;padding:3px 8px;border:1px solid #bcd8e5;border-radius:4px;color:#5d8498}h1{font-size:clamp(26px,2.65vw,49px);letter-spacing:1px;line-height:1.25;margin:10px 0 5px;font-weight:750;color:#102f4c}h1 span{font-weight:650}.page-header p{font-size:clamp(12px,1vw,18px);margin:0;color:#59778a;letter-spacing:1px}.header-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:14px;color:#426a83}.header-side>span{letter-spacing:1px;font-weight:600}.header-side>div{display:flex;gap:15px;align-items:center}.text-button{font-size:13px;color:#567a90;padding:5px 8px}.icon-button{font-size:26px;line-height:26px;border:1px solid #bad4df;border-radius:8px;padding:5px 8px}.workspace{display:grid;grid-template-columns:1.13fr 1fr;gap:17px;min-height:0}.panel{border:1px solid #fff;border-radius:17px;box-shadow:0 3px 18px #244d6810;background:#f9fdffeb;overflow:hidden}.scene{position:relative;isolation:isolate;background:#bbe2ec;min-height:0}.scene>svg{width:100%;height:100%;display:block;touch-action:none}.scene-heading{position:absolute;left:0;right:0;top:0;z-index:1;display:flex;gap:12px;align-items:center;padding:17px 22px;background:linear-gradient(90deg,#f5fbffff,#f6fcffda 80%,#f6fcffb0);border-bottom:1px solid #ffffffab}.section-icon{font-size:27px;color:#268cbd;line-height:1}.scene-heading h2,.section-heading h2{font-size:clamp(16px,1.35vw,25px);margin:0;white-space:nowrap;letter-spacing:1px}.scene-heading p{margin:0;font-size:clamp(11px,.9vw,16px);color:#5b7687}.divider{height:20px;width:1px;background:#b7d2df}.scene-badge{position:absolute;left:20px;top:80px;font-size:11px;background:#ffffffe0;padding:7px 11px;border-radius:30px;box-shadow:0 2px 6px #18456114;color:#547986}.scene-badge span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#46a98e;margin-right:5px}.scene-note{position:absolute;left:24px;right:24px;bottom:24px;padding:17px 22px;background:#f6fcfff0;border:1px solid white;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 4px 20px #06355018}.scene-note>span{font-size:11px;font-weight:700;letter-spacing:2px;color:#2f7b9c}.scene-note h3{margin:7px 0;font-size:clamp(18px,1.55vw,29px);color:#163d51}.scene-note p{margin:0;font-size:clamp(12px,1vw,17px);color:#577483;line-height:1.6}.board{display:flex;flex-direction:column;gap:14px;min-height:0}.analysis{padding:18px 21px 14px;flex-shrink:0}.section-heading{display:flex;align-items:center;gap:10px}.small-label{font-size:clamp(10px,.85vw,14px);margin-left:auto;color:#708b9b}.metrics{display:flex;align-items:center;gap:22px;margin-top:17px}.metrics>div{display:flex;flex-direction:column;gap:4px;flex:1}.metrics span{font-size:12px;color:#668297}.metrics strong{font-size:clamp(22px,2vw,37px);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.6px;line-height:1.1}.metrics small{font-size:13px;font-weight:500;letter-spacing:0}.metrics .plus{font-size:22px;color:#a6bfcc}.metrics .total{padding-left:25px;border-left:1px solid #cce1ea;flex:1.12}.total strong,.total span{color:#c77918}.length-track{display:flex;width:100%;height:7px;background:#e6f0f3;border-radius:8px;overflow:hidden;margin-top:17px}.length-track>div{height:100%}#ap-bar{background:linear-gradient(90deg,#f8c057,#ee991f)}#pb-bar{background:linear-gradient(90deg,#62c9d3,#209fac);border-left:2px solid white}.track-legend{display:flex;gap:12px;align-items:center;font-size:10px;color:#7a96a5;margin-top:7px}.track-legend>span:last-child{margin-left:auto}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}.orange{background:var(--orange)}.teal{background:var(--teal)}.geometry{display:flex;flex-direction:column;min-height:0;flex:1;padding:17px 17px 13px}.geometry>.section-heading{padding:0 4px 12px}.graph-wrap{flex:1;min-height:140px;position:relative;border-radius:10px;background-color:#f2faff;background-image:linear-gradient(#c3deeb30 1px,transparent 1px),linear-gradient(90deg,#c3deeb30 1px,transparent 1px);background-size:25px 25px;border:1px solid #e2eff4}.graph-wrap svg{display:block;width:100%;height:100%;position:absolute;touch-action:none}.graph-caption{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:10px;color:#7892a3;pointer-events:none}.insight{display:flex;gap:14px;align-items:center;min-height:76px;margin:11px 0;padding:10px 14px;background:#ebf4f8;border-radius:9px;border:1px solid #e0ecf2}.insight-index{flex-shrink:0;color:#63839c;font-size:11px;padding-right:13px;border-right:1px solid #cbdfea}.insight strong{font-size:clamp(13px,1.05vw,19px);font-weight:650}.insight p{font-size:clamp(11px,.85vw,15px);color:#638096;margin:5px 0 0;line-height:1.45}.insight.proof{background:#f3effa;border-color:#e5dcf3}.insight.proof strong{color:#7854ac}.explore-controls{display:flex;gap:8px;align-items:center;font-size:12px}.explore-controls label{white-space:nowrap;font-size:11px;color:#5b7b8f}.explore-controls input{min-width:35px;flex:1;width:0}.nudge{font-size:23px;width:22px;height:25px;line-height:20px;background:#e6f2f7;border-radius:50%;color:#4e89a8;padding:0;flex-shrink:0}.secondary,.primary{border-radius:7px;padding:10px 12px;font-size:12px;white-space:nowrap}.secondary{border:1px solid #c6deea;background:#f4fafc;color:#50768d}.secondary[aria-pressed=true]{color:#7952aa;background:#eee8f9;border-color:#cfc0e7}.primary{background:#eda332;color:#fff;font-weight:650;box-shadow:0 2px 5px #df981825}.primary span{margin-left:5px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.steps>button{position:relative;display:flex;align-items:center;gap:16px;padding:12px 17px;text-align:left;border:1px solid #d5e5ec;background:#f5fbfdba;border-radius:12px}.steps>button.active{background:#fff8e9;border-color:#e9bd69;box-shadow:0 3px 10px #d89c2910}.step-number{display:grid;place-items:center;flex-shrink:0;width:33px;height:33px;border-radius:50%;font:italic 22px Georgia;color:#4a8cac;background:#e0eff7}.active .step-number{color:white;background:#e6a13a}.step-thumb{width:65px;height:43px;flex-shrink:0;object-fit:cover;background:#edf7fc;border-radius:5px}.step-thumb.landscape,.step-thumb.explore{background-image:url('/assets/landscape-08160cf1f8717503.webp');background-size:cover;background-position:center}.step-thumb.explore{background-position:40% 60%;background-size:150%}.steps strong{display:block;font-size:clamp(14px,1.05vw,20px);letter-spacing:1px}.steps small{display:block;font-size:10px;color:#7994a4;margin-top:5px}.step-arrow{position:absolute;right:-14px;z-index:1;color:#78a6bf;background:#e8f3f7;width:17px;text-align:center}.active strong{color:#a86715}.player{display:flex;align-items:center;gap:14px;padding:0 8px;color:#7592a3;font-size:11px;min-height:35px}.play-button{width:31px;height:31px;border-radius:50%;background:#2b8abb;color:white;font-size:12px;flex-shrink:0}.player>input{flex:1;min-width:30px}.player #time{font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap}.player-divider{width:1px;height:16px;background:#bfd5df}input[type=range]{accent-color:#2793bd;height:16px;cursor:pointer}#position{accent-color:#efa52f}svg text{font-family:"PingFang SC","Microsoft YaHei",sans-serif}svg .math{font-family:Georgia,"Times New Roman",serif;font-style:italic}svg .handle{cursor:ew-resize}#asset-error{position:absolute;top:50%;background:#fff;padding:20px;width:100%;text-align:center}dialog{border:1px solid white;border-radius:20px;max-width:640px;width:calc(100% - 40px);padding:28px 32px;color:var(--ink);box-shadow:0 25px 90px #16374c50;background:#f7fcff}dialog::backdrop{background:#153e5855;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading button{font-size:28px}.dialog-heading .eyebrow{font-size:11px}dialog h2{font-size:24px;margin:16px 0 20px}dialog p{font-size:14px;line-height:1.9;color:#58788b}.dialog-note{background:#e7f2f7;border-radius:9px;padding:14px;font-size:12px;line-height:1.8;color:#52778d}.question{border-top:1px solid #d9e9f0;padding:13px 0}.question h3{font-size:15px;margin:0 0 12px}.answers{display:flex;flex-wrap:wrap;gap:8px}.answers button{border:1px solid #c9dfe9;border-radius:7px;background:white;padding:8px 12px;font-size:13px}.answers button[aria-pressed=true]{border-color:#1886b8;background:#e2f3fc}.question p{font-size:12px;margin:9px 0 0}.question .correct{color:#218a6e}
@media(min-width:1700px){#lesson{padding:30px 38px 18px;gap:18px}.analysis{padding:22px 26px 18px}.geometry{padding:22px 23px 17px}.metrics{margin-top:23px}.length-track{margin-top:23px;height:9px}.track-legend{font-size:12px}.steps>button{padding:17px 23px;gap:22px}.step-thumb{width:85px;height:51px}.step-number{width:40px;height:40px;font-size:26px}.steps small{font-size:12px}.player{min-height:40px;font-size:13px}.text-button{font-size:14px}.explore-controls{gap:10px}.secondary,.primary{font-size:14px;padding:12px 15px}.explore-controls label{font-size:13px}.insight{min-height:90px;margin:14px 0;padding:15px 18px}.insight-index{font-size:13px}.graph-caption{font-size:12px}}
@media(max-height:820px) and (min-width:1000px){#lesson{padding:16px 22px 9px;gap:10px;min-height:650px}.page-header h1{margin:5px 0}.eyebrow{font-size:10px}.scene-heading{padding:13px 16px}.analysis{padding:13px 17px 11px}.metrics{margin-top:12px}.length-track{margin-top:12px}.geometry{padding:13px 14px 11px}.geometry>.section-heading{padding-bottom:9px}.insight{min-height:61px;margin:8px 0;padding:8px 12px}.steps>button{padding:9px 14px;gap:12px}.scene-note{bottom:19px;left:19px;right:19px;padding:13px 17px}.scene-badge{top:67px}.board{gap:10px}.secondary,.primary{padding:8px 10px}.graph-caption{font-size:9px}}
@media(max-width:1100px){.step-thumb{display:none}.steps>button{gap:12px}.small-label{font-size:10px}.scene-heading p{font-size:10px}.scene-heading{gap:8px}.explore-controls{gap:5px}.header-side{font-size:11px}.metrics{gap:12px}.metrics .total{padding-left:15px}}
@media(max-width:760px){#lesson{height:auto;min-height:100dvh;padding:17px 13px;gap:13px}.page-header{padding:0;align-items:flex-start}.eyebrow{font-size:10px;letter-spacing:1px}.lesson-tag{display:none}h1{font-size:23px;letter-spacing:0}h1 span{display:block;font-size:19px;margin-top:4px}.page-header p{font-size:10px;margin-top:9px;letter-spacing:0}.header-side>span{display:none}.header-side>div{gap:0}.header-side .text-button{font-size:10px;padding:5px}.icon-button{font-size:23px;border:0;padding:3px}.workspace{grid-template-columns:1fr;gap:13px}.scene{height:460px}.scene-heading p{font-size:10px}.scene-heading{padding:13px}.scene-badge{top:65px}.scene-note{bottom:16px;left:16px;right:16px;padding:13px 15px}.scene-note h3{font-size:20px}.scene-note p{font-size:12px}.board{gap:13px}.analysis{padding:16px 18px}.metrics strong{font-size:29px}.geometry{height:530px;flex:auto}.steps{gap:5px}.steps>button{padding:10px 3px;display:flex;flex-direction:column;gap:7px;text-align:center;border-radius:9px}.step-number{width:27px;height:27px;font-size:19px}.steps strong{font-size:11px;letter-spacing:0}.steps small,.step-arrow{display:none}.player{gap:7px;padding:0;flex-wrap:wrap}.player #play-label{display:none}.player .text-button{font-size:11px;padding:5px}.player-divider{display:none}.graph-caption{font-size:10px}.explore-controls{gap:6px}.secondary,.primary{font-size:11px;padding:9px}.player>input{min-width:80px}.player #time{font-size:9px}dialog{padding:22px}dialog h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the geometric construction legible on classroom laptops. */
@media(max-height:820px) and (min-width:1000px){.analysis{padding:10px 16px 8px}.metrics{margin-top:8px}.metrics>div{gap:2px}.metrics strong{font-size:25px}.metrics span{font-size:10px}.length-track{margin-top:9px;height:5px}.track-legend{font-size:9px;margin-top:5px}.insight{min-height:50px;padding:7px 10px;margin:7px 0}.insight p{font-size:10px;margin-top:3px}.insight strong{font-size:12px}.insight-index{font-size:10px}.geometry{padding:10px 13px}.geometry>.section-heading{padding-bottom:7px}.section-icon{font-size:23px}.graph-caption{bottom:5px}.steps>button{padding:8px 14px}.page-header{padding-bottom:0}}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;height:20px}input[type=range]::-webkit-slider-runnable-track{height:5px;background:#bddce9;border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-5px;background:#2b94bd;border:2px solid white;box-shadow:0 1px 3px #244a682e}#position::-webkit-slider-thumb{width:19px;height:19px;margin-top:-7px;background:#efa52f;border:3px solid white}input[type=range]::-moz-range-track{height:5px;background:#bddce9;border-radius:5px}input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#2b94bd;border:2px solid white}#position::-moz-range-thumb{background:#efa52f}
@media(min-width:1700px){#lesson{gap:14px;padding-top:25px}.page-header h1{font-size:43px;margin:8px 0 4px}.analysis{padding:17px 23px 13px}.metrics{margin-top:13px}.length-track{margin-top:15px}.geometry{padding:17px 20px 13px}.geometry>.section-heading{padding-bottom:8px}.insight{min-height:66px;padding:10px 16px;margin:10px 0}.steps>button{padding:12px 21px}.secondary,.primary{padding:10px 14px}}
@media(max-width:760px){.scene{height:auto}.scene>svg{height:auto;aspect-ratio:8 / 7}.scene-note{position:relative;left:auto;right:auto;bottom:auto;margin:0 13px 13px}.scene-badge{display:none}.scene-heading p{font-size:9px}.scene-heading{gap:7px}}

/* The river landscape continues around the teaching panels. */
body{
  background:#d7eff5 url('/assets/environment-4e37944b5936e352.webp') center top / cover fixed no-repeat;
}
.page-header{
  position:relative;
  isolation:isolate;
  text-shadow:0 1px 5px #fff,0 0 18px #ffffffc4;
}
.page-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-30px -18px -7px;
  background:linear-gradient(90deg,#f5fcfff2 0%,#f5fcffb3 34%,#eff9ff38 68%,#f1faff85 100%);
  mask-image:linear-gradient(#000 75%,transparent);
  pointer-events:none;
}
.header-side{color:#244d68}
.header-side .text-button{color:#365d75}
.icon-button{background:#f1faffb8;border-color:#fff9}
.panel{
  border:1px solid #fffffff0;
  box-shadow:0 5px 20px #13476920,inset 0 1px 0 white;
}
.analysis,.geometry{
  background:linear-gradient(125deg,#f8fdfff5,#e7f5fcf0);
  backdrop-filter:blur(12px);
}
.scene-heading{
  background:linear-gradient(90deg,#167ca1dd,#4a9bbaa6 75%,#6eabc274);
  color:#fff;
  text-shadow:0 1px 3px #164b6659;
  backdrop-filter:blur(7px);
}
.scene-heading .section-icon,.scene-heading p{color:#f1fbff}
.scene-heading .divider{background:#d8f4ff8a}
.scene-note{background:linear-gradient(120deg,#f5fcfff5,#e5f5fdeb);box-shadow:0 5px 22px #134e7026}
.graph-wrap{background-color:#f7fcffeb;border-color:#d8edf5;box-shadow:inset 0 0 24px #cce7f52e}
.steps>button{background:linear-gradient(135deg,#f7fdfff5,#dff2fceb);border-color:#ffffffdb;box-shadow:0 3px 12px #204a6315;backdrop-filter:blur(8px)}
.steps>button.active{background:linear-gradient(125deg,#fffdf2,#fff0ccef);border-color:#f3bb45;box-shadow:0 3px 12px #a27a2330}
.step-arrow{background:#e7f6fc;border-radius:50%}
.player{padding:5px 12px;background:#f0faffed;border:1px solid #ffffffc9;border-radius:10px;box-shadow:0 3px 12px #1347691f;backdrop-filter:blur(9px);color:#4b768f}
.primary{background:linear-gradient(#ffb72e,#ec9407);box-shadow:0 2px 6px #c47b2326}
@media(min-width:761px){
  .analysis{padding-top:13px;padding-bottom:10px}
  .metrics{margin-top:11px}
  .length-track{margin-top:12px}
  .insight{min-height:60px;padding:9px 13px;margin:8px 0}
  .geometry>.section-heading{padding-bottom:9px}
}
@media(min-width:1700px){
  .analysis{padding-top:16px;padding-bottom:12px}
  .insight{min-height:64px}
  .scene-heading{padding-top:20px;padding-bottom:20px}
}
@media(max-height:820px) and (min-width:1000px){
  .analysis{padding-top:9px;padding-bottom:8px}
  .metrics{margin-top:7px}
  .length-track{margin-top:8px}
  .insight{min-height:49px;padding:7px 10px;margin:6px 0}
}
@media(max-width:760px){
  body{background-position:60% top}
  .page-header::before{inset:-18px -13px -10px;background:linear-gradient(90deg,#f5fcfff5,#eff9ff8c)}
  .scene{background:#d8eff7ed}
  .player{padding:6px 8px}
}
/* Lift the distant mountain ridge into the title band, while covering the full page. */
body{background-size:max(100vw, calc(177.78vh + 142.22px)) auto;background-position:center -80px}
@media(max-width:760px){body{background-position:60% -80px}}

/* Separate the soft environment from the sharp teaching content. */
body{background:#e4f0f5;isolation:isolate}
body::before{content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;background:linear-gradient(#e9f5fc42,#e9f5fc42),url('/assets/environment-4e37944b5936e352.webp') center -68px / max(100vw, calc(177.78vh + 142.22px)) auto no-repeat;filter:blur(3px) saturate(.72);opacity:.78}
.analysis,.geometry{background:linear-gradient(125deg,#f8fcff,#edf7fd);backdrop-filter:none}
.scene-heading{background:linear-gradient(90deg,#2b829fe8,#5b9bbacb);backdrop-filter:none}
.scene-note{background:#f4fbfff5}
.page-header{text-shadow:0 1px 3px white}
.small-label,.track-legend,.graph-caption{color:#547487}
.metrics span,.insight p{color:#4f6f84}
.run-status{position:absolute;right:17px;top:88px;max-width:65%;padding:9px 13px;border:1px solid #fff;border-radius:8px;background:#f9fcfff0;box-shadow:0 3px 12px #284e6821;color:#315e78;font-size:clamp(11px,.9vw,16px);font-weight:600;pointer-events:none}
#lesson[data-run-playing="true"] .scene{box-shadow:0 0 0 2px #f3ba5666,0 5px 22px #2149661a}
@media(max-height:820px) and (min-width:1000px){.run-status{top:72px;font-size:11px}}
@media(max-width:760px){body::before{background-position:center top,60% -68px}.run-status{top:62px;font-size:9px;right:10px;max-width:80%;padding:6px 8px}.scene-heading p{color:white}}

.fullscreen-notice{position:fixed;z-index:1000;left:50%;bottom:20px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;background:#f5fbff;color:#173c59;box-shadow:0 4px 24px #16374c40;font-size:14px}