:root{--paper:#f6f5ef;--panel:#fff;--ink:#203535;--muted:#506662;--line:#cbd7d1;--teal:#126e66;--wash:#eaf3ef;--rust:#a14629;--rustwash:#fcf0e9;--math:Cambria,Georgia,'Times New Roman',serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.45 'Segoe UI',Arial,sans-serif}button,select{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:9px 15px;cursor:pointer}button:hover:not(:disabled){background:var(--wash);border-color:var(--teal)}button:disabled{opacity:.43;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #b16d24;outline-offset:4px}button.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:650}button.primary:hover{background:#07534e}button.quiet{background:transparent;border-color:transparent}button[aria-pressed=true]{background:var(--wash);border-color:var(--teal);color:var(--teal)}a{color:var(--teal);text-underline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:clamp(29px,2.6vw,39px);font-weight:650;line-height:1.15;letter-spacing:-.035em}h2{font-size:25px;line-height:1.2}h3{font-size:19px}.masthead,.lesson-nav,main,.controls,.folio{max-width:1440px;margin-inline:auto}.masthead{display:flex;align-items:center;justify-content:space-between;padding:20px 36px 12px;gap:18px}.brand{display:flex;align-items:center;gap:14px}.brand svg{width:42px;stroke:var(--teal);stroke-width:2;fill:var(--teal)}.brand strong{font-size:19px;display:block;line-height:1.2}.brand span{font-size:15px;display:block}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.07em;margin-top:5px;text-transform:uppercase}.utilities{display:flex;font-size:14px;gap:2px}.lesson-nav{display:flex;gap:6px;padding:6px 36px 14px;border-bottom:1px solid var(--line)}.lesson-nav button{background:transparent;border:0;color:var(--muted);font-size:15px}.lesson-nav button[aria-current=page]{background:var(--ink);color:#fff}.lesson-nav span{font-size:11px;opacity:.7;margin-right:8px}main{padding:22px 36px 24px}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.intro>p{max-width:380px;color:var(--muted);font-size:16px}.eyebrow{color:var(--teal);font-size:11px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;margin-bottom:8px}.stage{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.5fr);background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 36px #244b4209}.algebra{padding:25px 28px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;gap:15px}.math{font-family:var(--math);font-weight:400;line-height:1.3;letter-spacing:0;white-space:nowrap}.math i{font-family:var(--math)}.original{font-size:42px}.operation{font-size:32px;min-height:62px;display:flex;align-items:center}.solved{font-size:39px}.math-label{color:var(--muted);font-size:12px;letter-spacing:.065em;text-transform:uppercase;margin-bottom:4px}.frac{display:inline-flex;vertical-align:middle;flex-direction:column;text-align:center;line-height:1.13;margin:0 .11em;font-size:.9em}.frac>span:first-child{border-bottom:1.5px solid;padding:0 .12em .12em}.frac>span:last-child{padding:.12em .12em 0}.negative{color:var(--rust)}.positive{color:var(--teal)}.symbol-change{color:var(--rust);padding:0 .03em}.placeholder{font:16px/1.5 'Segoe UI',Arial,sans-serif;color:var(--muted);white-space:normal}.action-hint{display:block;margin-top:10px;color:var(--teal)}.graph-area{padding:22px 25px 18px;min-width:0;display:flex;flex-direction:column;justify-content:center}.graph-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:var(--muted)}.graph-foot{font-size:16px;margin-top:4px;min-height:44px}.graph{width:100%;height:auto;overflow:visible;display:block;max-height:195px}.axis{stroke:#849591;stroke-width:1.4;fill:none}.tick{stroke:#849591;stroke-width:1.2}.tick-label{fill:var(--muted);font:23px var(--math)}.var{fill:var(--ink);font:italic 25px var(--math)}.boundary-guide{stroke:var(--rust);stroke-width:2;stroke-dasharray:5 5;fill:none}.boundary-label{fill:var(--rust);font:17px 'Segoe UI',sans-serif}.solution-ray{stroke:var(--teal);stroke-width:6;fill:none}.ray-head{fill:var(--teal)}.endpoint{stroke:var(--teal);stroke-width:3}.closed{fill:var(--teal)}.open{fill:#fff}.insight{margin-top:17px;display:flex;gap:13px;font-size:18px;align-items:start}.insight .mark{color:var(--teal);font:26px var(--math);line-height:1.1}.rule{background:var(--wash);border-left:3px solid var(--teal);padding:12px 17px;border-radius:0 9px 9px 0;line-height:1.45}.hint{font-size:14px;color:var(--muted);line-height:1.5}.reflection{width:100%;max-height:305px;display:block}.reflection .number{font:26px var(--math);fill:var(--ink)}.reflection .axis-name{font:12px 'Segoe UI',sans-serif;fill:var(--muted);letter-spacing:1px}.zero-guide{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6}.map-line{fill:none;stroke-width:2.5;opacity:.65}.map-a{stroke:var(--teal)}.map-b{stroke:var(--rust)}.point-a{fill:var(--teal);stroke:#fff;stroke-width:2}.point-b{fill:var(--rust);stroke:#fff;stroke-width:2}.travel-dot{stroke:#fff;stroke-width:2;opacity:0}.reflection .mapping-note{fill:var(--muted);font:14px 'Segoe UI',sans-serif}.retrieval{margin-top:14px}.retrieval summary,.graph-key summary{cursor:pointer;font-size:14px;color:var(--teal);padding:6px 0}.retrieval-content{background:white;border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}.retrieval-content .math{font-size:27px}.retrieval-result{width:100%;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:25px;flex-wrap:wrap}.retrieval-result .graph{max-width:370px;height:105px}.boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.boundary-card{background:white;border:1px solid var(--line);border-radius:16px;padding:22px 26px;min-width:0}.boundary-card h2{font-size:21px;margin-bottom:14px}.boundary-card .operation{margin:12px 0}.boundary-card .solved{margin:6px 0}.boundary-card .graph{max-height:133px;margin-top:6px}.boundary-card .graph-foot{min-height:25px}.checks{background:white;border:1px solid var(--line);border-radius:14px;padding:17px 22px;margin-top:16px}.checks-header{display:flex;gap:18px;justify-content:space-between;align-items:center;margin-bottom:13px}.check-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.check-item{border-left:2px solid var(--line);padding-left:15px}.check-item .math{font-size:26px;margin:5px 0}.truth{font-size:13px;color:var(--teal);font-weight:650}.truth.false{color:var(--rust)}.extra-check{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}.extra-check button{font-size:14px;min-height:40px;padding:7px 12px}.problem-picker{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:17px}.problem-picker label{font-size:14px;font-weight:600}.problem-picker select{min-width:220px}.problem-picker .hint{margin-left:auto}.same-relation{font-size:14px;color:var(--teal);white-space:normal;font-family:'Segoe UI',Arial,sans-serif;margin-top:5px}.graph-key{margin-top:16px}.key-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px}.key-item{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}.key-item .math{font-size:26px;color:var(--ink)}.key-item svg{width:76px;height:24px;flex-shrink:0}.key-item .endpoint{r:5px;stroke-width:2px}.key-item .solution-ray{stroke-width:3}.controls{padding:17px 36px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:17px;align-items:center}.step-info>span{font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;font-weight:700}.step-info p{font-size:14px;margin-top:4px}.transport,.motion-controls{display:flex;gap:7px;align-items:center}.transport button{font-size:15px}.transport #next{min-width:180px}.motion-controls{font-size:12px}.motion-controls button,.motion-controls select{font-size:12px;padding-inline:9px}.motion-controls label{font-size:11px;color:var(--muted)}.folio{padding:8px 36px 18px;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px}dialog{border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);max-width:740px;width:calc(100% - 32px);max-height:90dvh;padding:28px;box-shadow:0 30px 90px #12342c35}dialog::backdrop{background:#183730e6}dialog p,dialog ol{margin:16px 0}dialog li{margin:12px 0}.dialog-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.dialog-header>button{font-size:25px;padding:4px 13px}.dialog-header h2{font-size:28px}#paper-dialog{text-align:center;max-width:800px}#paper-dialog .math{font-size:40px;margin-block:22px}#paper-dialog .dialog-header{text-align:left}#paper-dialog #paper-prompt{margin:25px 0}.skip{position:fixed;top:-80px;left:16px;z-index:10;background:white;padding:10px}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}.hidden{display:none!important}body:fullscreen{overflow:auto}
@media(min-width:1100px) and (max-height:950px){.masthead{padding-top:12px;padding-bottom:6px}.lesson-nav{padding-bottom:10px}main{padding-top:19px;padding-bottom:17px}.intro{margin-bottom:16px}.algebra{padding:20px 24px;gap:13px}.reflection{max-height:275px}.original{font-size:39px}.graph-area{padding:17px 22px}.boundary-card{padding:19px 24px}.boundary-card .operation{margin:9px 0}.controls{padding-top:12px;padding-bottom:12px}}
@media(max-width:1150px){.masthead,.lesson-nav,.controls,.folio{padding-inline:24px}main{padding-inline:24px}.intro>p{max-width:310px;font-size:15px}.controls{grid-template-columns:1fr auto}.motion-controls{grid-column:1/-1;justify-content:flex-end}.stage{grid-template-columns:minmax(290px,1fr) minmax(0,1.25fr)}.algebra{padding:22px}.original{font-size:37px}.operation{font-size:29px}.graph-area{padding:20px}.key-item{gap:7px}.key-item span:last-child{font-size:12px}}
@media(max-width:780px){.masthead{flex-wrap:wrap;gap:8px;padding:17px 18px 7px}.brand{width:100%;gap:11px}.brand strong{font-size:18px}.brand span{font-size:15px}.brand small{font-size:10px}.brand svg{width:34px}.utilities{width:100%;gap:3px;font-size:13px}.utilities button{padding:7px 11px}.lesson-nav{padding:8px 16px 13px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.lesson-nav button{font-size:14px;padding:9px 7px}.lesson-nav span{display:none}main{padding:21px 18px}.intro{display:block}.intro>p{max-width:none;margin-top:12px;font-size:15px}h1{font-size:31px}.stage{grid-template-columns:1fr}.algebra{padding:21px;border-right:0;border-bottom:1px solid var(--line)}.original{font-size:38px}.operation{font-size:30px}.solved{font-size:37px}.graph-area{padding:20px 15px}.reflection{max-height:none}.reflection .number{font-size:32px}.reflection .axis-name{font-size:15px}.reflection .mapping-note{font-size:16px}.graph .tick-label{font-size:31px}.graph .var{font-size:30px}.graph .endpoint{r:10px;stroke-width:3px}.graph-foot{font-size:15px}.insight{font-size:17px}.boundary-grid{grid-template-columns:1fr}.boundary-card{padding:21px}.boundary-card .graph{max-height:155px}.check-list{grid-template-columns:1fr;gap:13px}.check-item .math{display:inline-block;margin:3px 10px 3px 0}.checks-header{align-items:start;flex-direction:column;gap:6px}.checks{padding:19px}.problem-picker{gap:8px;display:block}.problem-picker label{display:block;margin-bottom:6px}.problem-picker select{width:100%}.problem-picker .hint{margin-top:8px}.key-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.key-item{flex-wrap:wrap}.key-item span:last-child{width:100%}.controls{padding:16px 18px;grid-template-columns:1fr;gap:12px}.transport{justify-content:space-between}.transport #next{flex:1;min-width:0}.motion-controls{justify-content:space-between;gap:6px}.motion-controls label{display:none}.motion-controls select{margin-left:auto}.folio{padding:8px 18px 18px;flex-wrap:wrap;gap:6px}.retrieval-content{padding:15px;gap:12px}.retrieval-result{gap:12px}.retrieval-result .math{font-size:25px}dialog{padding:22px}.dialog-header h2{font-size:24px}#paper-dialog .math{font-size:34px}.rule{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.masthead,.lesson-nav,.controls,.folio,dialog,.utilities{display:none}main{padding:0}.stage{box-shadow:none}body{background:white}}

/* Keep the paper's three connected representations together at classroom widths. */
.boundary-grid{grid-template-columns:1fr 1fr 1.05fr;align-items:stretch}.boundary-grid .checks{margin:0;padding:22px}.boundary-grid .checks-header{display:block;margin-bottom:13px}.checks-header>.math{font-size:30px;margin:10px 0 6px}.boundary-grid .check-list{grid-template-columns:1fr;gap:11px}.boundary-grid .check-item .math{display:inline-block;font-size:25px;margin:2px 8px 2px 0}.boundary-grid .check-item .truth{display:block}.boundary-grid .extra-check .math{font-size:23px}.boundary-card h2{font-size:20px}.boundary-card .original{font-size:36px}.boundary-card .operation{font-size:29px}.boundary-card .solved{font-size:35px}.boundary-card .graph .tick-label{font-size:31px}.boundary-card .graph .var{font-size:31px}
@media(min-width:1100px) and (max-height:950px){.boundary-card{padding:20px}.boundary-card .graph{max-height:115px}.boundary-card .operation{margin:10px 0}.boundary-card .graph-foot{font-size:15px}.boundary-grid .checks{padding:20px}.boundary-grid .check-item .math{font-size:23px}.boundary-grid .check-list{gap:8px}.boundary-grid .extra-check{margin-top:10px}.boundary-grid .hint{font-size:13px}.boundary-grid .checks-header>.math{font-size:28px}}
@media(min-width:781px) and (max-width:1099px){.boundary-grid{grid-template-columns:1fr 1fr}.boundary-grid .checks{grid-column:1/-1}.boundary-grid .check-list{grid-template-columns:repeat(3,minmax(0,1fr))}.boundary-grid .checks-header{display:flex}.boundary-grid .checks-header>.math{margin:0}.boundary-grid .check-item .math{font-size:23px}}
@media(max-width:780px){.boundary-grid{grid-template-columns:1fr}.boundary-grid .checks{padding:21px}.boundary-grid .check-item .math{font-size:24px}.boundary-card .graph .tick-label{font-size:31px}}

.boundary-grid .check-item .hint .math{display:inline;font-size:16px;margin:0}.boundary-grid .check-item>.math{display:block;margin:3px 0}.boundary-grid .check-item .truth{display:block}