:root{--ink:#183239;--muted:#62767a;--teal:#087f80;--line:#dce5e3;--bg:#f4f6f2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px system-ui,sans-serif}header{padding:22px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:#fff}.brand{font:bold 24px Georgia}.brand span{font:10px system-ui;letter-spacing:2px;margin-left:16px}main{max-width:1450px;margin:auto;padding:36px 5%}.intro h1{font:48px Georgia;margin:10px 0}.intro em{color:var(--teal);font-weight:normal}.intro>p:last-child{color:var(--muted);font-size:17px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:var(--teal)}nav{display:flex;gap:8px;margin:30px 0 20px}button{border:1px solid var(--line);border-radius:7px;background:white;padding:9px 13px;color:var(--ink);cursor:pointer;font:inherit;font-size:12px}button:hover{border-color:var(--teal)}nav button{padding:14px 22px;font-size:14px}nav .active{background:var(--ink);color:white;border-color:var(--ink)}.layout{display:grid;grid-template-columns:320px 1fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px}h2{font-size:16px;margin:0 0 12px}h3{font-size:15px}.hint{font-size:12px;color:var(--muted)}.charge{background:#f6f8f6;border-radius:8px;padding:12px;margin:12px 0}.charge-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}.fields{display:flex;gap:8px}.fields label{flex:1;min-width:0;font-size:11px;color:var(--muted)}input[type=number]{width:100%;padding:8px 5px;border:1px solid var(--line);border-radius:5px;font:14px system-ui;color:var(--ink);margin-top:4px}input:focus{outline:2px solid #8bd0ca}.check{display:flex;gap:8px;align-items:center;font-size:12px;margin:17px 0}.note{background:#eaf5f1;color:#35605b;border-radius:8px;padding:13px;font-size:12px;line-height:1.6}details{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.6}.scene{min-width:0}#plot{width:100%;display:block;background:#fbfcfa;border:1px solid #edf0eb;border-radius:8px;touch-action:none}#plot .movable{cursor:grab}#plot text{font-family:system-ui;paint-order:stroke;stroke:#fbfcfa;stroke-width:4;stroke-linejoin:round}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:16px}.result{padding:18px;background:var(--ink);color:#fff;border-radius:8px;font-size:19px;line-height:1.7;margin-top:14px}.result small{font-size:12px;color:#c5dedd;display:block}.calculation{margin-top:20px}.formula{font-family:Georgia,serif;font-size:19px;line-height:1.9;overflow-wrap:anywhere}.step{padding:18px 0;border-top:1px solid var(--line)}.step-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:25px}.aux{background:#f5f8f5;border-left:3px solid #96b8af;padding:14px;font-size:16px}.warning{color:#a43d28;background:#fff1e8;padding:14px;border-radius:7px}.tag{color:var(--teal);font-size:12px}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:26px 0}.pointbox{margin:12px 0}select{padding:8px;border:1px solid var(--line);border-radius:6px;background:white;width:100%;margin:8px 0}@media(max-width:900px){.layout{grid-template-columns:1fr}.intro h1{font-size:36px}.controls{order:2}.scene{order:1}.step-grid{grid-template-columns:1fr}header{gap:15px}.brand span{display:none}nav button{padding:12px 10px}main{padding:24px 4%}footer{gap:15px}}@media print{header,nav,.controls,button,footer{display:none}.layout{display:block}.panel{break-inside:avoid}.step{break-inside:avoid}main{padding:0}.intro h1{font-size:28px}#plot{max-height:350px}}
.vmark{display:inline-block;position:relative;padding-top:.15em}.vmark:before{content:'→';position:absolute;top:-.55em;left:0;right:0;font-size:.75em;text-align:center}.lesson{padding:18px;margin:20px 0;background:#edf5f1;border:1px solid #cadfd5;border-radius:10px}.lesson-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.lesson h2{margin:10px 0}.lesson-controls{display:flex;align-items:center;gap:12px;margin-top:16px}.lesson-controls button:last-child{background:#087f80;color:white}.progress{display:flex;gap:5px;margin-top:14px}.progress span{height:4px;flex:1;background:#d1e0d9}.progress .done{background:#087f80}math{font-size:1.18em;margin:14px 0;max-width:100%}.mathline{overflow-x:auto;padding:5px 2px}.result math{font-size:1.1em}.result .mathline{padding:0}.step-grid{grid-template-columns:1fr}.calculation .formula{font-family:Georgia,serif}button:disabled{opacity:.4;cursor:default}.stage-title{font:28px Georgia!important}.stage-explanation{line-height:1.7;color:#4f6964}@media print{.lesson-controls{display:none}math{font-size:1em}}
header{padding:12px 3%}main{max-width:1700px;padding:16px 3%}.intro{display:none}nav{margin:0 0 12px}nav button{padding:10px 18px}.teaching-workspace{display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(420px,1fr);gap:16px;align-items:start}.visual-column{min-width:0}.scene{padding:14px}.mouse-banner{background:#e5f3eb;color:#174e42;border:1px solid #a8d6bb;border-radius:7px;padding:10px 12px;margin:0 0 10px;font-size:13px;line-height:1.5}.scene #plot{height:clamp(230px,36vh,390px);width:100%}.scene .result{padding:6px 12px;margin-top:8px;font-size:14px}.scene .result math{margin:3px}.scene .legend{margin-top:8px}.scene .hint{margin:6px 0}.controls{padding:12px 14px;margin-top:10px}.controls .section-title h2{margin:0}.controls #charges{display:flex;gap:8px;flex-wrap:wrap}.charge{flex:1 1 180px;margin:7px 0;padding:8px}.charge-head{margin-bottom:3px}.controls .hint{margin:5px 0}.controls #pointTitle{margin:7px 0;font-size:13px}.controls #points .fields{max-width:320px}.controls .check{display:inline-flex;margin:8px 0;font-size:11px}.controls .note,.controls details{display:none}.calculation{margin-top:0;padding:18px;min-width:0}.lesson{margin:0 0 12px;padding:0 0 14px;background:none;border:0;border-bottom:1px solid var(--line)}.stage-title{font-size:24px!important;margin-top:14px!important}.stage-explanation{font-size:14px;margin:10px 0}.lesson-controls{display:grid;grid-template-columns:auto 1fr;gap:10px}.lesson-controls button{padding:13px 12px;line-height:1.4}.lesson-controls #next{text-align:left;font-weight:650}.read-first{font-size:12px;color:#52706a;border-top:1px solid var(--line);padding-top:13px}.sense{font-size:15px;line-height:1.7;background:#f0f6f1;padding:14px;border-radius:7px}.known{background:#f4f7f3;border-left:3px solid #88b2a0;padding:8px 13px;margin-bottom:12px}math{font-size:1.15em;margin:9px 0}.mathline{padding:4px 0}.calculation h3{font-size:13px;margin:14px 0 5px}footer{padding:12px 0}@media(min-width:1000px){.teaching-workspace{height:calc(100dvh - 140px)}.visual-column,.calculation{max-height:100%;overflow:auto}.calculation{scrollbar-gutter:stable}}@media(max-width:999px){.teaching-workspace{grid-template-columns:1fr}.scene #plot{height:300px}.calculation{margin-top:0}.intro{display:none}}@media print{.teaching-workspace{display:block;height:auto}.calculation,.visual-column{max-height:none;overflow:visible}.lessonNav,.mouse-banner{display:none}.scene #plot{height:300px}}
.previous-working{border:1px solid #c6ddd0;background:#f6faf6;border-radius:8px;padding:12px;margin-bottom:16px}.current-action{color:#087f80;border-bottom:2px solid #b6dace;padding-bottom:8px}.lesson-controls{position:sticky;bottom:0;background:white;padding:10px 0}#lessonNav{background:white}
#lessonNav .lesson-controls{grid-template-columns:110px minmax(180px,1fr);gap:16px;padding:12px 0 5px}#next{background:#087f80;border:2px solid #066666;color:#fff;min-height:58px;font-size:19px;font-weight:800;letter-spacing:1px;box-shadow:0 4px 0 #065b5b;text-align:center!important}#next:hover:not(:disabled){background:#056869;transform:translateY(-1px)}#next:focus-visible{outline:4px solid #ebbd4d;outline-offset:4px}#next:disabled{box-shadow:none}.next-preview{text-align:right;font-size:12px;color:#3d6962;margin:6px 0 0}.previous-working{padding:8px 12px}.previous-working math{margin:5px 0;font-size:1.05em}.calculation h3{margin-top:10px}.mathline{padding:2px 0}.read-first{margin-bottom:4px}
.katex-display{margin:.45em 0;text-align:left}.katex-display>.katex{text-align:left;white-space:nowrap}.mathline{overflow-x:auto;overflow-y:hidden;padding:8px 3px;line-height:1.5}.katex{font-size:1.08em}.previous-working .katex{font-size:1em}.result .katex{font-size:1em}.result .katex-display{margin:0}.potential-term{padding:10px 0;border-top:1px solid var(--line)}.calculation .known .mathline{padding:5px 2px}
.calc-row{padding:9px 0;border-bottom:1px solid #e4ece7}.calc-row:last-child{border-bottom:0}.calculation .calc-row h3{margin:0 0 4px;font-size:11px;letter-spacing:.3px;color:#58736a;font-weight:650}.calc-row .mathline{margin:0;padding:7px 0}.calc-row .katex-display{margin:0}.previous-working{background:#f8faf7;padding:10px 12px;margin-bottom:12px}.previous-working .calc-row{padding:7px 0}.previous-working .eyebrow{display:block;margin-bottom:5px}.principle-label{color:#087f80;background:#e8f4ee;border-left:3px solid #087f80;padding:10px 13px;font-weight:750;margin:10px 0}.stage-title .katex{font-size:1em}.stage-title{font:22px system-ui!important;line-height:1.5}.stage-explanation{font-size:13px;margin:8px 0}.lesson{padding-bottom:10px;margin-bottom:10px}.model-assumption{padding:11px;background:#f0f6f1;border-radius:7px;font-size:12px;line-height:1.6}.field-computation .katex,.total-computation .katex{font-size:.95em}.sense{padding:12px;font-size:14px}.sense p{margin:5px 0}.calculation .hint{margin:10px 0;font-size:11px}.mathline{scrollbar-width:thin}.teaching-workspace{grid-template-columns:minmax(350px,.8fr) minmax(540px,1.2fr)}@media(max-width:999px){.teaching-workspace{grid-template-columns:1fr}}@media print{.mathline{overflow:visible}}
/* Drawing steps keep action, navigation and diagram in the same horizontal view. */
.teaching-workspace.drawing-mode{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;height:auto;scroll-margin-top:10px}.drawing-mode .visual-column{overflow:visible;max-height:none}.drawing-mode .scene{position:sticky;top:10px}.drawing-mode .calculation{position:sticky;top:10px;max-height:calc(100dvh - 20px);overflow:auto;margin:0}.drawing-mode .scene #plot{height:clamp(220px,38vh,390px)}.drawing-mode .stage-title{font-size:20px!important}.drawing-mode .lesson-top{align-items:start}.drawing-mode .sense{font-size:13px;line-height:1.5}.drawing-mode #lessonNav .lesson-controls{grid-template-columns:auto 1fr;gap:8px}.drawing-mode #next{min-width:0;min-height:52px;font-size:17px}.drawing-mode .next-preview{font-size:11px}.drawing-mode .stage-explanation{line-height:1.5}.drawing-mode .mouse-banner{font-size:12px}.drawing-mode .scene .section-title{flex-wrap:wrap}.drawing-mode .scene .section-title h2{font-size:14px}.drawing-mode .read-first{line-height:1.5}@media(max-width:700px){.drawing-mode .panel{padding:10px}.drawing-mode .lesson-top{flex-wrap:wrap}.drawing-mode .stage-title{font-size:16px!important}.drawing-mode .stage-explanation,.drawing-mode .sense,.drawing-mode .model-assumption{font-size:12px}.drawing-mode .scene #plot{height:230px}.drawing-mode .mouse-banner{font-size:11px;padding:8px}.drawing-mode .read-first,.drawing-mode .next-preview{display:none}.drawing-mode #lessonNav .lesson-controls{grid-template-columns:1fr}.drawing-mode #previous{padding:6px}.drawing-mode #next{font-size:15px}.drawing-mode .progress{margin-top:8px}.drawing-mode .legend{font-size:11px}.drawing-mode .scene .hint{font-size:10px}}@media print{.teaching-workspace.drawing-mode{display:block}.drawing-mode .scene,.drawing-mode .calculation{position:static;max-height:none}}
.graph-locked #plot .movable{cursor:default}.graph-locked .mouse-banner{background:#f0f3ee;color:#506254;border-color:#d6dfd3}.graph-locked .controls{opacity:.65}.calculation-focus .calculation{border-top:4px solid #087f80;box-shadow:0 8px 25px #173a2a0c}.calculation-focus .stage-title{font-size:27px!important;font-weight:700!important;color:#075f60}.calculation-focus .stage-title .katex{font-size:1.18em}.calculation-focus .visual-column{opacity:.86}.calculation-focus .scene #plot{height:clamp(200px,30vh,310px)}.calculation-focus .stage-explanation{font-size:14px}.calculation-focus .controls{display:none}.graph-locked input:disabled{cursor:not-allowed}

/* Compare the resultant vector with the mathematical result without changing views. */
.teaching-workspace.result-focus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;height:auto;scroll-margin-top:10px}.result-focus .visual-column{overflow:visible;max-height:none}.result-focus .scene{position:sticky;top:10px}.result-focus .calculation{position:sticky;top:10px;max-height:calc(100dvh - 20px);overflow:auto;border-top:4px solid var(--teal)}.result-focus .controls{display:none}.result-focus .scene #plot{height:clamp(260px,45vh,470px)}.result-focus .stage-title{color:#075f60}.result-focus .scene .section-title{flex-wrap:wrap}.result-focus .mouse-banner{font-size:12px}@media(max-width:700px){.result-focus .panel{padding:10px}.result-focus .scene #plot{height:250px}.result-focus .stage-title{font-size:17px!important}.result-focus .lesson-top{flex-wrap:wrap}.result-focus #lessonNav .lesson-controls{grid-template-columns:1fr;gap:8px}.result-focus #next{min-width:0;font-size:15px}.result-focus .read-first,.result-focus .next-preview{display:none}.result-focus .scene .section-title h2{font-size:13px}}@media print{.teaching-workspace.result-focus{display:block}.result-focus .scene,.result-focus .calculation{position:static;max-height:none;overflow:visible}}

header{gap:14px;flex-wrap:wrap}.brand{flex:1;font-size:21px}.contact-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border-radius:7px;background:var(--teal);color:#fff;text-decoration:none;font-size:13px;font-weight:650}.contact-link:hover{background:#056869}.contact-link:focus-visible{outline:3px solid #ebbd4d;outline-offset:3px}@media(max-width:700px){.brand{flex-basis:100%;font-size:19px}header #reset{margin-left:auto}}

#plot{cursor:grab;user-select:none}#plot.panning,#plot.panning *{cursor:grabbing!important}.graph-locked #plot .movable{cursor:grab}

.casio-note{margin-top:16px;padding:14px;background:#edf5f1;border:1px solid #b9d8cc;border-radius:8px}.calculation .casio-note h3{font-size:14px;color:#075f60;margin:0 0 8px}.casio-note p{font-size:13px;line-height:1.6}.casio-note a{color:#075f60}

/* Individual field calculations start in view; the diagram remains directly above. */
.teaching-workspace.calculation-focus{grid-template-columns:minmax(0,1fr);height:auto}.calculation-focus .visual-column,.calculation-focus .calculation{max-height:none;overflow:visible}.calculation-focus .scene{max-width:900px;margin:0 auto}.calculation-focus .calculation{scroll-margin-top:12px;width:100%;position:static}.calculation-focus .visual-column{opacity:1}.calculation-focus .scene #plot{height:clamp(240px,35vh,340px)}