:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#183b40;background:#f5f4ed;font-synthesis:none;--a:#a54a2c;--b:#2862a0;--c:#20766c;--line:#d8ded6;--muted:#617675}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:auto;padding:18px 32px 10px}button,input,select{font:inherit;color:inherit}button{border:1px solid #c7d1c8;background:#fbfcf8;padding:8px 12px;border-radius:7px;cursor:pointer;min-height:36px}button:hover{background:#e9efe7}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #d4a43f;outline-offset:3px}button:disabled{cursor:default;opacity:.45}.primary{background:#21645b;color:white;border-color:#21645b}.primary:hover{background:#174c45}.header-actions,.toolbar,.steps{display:flex;gap:8px;align-items:center}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:16px}h1{font-size:30px;letter-spacing:-.7px;line-height:1.15;margin:4px 0 8px;font-weight:650}header p{margin:0;color:var(--muted);font-size:16px}.eyebrow{font-size:10px!important;letter-spacing:1.6px;font-weight:650;color:var(--muted);margin:0 0 7px!important}.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:28px}.apparatus{min-width:0}.toolbar{gap:6px;flex-wrap:wrap}.toolbar button{font-size:13px;padding:6px 10px}#stage{height:340px;position:relative;margin-top:4px;isolation:isolate}canvas,#overlay{position:absolute;inset:0;width:100%;height:100%;display:block}#overlay{overflow:visible;pointer-events:none}#overlay .handle{pointer-events:all;cursor:grab;touch-action:none;outline:none}#overlay .handle:active{cursor:grabbing}#overlay .handle:focus-visible .hit{stroke:#d4a43f;stroke-width:3}#overlay text{font:12px Inter,-apple-system,sans-serif;fill:#3d5c5d;paint-order:stroke;stroke:#f5f4ed;stroke-width:3px;stroke-linejoin:round}#overlay .handle text{font-size:15px;font-weight:700;stroke-width:4}#loading{position:absolute;inset:45% 0 auto;text-align:center;background:#f5f4ed;padding:10px}#retry{position:absolute;left:40%;top:58%}.legend{position:absolute;left:0;bottom:1px;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);pointer-events:none}.legend>span:not(:last-child){font-weight:700}#drag-note{margin-left:6px}.a{color:var(--a)}.b{color:var(--b)}.c{color:var(--c)}.instrument{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:10px 0 8px;min-height:45px}.instrument p{font-size:15px;font-weight:550;margin:0}.instrument>span{font-size:13px;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}#status[data-kind="contact"],#input-error{color:#974726}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.load{border-top:2px solid var(--color);padding-top:8px;min-width:0}.load-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:4px;font-size:14px;font-weight:600;color:var(--color)}.load-title output{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.load-fields{display:flex;gap:6px;align-items:center}.load-fields input{width:65px;min-width:0}.load-fields select{width:75px;min-width:0}input,select{padding:5px 4px;border-radius:5px;border:1px solid #c4d0c8;background:#fbfcf7;font-size:14px;height:32px}label .unit{font-size:12px;margin-left:3px}.small{font-size:12px;line-height:1.5;color:var(--muted)}#operation-note{margin:8px 0 0}#input-error{font-size:13px;margin:3px 0 0;min-height:16px}.reasoning{border-left:1px solid var(--line);padding-left:27px;padding-top:5px;min-width:0}h2{font-size:21px;font-weight:600;line-height:1.25;margin:8px 0 12px;letter-spacing:-.3px}#explanation{font-size:16px;line-height:1.5;margin:0;min-height:72px}#diagram{display:block;width:100%;max-height:235px;margin:8px 0}#diagram text{font-family:inherit;fill:#3d5c5d;font-size:13px;paint-order:stroke;stroke:#f5f4ed;stroke-width:4;stroke-linejoin:round}#components{font-size:14px;line-height:1.6;min-height:26px;font-variant-numeric:tabular-nums}#components table{width:100%;border-collapse:collapse;font-size:13px}#components th,#components td{text-align:right;padding:2px 6px;font-weight:400}#components th:first-child,#components td:first-child{text-align:left}#components tfoot{border-top:1px solid var(--line);font-weight:600}.steps{justify-content:space-between;margin-top:8px}#diagram-note{margin:10px 0 0}.trial-strip{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}.trial-strip>div:first-child{display:flex;align-items:baseline;gap:12px}.trial-strip h2{font-size:15px;margin:0}.trial-strip span{font-size:12px;color:var(--muted)}#records{display:flex;gap:8px;flex-wrap:wrap;min-height:32px;margin-top:8px}#records button{font-size:12px;min-height:30px;padding:5px 9px;background:transparent}#records button[aria-pressed="true"]{border-color:#297769;background:#e7efe6}footer{margin-top:12px;color:var(--muted);font-size:12px}footer p{max-width:960px;line-height:1.65}a{color:#28665e}details summary{cursor:pointer}body.embedded header{margin-bottom:15px}body.embedded #language{display:none}body.embedded main{padding-top:18px}body.embedded header .eyebrow{display:none}body.embedded h1{font-size:27px}@media(min-width:1300px){#stage{height:375px}}@media(max-width:850px){main{padding:18px}.workspace{grid-template-columns:1fr;gap:16px}.reasoning{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}#diagram{max-height:270px}#explanation{min-height:0}h1{font-size:25px}header{align-items:flex-start}.header-actions{flex-direction:column}#stage{height:340px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Captured forces become the foreground; the physical source stays beside them. */
.workspace.analysing{grid-template-columns:minmax(500px,.95fr) minmax(0,1.45fr)}
.analysing #stage{height:310px}.analysing #diagram{height:auto;max-height:none;aspect-ratio:auto;margin:12px 0}
.analysing #diagram text{font-size:17px}.analysing #explanation{min-height:72px}
.analysing .load-fields{gap:4px}.analysing .load-fields input{width:67px}.analysing .load-fields select{width:68px}
.analysing #components{margin-top:14px}.analysing #components table{font-size:16px}.analysing #components caption{text-align:left;font-size:14px;font-weight:600;margin-bottom:6px}.analysing #components th,.analysing #components td{padding:3px 8px}
@media(max-width:1000px){.workspace.analysing{grid-template-columns:1fr}.analysing .reasoning{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.analysing #diagram{max-height:none;max-width:660px;margin-left:auto;margin-right:auto}.analysing #explanation{min-height:0}}
@media(max-width:600px){.analysing #diagram{min-height:290px;aspect-ratio:auto}.analysing #diagram text{font-size:19px}.analysing .load-fields{flex-wrap:wrap}}


/* Formal Header owns navigation; keep the accepted bench and its Reset close. */
body.embedded main{padding:8px 16px 10px}

#overlay .handle:hover .hit{fill:#fff;stroke-width:3}#overlay .handle:active .hit{fill:#e2eee5;stroke-width:3}