:root{--accent:#167e79;--ink:#293f49;--muted:#5e7179;--line:#cbd5d8;--raw:#98622f;background:#f5f7f6;color:var(--ink);font:16px system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0}header,main{max-width:1200px;padding-inline:28px;margin:auto}header{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.875rem}header>div{display:flex;gap:8px}a{color:var(--accent);text-underline-offset:3px}button,input,select{font:inherit;color:inherit}button,select{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 12px}button{cursor:pointer}button:hover:enabled{background:#e6efec;border-color:#8eaaa7}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b67c20;outline-offset:3px}input{width:112px;border:1px solid #9bb1b8;border-radius:5px;padding:8px;font-variant-numeric:tabular-nums;caret-color:var(--accent)}::selection{background:#c4e3dc;color:#173f38}.heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 0 14px}h1{font-size:1.65rem;margin:0;letter-spacing:-.025em;font-weight:650;line-height:1.25}.heading p{margin:6px 0 0;color:var(--muted);font-size:.9375rem}h2,h3{font-size:1rem;font-weight:650;margin:0}#reset{flex:none;background:transparent;font-size:.875rem}.toolbar{display:flex;align-items:center;gap:22px;padding:9px 0 12px;border-bottom:1px solid var(--line);font-size:.875rem}#reference-label{color:var(--muted)}#conditions{position:relative;margin-left:auto}summary{cursor:pointer}#conditions>div{position:absolute;right:0;top:30px;width:290px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:8px;z-index:4;box-shadow:0 8px 20px #203d4a18}#conditions label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}#conditions p{font-size:.8125rem;line-height:1.5;margin:0;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:36px;padding:18px 0}.bench{min-width:0}.bench-heading,.record-heading,.plot-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#stage-count,#count{font-size:.8125rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}#caliper{display:block;width:100%;height:auto;overflow:visible;margin:4px 0 0}#caliper text{font-family:inherit;fill:var(--ink)}#caliper .graduation{font-size:9px;fill:#506b76}#slider{cursor:ew-resize;touch-action:none}#reference-object{cursor:grab;touch-action:none}#reference-object:active{cursor:grabbing}#slider:focus-visible,#reference-object:focus-visible{outline:none;filter:drop-shadow(0 0 3px #b77c20)}#action-hint{font-size:1rem;line-height:1.5;color:var(--ink);min-height:24px;margin:0 0 10px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button,#explore-toggle{font-size:.875rem}button.next-action{background:var(--accent);border-color:var(--accent);color:#fff}button.next-action:hover:enabled{filter:brightness(.93);background:var(--accent)}aside{min-width:0;border-left:1px solid var(--line);padding-left:28px}#record-status{font-size:.875rem;line-height:1.45;color:var(--accent);margin:9px 0 10px;min-height:20px}#empty-record{color:var(--muted);font-size:.9375rem;line-height:1.6;max-width:29ch;margin:25px 0}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.9375rem}th,td{text-align:right;padding:7px 7px;border-bottom:1px solid #dbe3e4}th{font-size:.8125rem;color:var(--muted);font-weight:550}th:first-child,td:first-child{text-align:left}tr.new-row{background:#dceee6}tr.zero-row{border-top:2px solid var(--line)}.measurements{margin:14px 0 0}.measurements>div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:8px 0}.measurements dt{font-size:.875rem;color:var(--muted)}.measurements dd{margin:0;font-size:1rem;font-weight:550;font-variant-numeric:tabular-nums}.review{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr);gap:36px;border-top:1px solid var(--line);padding:19px 0 8px}.plot-heading{align-items:baseline}.legend{display:flex;gap:16px;font-size:.8125rem;white-space:nowrap}#raw-key{color:var(--raw)}#raw-key:before{content:'';display:inline-block;width:8px;height:8px;margin-right:5px;border:1.5px solid var(--raw);border-radius:50%;background:white}#corrected-key{color:var(--accent)}#corrected-key:before{content:'';display:inline-block;width:8px;height:8px;margin-right:5px;background:var(--accent);border-radius:50%}#plot{display:block;width:100%;height:auto;max-height:175px;margin-top:8px}#plot text{font-family:inherit;font-size:12px;fill:var(--muted)}#plot-note{font-size:.875rem;line-height:1.5;color:var(--muted);margin:1px 0}.reasoning p{font-size:.9375rem;line-height:1.6;margin:8px 0}#formula{color:var(--muted);font-size:.875rem;margin-top:12px}#result-equation{font-size:1.25rem;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.015em}#conclusion{font-weight:550}#practice-toggle{padding:3px 0;border:0;background:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-size:.8125rem;margin-top:4px}.calculation{padding-top:12px}#substitution{font-variant-numeric:tabular-nums;margin:8px 0}.answer-row{display:flex;align-items:center;gap:8px}.answer-row button{font-size:.875rem}#feedback{font-size:.875rem;line-height:1.5;margin:8px 0}.good{color:#176943}.bad{color:#9b4930}.workspace[data-phase=finished] .actions,.workspace[data-phase=finished] #action-hint{display:none}.workspace[data-phase=finished] #caliper{margin-bottom:8px}.workspace[data-phase=finished] .bench-heading{color:var(--muted)}footer{display:flex;justify-content:space-between;gap:24px;padding:14px 0 18px;font-size:.8125rem;color:var(--muted)}footer details{flex:1}footer p{max-width:95ch;line-height:1.65;font-size:.875rem}footer>span{white-space:nowrap}[hidden]{display:none!important}body.embed>header{display:none}
@media(max-width:900px){header,main{padding-inline:20px}.layout{grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:22px}aside{padding-left:20px}.review{grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:24px}.heading{align-items:flex-start}h1{font-size:1.45rem}}
@media(max-width:650px){header,main{padding-inline:14px}.heading{gap:12px;padding-top:12px}h1{font-size:1.3rem}.heading p{font-size:.875rem}.toolbar{gap:8px 12px;flex-wrap:wrap}#conditions{font-size:.8125rem}#conditions>div{right:0;width:min(290px,90vw)}.layout,.review{display:flex;flex-direction:column;gap:20px;padding:16px 0}aside{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.bench-heading h2{font-size:.9375rem}#action-hint{font-size:.9375rem}.actions{gap:6px}.actions button{padding:8px;font-size:.8125rem}.review{gap:18px}.plot-heading{flex-wrap:wrap}#plot{max-height:none}#plot-note{font-size:.8125rem}.reasoning{padding-top:4px}#empty-record{margin:15px 0;max-width:none}#result-equation{font-size:1.1rem}footer>span{display:none}.workspace[data-phase=finished] .layout{gap:14px}#slider text[style*="28px"]{font-size:32px!important}}
@media(prefers-reduced-motion:no-preference){tr.new-row{animation:record-arrival 1.6s ease-out both}.review{animation:evidence-arrival .3s ease-out both}@keyframes record-arrival{from{background:#b9dfcf}to{background:#dceee6}}@keyframes evidence-arrival{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}

/* Apparatus gestures lead; replacement buttons stay behind an optional entry. */
.bench-options{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}#explore-toggle{border:0;background:transparent;color:var(--accent);padding:3px 0;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}

/* Attention belongs to the captured reading, then its row, then its graph point.
   The instrument and prior records stay in place throughout. */
.lesson-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:9px 0 12px;min-height:0}.lesson-actions button{font-size:.875rem}#explain{background:var(--accent);color:white;border-color:var(--accent)}#revisit,#pause-story{border:0;padding:5px 0;background:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.row-link{padding:0 3px;border:0;background:transparent;color:var(--accent);min-width:22px;font-size:inherit}.row-link:disabled{color:var(--ink);opacity:1}.row-link:enabled{text-decoration:underline;text-underline-offset:3px}tr.arriving .raw-cell span{visibility:hidden}tr.arriving .raw-cell{background:var(--accent-soft,#e8f6f3)}tr.selected-row{background:#e2efe9;box-shadow:inset 3px 0 var(--accent)}tr.range-end .raw-cell{border-bottom:2px solid var(--raw)}.plot-row{cursor:pointer}.plot-row:focus-visible{outline:none;filter:drop-shadow(0 0 2px var(--accent))}.selected-point text{font-weight:700;fill:var(--raw)!important}#point-link{font-size:.875rem;line-height:1.5;margin:8px 0 0;color:var(--accent);min-height:2.6em}#comparison{white-space:pre-line;font-variant-numeric:tabular-nums}#reading-transfer{position:fixed;z-index:30;pointer-events:none;width:112px;text-align:center;padding:5px 3px;border:1px solid var(--accent);border-radius:4px;background:#f5faf7;color:var(--ink);font:550 16px ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums;box-shadow:0 2px 5px #203d4a14}#evidence-link{position:fixed;inset:0;width:100vw;height:100vh;z-index:25;pointer-events:none;overflow:visible}#evidence-link path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 5;opacity:.65}.workspace[data-phase=mapping] .bench-heading,.workspace[data-phase=stats] .bench-heading,.workspace[data-phase=correction] .bench-heading{color:var(--accent)}.workspace[data-presentation=reading-transfer] .readout-emphasis{stroke:var(--accent)}.review{animation:none}tr.new-row{animation:none}#result-equation{font-size:1.15rem}#caliper{margin-bottom:2px}.workspace[data-phase=done] #action-hint{display:block}
@media(max-width:650px){.lesson-actions{gap:10px}.lesson-actions button{font-size:.8125rem}#reading-transfer{width:100px;font-size:14px}#point-link{min-height:0}}
@media(prefers-reduced-motion:reduce){#evidence-link{display:none}.readout-emphasis{stroke-width:3}}

.lesson-actions:not(:has(button:not([hidden]))){display:none}.heading{padding-top:12px;padding-bottom:11px}.review{padding-top:15px;gap:30px}.layout{padding-top:15px;padding-bottom:15px}.reasoning p{margin:6px 0}#action-hint{margin-bottom:7px}#conclusion{font-size:.875rem}

/* Comparison reframe: keep the real instrument as context, bring row and point
   into the same desktop view. The entire SVG scales together, never its jaws. */
#caliper{max-width:100%;transition:max-width .5s cubic-bezier(.4,0,.2,1)}
.workspace[data-focus=compare] #caliper{max-width:460px}
body:has(#calibration-panel:not([hidden]) .workspace[data-focus=compare]) .heading{padding:7px 0 8px}
body:has(#calibration-panel:not([hidden]) .workspace[data-focus=compare]) h1{font-size:1.35rem}
body:has(#calibration-panel:not([hidden]) .workspace[data-focus=compare]) .heading p{font-size:.875rem;margin-top:3px}
.workspace[data-focus=compare] .layout{padding-top:12px;padding-bottom:12px;gap:30px}
.workspace[data-focus=compare] .lesson-actions{margin:5px 0 8px}
.workspace[data-focus=compare] #action-hint{font-size:.9375rem;margin-bottom:5px}
.workspace[data-focus=compare] .review{padding-top:12px}
.workspace[data-phase=correction] #comparison,.workspace[data-phase=done] #comparison{color:var(--muted);font-size:.875rem}
@media(prefers-reduced-motion:reduce){#caliper{transition:none}}
@media(max-width:650px){.workspace[data-focus=compare] #caliper{max-width:100%}}
@media(min-width:651px){.workspace[data-focus=compare] .lesson-actions{display:inline-flex;vertical-align:baseline;margin:4px 16px 6px 0}.workspace[data-focus=compare] .bench-options{display:inline-flex;vertical-align:baseline;gap:16px}}

/* Keep the active evidence readable when the instrument becomes context. */
.workspace[data-focus=compare] #caliper .graduation{visibility:hidden}.workspace[data-focus=compare] #slider text[style*="12px"]{font-size:18px!important}.plot-area .lesson-actions{margin-top:12px}.plot-area .lesson-actions button{font-size:.9375rem}#comparison [data-mean-term],#result-equation [data-zero-term]{display:inline-block}#reading-transfer{border:0;box-shadow:none;background:#f5f7f6;font-size:1rem}

.workspace[data-focus=compare] .layout{padding-block:10px}.workspace[data-focus=compare] .review{padding-top:10px}body:has(#calibration-panel:not([hidden]) .workspace[data-focus=compare]) footer{padding-block:9px}.workspace[data-focus=compare] #slider text[style*="12px"]{font-size:20px!important}

/* Apparatus itself responds to pointer and keyboard selection. */
#slider:hover,#slider:focus-visible,#reference-object:hover,#reference-object:focus-visible{filter:drop-shadow(0 0 2px #0f766e80);outline:none}
#caliper[data-dragging="slider"] #slider,#caliper[data-dragging="reference-object"] #reference-object{filter:drop-shadow(0 0 3px #0f766e)}