/* Drawing and analysis figures */
.drawing-panel{margin-bottom:22px}.drawing-panel .schematic{margin:0 25px 20px;border:1px solid #d0c7ae;background:#f8f5eb;border-radius:2px;overflow:hidden}.visual-intro{display:flex;justify-content:space-between;gap:1rem;padding:12px 18px;border-bottom:1px solid #d7ceba;background:#f1ebda;color:#5f6258;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.09em}.beam-visual{width:100%;display:block;max-height:none!important;touch-action:pan-y}.beam-visual .v-caption{font:700 10px ui-monospace,monospace;letter-spacing:.11em;fill:#5e6f61}.beam-visual .v-label,.beam-visual .v-note,.beam-visual .v-dimtext{font:700 10px ui-monospace,monospace;fill:#263f37}.beam-visual .v-note{font-weight:400;fill:#68746a}.beam-visual .v-dimtext{letter-spacing:.05em}.v-beam{fill:none;stroke:#263d35;stroke-width:10}.v-support,.v-section{fill:#f9f6ea;stroke:#263d35;stroke-width:2}.v-load{fill:none;stroke:#bc553a;stroke-width:2}.v-dimension{fill:none;stroke:#758479;stroke-width:1.4;stroke-dasharray:4 3}.v-brace{stroke:#d28234;stroke-width:4}.v-brace-dot{fill:#d28234}.diagram-hotspot{cursor:pointer;outline:none}.diagram-hotspot circle{fill:#f8f4e7;stroke:#bf563b;stroke-width:2}.diagram-hotspot text{font:700 12px ui-monospace,monospace;fill:#a33e2a;pointer-events:none}.diagram-hotspot:hover circle,.diagram-hotspot:focus circle,.diagram-hotspot.is-active circle{fill:#bd5539;stroke:#742e20;stroke-width:3}.diagram-hotspot:hover text,.diagram-hotspot:focus text,.diagram-hotspot.is-active text{fill:white}.visual-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d7ceba}.guide-item{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;background:#f9f6ec;border:0;border-right:1px solid #e3dccb;border-bottom:1px solid #e3dccb;padding:10px 12px;color:#263f37;cursor:pointer}.guide-item:hover,.guide-item:focus-visible,.guide-item.is-active{background:#e8e0ca;outline:2px solid #ba573e;outline-offset:-2px}.guide-number{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid #bd5a41;border-radius:50%;color:#a94831;font:700 10px ui-monospace,monospace}.guide-item strong,.guide-item small{display:block;overflow-wrap:anywhere}.guide-item strong{font-size:11px}.guide-item small{font-size:10px;color:#6c7569;margin-top:3px}.guide-arrow{margin-left:auto;color:#ba573e}.visual-footnote{margin:0;padding:11px 15px;color:#657468;font-size:11px;line-height:1.5}.drawing-panel .drawing-footer{display:none}.chart-area{height:auto;min-height:150px;background:none}.response-svg{width:100%;height:auto!important;overflow:visible;cursor:crosshair}.chart-gridline{fill:none;stroke:#e7e4d8;stroke-width:1}.chart-zero{stroke:#6e7d71;stroke-width:1.3}.chart-fill{fill:#3e7166;fill-opacity:.12}.chart-line{fill:none;stroke:#276355;stroke-width:3;stroke-linejoin:round}.chart-cursor{stroke:#c36a44;stroke-width:1.5;stroke-dasharray:4 4}.chart-point{fill:#c36a44;stroke:#fff;stroke-width:2}.chart-area svg text.chart-axis{fill:#506256;font:10px ui-monospace,monospace}.diagram-controls{margin:0 25px 20px;padding:16px;background:#f4f1e6;border:1px solid #ddd5c0}.diagram-controls-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.diagram-controls-header span{display:block;color:#9e5940;font:700 9px ui-monospace,monospace;letter-spacing:.08em}.diagram-controls-header strong{display:block;margin-top:5px;font-size:14px}.diagram-controls-header output{font:700 13px ui-monospace,monospace;color:#a14830}.diagram-controls label{display:block;font-size:11px;font-weight:700;margin:15px 0 4px}.diagram-controls label span{color:#788579;font-weight:400;margin-left:4px}.diagram-controls input[type=range]{width:100%;accent-color:#b65b3d;cursor:pointer}.diagram-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.diagram-readout span{padding:8px;background:#fffdf5;border:1px solid #e4dcc9;font:700 11px ui-monospace,monospace;color:#344d40}.diagram-controls p{color:#697a6d;font-size:10px;line-height:1.5;margin:10px 0 0}.chart-title{display:none}@media(max-width:650px){.drawing-panel .schematic{margin:0 12px 14px}.visual-intro{font-size:8px;padding:10px}.beam-visual{min-width:650px;width:100%}.schematic{overflow-x:auto!important}.visual-guide{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-item{padding:9px 8px}.diagram-controls{margin:0 15px 15px}.diagram-readout{gap:4px}.diagram-readout span{font-size:9px;padding:6px 4px}.chart-area{min-height:100px}}
@media print{.drawing-panel .schematic{margin:0;border:1px solid #aaa}.visual-guide{grid-template-columns:repeat(3,1fr)}.guide-item{padding:5px;break-inside:avoid}.diagram-controls{break-inside:avoid}.diagram-controls input[type=range]{display:none}.beam-visual{min-width:0}.response-svg{min-height:100px}.chart-area{min-height:100px}}
.chart-negative{fill:none;stroke:#a14c35;stroke-width:3;stroke-dasharray:8 4;stroke-linejoin:round}
@media(max-width:760px){.response-svg .chart-axis{font-size:18px}}
@media screen{
.drawing-panel .schematic{background:#070c16;border:1px solid #2a3a5e;border-radius:0}.visual-intro{background:#1e2a44;border-color:#2a3a5e;color:#3dd9c9;font:18px/1 ScafTerm,monospace}.beam-visual rect[fill="url(#visual-grid)"]{fill:#0b1220}#visual-grid path{stroke:#2a3a5e}.beam-visual .v-caption{fill:#3dd9c9}.beam-visual .v-label,.beam-visual .v-dimtext{fill:#e8ecf4}.beam-visual .v-note{fill:#bbc6d8}.v-beam{stroke:#e8ecf4}.v-support,.v-section{fill:#111a2e;stroke:#e8ecf4}.v-load{stroke:#ffa41b}.v-dimension{stroke:#aebbd1}.v-brace{stroke:#3dd9c9}.v-brace-dot{fill:#3dd9c9}.diagram-hotspot circle{fill:#0b1220;stroke:#ffa41b}.diagram-hotspot text{fill:#ffa41b}.diagram-hotspot:hover circle,.diagram-hotspot:focus circle,.diagram-hotspot.is-active circle{fill:#ffa41b;stroke:#ffc266}.diagram-hotspot:hover text,.diagram-hotspot:focus text,.diagram-hotspot.is-active text{fill:#070c16}.visual-guide{border-color:#2a3a5e}.guide-item{background:#111a2e;border-color:#2a3a5e;color:#e8ecf4}.guide-item:hover,.guide-item:focus-visible,.guide-item.is-active{background:#1e2a44;outline-color:#3dd9c9}.guide-number{border-radius:0;border-color:#ffa41b;color:#ffa41b}.guide-item small,.visual-footnote{color:#b3bfd2}.guide-arrow{color:#3dd9c9}.diagram-controls{background:#0b1220;border-color:#2a3a5e}.diagram-controls-header span{color:#3dd9c9}.diagram-controls-header output{color:#ffa41b}.diagram-controls label span,.diagram-controls p{color:#b3bfd2}.diagram-controls input[type=range]{accent-color:#ffa41b}.diagram-readout span{background:#111a2e;border-color:#2a3a5e;color:#e8ecf4}.chart-gridline{stroke:#2a3a5e}.chart-zero{stroke:#aebbd1}.chart-fill{fill:#3dd9c9;fill-opacity:.16}.chart-line{stroke:#3dd9c9}.chart-negative{stroke:#ffa41b}.chart-cursor{stroke:#ffa41b}.chart-point{fill:#ffa41b;stroke:#070c16}.chart-area svg text.chart-axis{fill:#d6dfed}
}
/* Response diagrams: SVG is drawn from the same beam response as the readout. */
.chart-grid .chart{padding:16px 0 22px}.chart-area{display:block;min-height:0;height:auto;margin-top:0;background:none}.response-figure{min-width:0}.response-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:8px}.response-heading h3{margin:5px 0 0;font-size:15px;line-height:1.3}.response-kicker,.response-unit{font:700 10px/1.4 ui-monospace,monospace;letter-spacing:.06em}.response-kicker{color:#789080}.response-unit{white-space:nowrap;color:#668379}.response-svg{display:block;width:100%;height:auto!important;cursor:crosshair}.response-svg .chart-axis{font:14px ui-monospace,monospace!important;fill:#405a4c}.response-svg .chart-x-label{font-size:12px!important;letter-spacing:.03em}.chart-support-guide{fill:none;stroke:#98aa9b;stroke-width:1;stroke-dasharray:3 4}.chart-tick{stroke:#77897d;stroke-width:1.5}.chart-zero-mark{fill:#fff;stroke:#bc6b35;stroke-width:2}.response-extrema{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}.response-extrema div{border:1px solid #e4dcc9;background:#fffdf5;padding:9px 10px}.response-extrema span,.response-extrema strong{display:block;line-height:1.4}.response-extrema span{font:700 10px ui-monospace,monospace;letter-spacing:.04em;color:#7b8d7f}.response-extrema strong{font-size:11px;margin-top:4px;color:#28483b}.response-zero{margin:7px 0 0;font-size:11px;color:#6d7e72}
@media screen{.response-kicker{color:#3dd9c9}.response-unit,.response-zero{color:#b3bfd2}.response-svg .chart-axis{fill:#d6dfed}.chart-support-guide{stroke:#63718b}.chart-tick{stroke:#aebbd1}.chart-zero-mark{fill:#0b1220;stroke:#ffa41b}.response-extrema div{border-color:#2a3a5e;background:#0b1220}.response-extrema span{color:#9eacc3}.response-extrema strong{color:#e8ecf4}}
@media(max-width:650px){.response-heading h3{font-size:14px}.response-svg .chart-axis{font-size:17px!important}.response-svg .chart-x-label{font-size:15px!important}.response-extrema strong{font-size:11px}.chart-grid .chart{padding:14px 0 18px}}
@media print{.chart{break-inside:avoid}.response-heading h3{font-size:11pt}.response-extrema div{padding:4px 7px}.response-extrema strong,.response-zero{font-size:9pt}.response-svg .chart-axis{fill:#263b35!important}}
@media(max-width:650px){.response-svg .chart-x-tick{font-size:22px!important}.response-svg .chart-y-tick{font-size:18px!important}}

/* Screen-only response plots: restrained dividers, readable annotation, and
   a single teal response line with amber reserved for the active position. */
@media screen {
  .drawing-panel .schematic { background: #101b2c; border: 1px solid #293b54; border-radius: 4px; }
  .chart-grid { padding-top: 0; }
  .chart-grid .chart { border-top: 1px solid #293b54; padding: 23px 0 25px; }
  .response-heading { align-items: center; margin-bottom: 13px; }
  .response-heading h3 { margin: 4px 0 0; color: #ecf2f8; font: 600 15px/1.35 Inter, ui-sans-serif, system-ui, sans-serif; }
  .response-kicker { color: #a5b6c9; font: 600 10px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; }
  .response-kicker { display: none; }
  .response-unit { color: #adbdcf; font: 500 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; }
  .response-svg .chart-axis, .chart-area svg text.chart-axis { fill: #bbc9d8; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; }
  .chart-gridline { stroke: #293b54; }
  .chart-zero { stroke: #8393a7; stroke-width: 1.5; }
  .chart-support-guide { stroke: #62748a; }
  .chart-tick { stroke: #99aabd; }
  .chart-fill { fill: #65bdb4; fill-opacity: .12; }
  .chart-line { stroke: #74c8be; stroke-width: 3.2; }
  .chart-negative { stroke: #efb252; }
  .chart-cursor { stroke: #e9b566; stroke-width: 1.5; }
  .chart-point { fill: #efb252; stroke: #101b2c; }
  .chart-zero-mark { fill: #101b2c; stroke: #efb252; }
  .response-extrema { gap: 0; margin-top: 10px; border-top: 1px solid #293b54; border-bottom: 1px solid #293b54; }
  .response-extrema div { background: transparent; border: 0; padding: 10px 12px 10px 0; }
  .response-extrema div + div { border-left: 1px solid #293b54; padding-left: 14px; }
  .response-extrema span { color: #a9b8c9; font: 600 10px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .035em; }
  .response-extrema strong { color: #e6edf5; font: 600 12px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .response-zero { margin: 9px 0 0; color: #b4c1d1; font: 400 12px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
  .diagram-controls { padding: 18px 20px; background: #101b2c; border: 1px solid #293b54; border-radius: 4px; }
  .diagram-controls-header span { color: #99b6bd; font: 600 10px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; }
  .diagram-controls-header strong { color: #e8eef6; font: 600 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
  .diagram-controls-header output { color: #f1c578; font: 600 13px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .diagram-controls label { color: #d2dce8; font: 600 12px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
  .diagram-controls label span, .diagram-controls p { color: #b1bfd0; font: 400 11px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; }
  .diagram-controls input[type=range] { accent-color: #eab358; }
  .diagram-readout { gap: 0; border: 1px solid #293b54; border-radius: 3px; overflow: hidden; }
  .diagram-readout span { background: #142237; border: 0; padding: 9px 10px; color: #e7eef6; font: 600 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .diagram-readout span + span { border-left: 1px solid #293b54; }
}
@media screen and (max-width:650px) {
  .diagram-controls { padding: 15px; }
  .diagram-readout span { padding: 9px 6px; font-size: 10px; }
  .response-svg .chart-x-tick { font-size: 24px !important; }
  .response-svg .chart-y-tick { font-size: 22px !important; }
  .response-svg .chart-x-label { font-size: 18px !important; }
}