.sgd-page { background: #fff; }
.sgd-page .section { padding: 54px 0; }
.sgd-page .section.alt { background: #f3f7fa; }
.sgd-page .sgd-intro, .sgd-page .sgd-copy { max-width: 850px; }
.sgd-page h2 { font-size: 30px; line-height: 1.2; }
.sgd-page h3 { font-size: 19px; line-height: 1.3; }
.sgd-page .eyebrow { margin-bottom: 12px; letter-spacing: 0; }
.sgd-page p { font-size: 16px; }
.sgd-page .mx { white-space: normal; }
.sgd-vector { position: relative; display: inline-block; font-style: italic; }
.sgd-vector::before { content: "\2192"; position: absolute; left: 0; top: -.62em; width: 100%; font-size: .68em; text-align: center; font-style: normal; }
.sgd-instrument, .sgd-weight-instrument { margin-top: 28px; margin-bottom: 28px; padding: 22px; border: 1px solid #ccd5de; border-radius: 8px; background: #fff; }
.sgd-instrument, .sgd-page section { scroll-margin-top: 125px; }
.sgd-instrument-heading, .sgd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sgd-instrument-heading > span { font-size: 13px; color: var(--muted); }
.sgd-toolbar { margin: 18px 0; }
#sgdInstrument .reader-scene-controls .sgd-data-controls { width:100%; margin:0; padding:8px; border:0; gap:6px 16px; box-sizing:border-box; }
#sgdInstrument .reader-scene-controls .sgd-data-controls p { margin:4px 0 0; font-size:12px; line-height:1.4; }
#sgdInstrument #sgdDataNote { width:100%; }
#sgdInstrument .reader-scene-controls .sgd-data-controls #sgdDataStatus:empty { display:none; }
#sgdInstrument .sgd-adjustments { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:10px 24px; width:100%; align-items:end; }
#sgdInstrument .sgd-adjustments > * { min-width:0; }
#sgdInstrument .sgd-adjustments .sgd-rate-controls { grid-column:auto; grid-row:auto; border:0; }
#sgdInstrument .sgd-adjustments .sgd-rate-presets { margin:0 0 4px; }
#sgdInstrument .sgd-rate-caption { margin:4px 0 8px; font-size:12px; line-height:1.4; }
#sgdInstrument .sgd-update-controls .sgd-commands { margin-bottom:8px; }
#sgdInstrument #sgdTiming, #sgdInstrument #sgdModelContract, #sgdInstrument #sgdSelectedPass { margin:6px 0; font-size:13px; line-height:1.4; }
@media(max-width:700px) { #sgdInstrument .sgd-adjustments { grid-template-columns:minmax(0,1fr); } }
#sgdInstrument .sgd-local-plot-options { margin:8px 0; font-size:13px; }
#sgdInstrument .sgd-local-plot-options > summary { color:var(--blue); cursor:pointer; }
#sgdInstrument .sgd-local-plot-options .sgd-plot-options { margin:8px 0; padding:8px; }
#sgdInstrument .sgd-local-plot-options .sgd-plot-options p { font-size:12px; }
.sgd-page button, .sgd-page select { font: inherit; font-size: 13px; border: 1px solid #b9c4ce; border-radius: 4px; padding: 8px 10px; color: var(--ink); background: #fff; cursor: pointer; min-height: 36px; box-shadow: none; }
.sgd-page button:hover { border-color: var(--blue); background: #eff6fb; }
.sgd-page button[aria-pressed="true"] { color: #194d78; background: #e4f0f8; border-color: var(--blue); }
.sgd-page :focus-visible { outline: 3px solid #6a96bd; outline-offset: 3px; }
.sgd-segment, .sgd-commands { display: flex; flex-wrap: wrap; gap: 6px; }
.sgd-live-grid { display: grid; grid-template-columns: minmax(0,1fr) 275px; gap: 24px; }
.sgd-plot-column, .sgd-settings { min-width: 0; }
.sgd-settings { border-left: 1px solid var(--line); padding-left: 22px; }
.sgd-settings label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 750; }
.sgd-settings output, .sgd-settings dd { font-variant-numeric: tabular-nums; }
.sgd-page input[type="range"] { display: block; width: 100%; accent-color: var(--blue); height: 28px; margin: 8px 0; cursor: pointer; }
.sgd-rate-presets { margin: 8px 0 12px; }
.sgd-rate-presets button { font-size: 12px; padding: 7px; }
.sgd-rate-landmarks { font-size: 11px; color: var(--muted); margin: 10px 0 18px; }
.sgd-rate-landmarks > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 5px 0; }
.sgd-page dd { margin: 0; }
.sgd-rate-landmarks dd { color: var(--ink); font-weight: 750; white-space: nowrap; flex: 0 0 auto; }
.sgd-rate-landmarks dt { min-width: 0; }
.sgd-rate-controls output, .sgd-weight-controls output, .sgd-ridge-controls output { white-space: nowrap; flex-shrink: 0; }
.sgd-rate-controls label, .sgd-weight-controls label, .sgd-ridge-controls label { flex-wrap: wrap; }
.sgd-page .sgd-weight-intro { margin: .75rem 0; font-size: .9rem; color: #415369; }
.sgd-order-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sgd-metrics { margin: 18px 0 0; }
.sgd-metrics > div { border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; }
.sgd-metrics dt { font-size: 12px; }
.sgd-metrics dd { font-size: 20px; font-weight: 800; }
.sgd-point-score { grid-column: 1 / -1; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.sgd-point-score table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sgd-point-score caption { text-align: left; font-weight: 750; margin-bottom: 7px; }
.sgd-point-score th, .sgd-point-score td { padding: 5px 3px; text-align: right; }
.sgd-point-score th:first-child { text-align: left; }
.sgd-point-score thead th { color: var(--muted); font-size: 10px; font-weight: 500; }
.sgd-point-score td { font-weight: 750; overflow-wrap: anywhere; }
.sgd-page .sgd-point-score p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sgd-legend, .sgd-benchmarks { display: flex; flex-wrap: wrap; gap: 5px 15px; font-size: 11px; color: var(--muted); }
.sgd-legend > span, .sgd-benchmarks > span { display: inline-flex; align-items: center; gap: 5px; }
.sgd-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; flex: 0 0 auto; }
.sgd-key.test { color: #367d51; }.sgd-key.train { color: #b05f3b; }.sgd-key.ema { color: #7862b2; }
.sgd-key.arrival { width: 5px; height: 5px; border: 0; background: #677383; border-radius: 50%; }
.sgd-key.best { color: #367d51; border-top-style: dashed; border-top-width: 1px; }
.sgd-key.minnorm { color: #18212f; border-top-style: dotted; }
#sgdRiskCanvas { display: block; width: 100%; height: 368px; touch-action: pan-y; cursor: ew-resize; }
#sgdWeightsCanvas { display: block; width: 100%; height: 205px; touch-action: pan-y; cursor: crosshair; }
.sgd-scrub { display:block; font-size:12px; }
.sgd-page .sgd-scrub > span { display:block; max-width:none; font-weight:750; }
.sgd-scrub output { font-weight: 450; font-variant-numeric: tabular-nums; }
/* Fixed thumb dimensions make its center, not its outer edge, line up with
   the plotted axis at both ends. Readout width never participates in layout. */
.sgd-page .sgd-scrub input[type="range"] {
  --sgd-thumb-radius:calc(var(--sgd-thumb-size,16px) / 2);
  appearance:none; -webkit-appearance:none; box-sizing:border-box; border:0; padding:0; min-width:0;
  width:calc(100% - var(--sgd-axis-left,16px) - var(--sgd-axis-right,16px) + var(--sgd-thumb-size,16px));
  margin:2px 0 8px calc(var(--sgd-axis-left,16px) - var(--sgd-thumb-radius));
  background:transparent;
}
.sgd-scrub input::-webkit-slider-runnable-track {
  height:4px; border:0;
  background:linear-gradient(to right,transparent var(--sgd-thumb-radius),#c3ccd5 var(--sgd-thumb-radius),#c3ccd5 calc(100% - var(--sgd-thumb-radius)),transparent calc(100% - var(--sgd-thumb-radius)));
}
.sgd-scrub input::-moz-range-track {
  height:4px; border:0;
  background:linear-gradient(to right,transparent var(--sgd-thumb-radius),#c3ccd5 var(--sgd-thumb-radius),#c3ccd5 calc(100% - var(--sgd-thumb-radius)),transparent calc(100% - var(--sgd-thumb-radius)));
}
.sgd-scrub input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:var(--sgd-thumb-size); height:var(--sgd-thumb-size); box-sizing:border-box; border:0; border-radius:50%; background:var(--blue); margin-top:calc((4px - var(--sgd-thumb-size)) / 2); }
.sgd-scrub input::-moz-range-thumb { width:var(--sgd-thumb-size); height:var(--sgd-thumb-size); box-sizing:border-box; border:0; border-radius:50%; background:var(--blue); }
/* This is run progress, not the example-identity axis of the stems above. */
.sgd-page .sgd-scrub[for="sgdWeightStep"] input { width:100%; margin-left:0; }
@media (forced-colors: active) {
  .sgd-page .sgd-scrub input[type="range"] { appearance:auto; -webkit-appearance:auto; forced-color-adjust:auto; }
  .sgd-scrub input::-webkit-slider-runnable-track { background:CanvasText; }
  .sgd-scrub input::-moz-range-track { background:CanvasText; }
  .sgd-scrub input::-webkit-slider-thumb { background:Highlight; border:1px solid CanvasText; }
  .sgd-scrub input::-moz-range-thumb { background:Highlight; border:1px solid CanvasText; }
}
.sgd-milestone-strip { margin: 8px 0 14px; }
.sgd-page .sgd-milestone-strip > p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 7px; font-size: 12px; font-weight: 750; }
.sgd-milestone-strip > p > span { color: var(--muted); font-weight: 450; }
.sgd-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sgd-milestones button { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 7px; min-width: 0; text-align: left; }
.sgd-milestones button > span { font-size: 12px; font-weight: 700; line-height: 1.4; }
.sgd-milestones small { display: block; color: #536170; font-size: 11px; font-weight: 450; }
.sgd-milestones strong { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sgd-milestones .sgd-milestone-train { margin-top: -4px; color: #8a4a2c; font-size: 12px; font-weight: 500; }
.sgd-milestones .sgd-milestone-train b { font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sgd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sgd-benchmarks { margin-top: 6px; }
.sgd-page .sgd-state { background: #eef5f9; border-left: 3px solid var(--blue); padding: 12px 14px; font-size: 14px; margin: 18px 0 0; min-height: 68px; }
.sgd-page .audit-details { box-shadow: none; margin: 16px 0; }
.sgd-page .audit-details p { font-size: 14px; }
.sgd-page .audit-details > p { margin-inline: 16px; }
.sgd-page .audit-details pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
/* The renderer uses the available width for readable labels and matching drag coordinates. */
#negative-ridge-path .ridge-local-scroll .teaching-plot { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
#negative-ridge-path > .two-col { grid-template-columns: minmax(0, 1fr); }
#negative-ridge-path .coda-media .spot-art { max-width: 420px; }
.sgd-return-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 28px; }
.sgd-return-example { border-top: 2px solid var(--line); padding-top: 18px; }
.sgd-page .sgd-probe-formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; font-size: 12px; }
.sgd-probe-formula strong { display: block; font-size: 24px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sgd-probe-formula > span:first-child strong { color: #967016; }
.sgd-probe-formula > span:nth-child(3) strong { color: #317aa6; }
.sgd-probe-formula > span:nth-child(5) strong { color: #b05f3b; }
.sgd-nuisance-breakdown { border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 16px; }
.sgd-nuisance-breakdown[hidden] { display: none; }
.sgd-page .sgd-nuisance-breakdown p { margin: 0 0 8px; font-size: 12px; }
.sgd-nuisance-terms { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; font-size: 12px; }
.sgd-nuisance-terms strong { display: block; color: #317aa6; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Reading aids (EQ-SGD-1): with the aids on, the signal and nuisance labels take
   their values' colours, so the prose terms that light them read as one part. */
html.ra-on .sgd-probe-formula [data-series~="sig"] { color: var(--ra-c-sig-text, #886214); }
html.ra-on .sgd-probe-formula [data-series~="nui"] { color: var(--ra-c-nui-text, #2b6f99); }
/* AID-1: blue text over a blue underline reads as a link here, beside the page's own
   links. The nuisance terms keep the body's ink and carry their tone in the underline,
   as «residual» does. */
html.ra-on #multi-epoch-story .ra-hl-term[data-ra-tone="nui"] { color: inherit; }
.sgd-page .sgd-punchline { font-size: 21px; line-height: 1.45; font-weight: 800; }
.sgd-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sgd-ledger { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); }
.sgd-ledger > div { padding: 14px 12px; border-right: 1px solid var(--line); }
.sgd-ledger > div:last-child { border-right: 0; }
.sgd-ledger > div > span, .sgd-ledger > div > small { display: block; font-size: 12px; color: var(--muted); }
.sgd-ledger strong { display: block; font-size: 23px; margin: 5px 0; font-variant-numeric: tabular-nums; }
.sgd-page .sgd-weight-hint { font: 12px ui-monospace, monospace; min-height: 32px; margin: 12px 0; }
.sgd-ridge-section { background: #f8faf7; border-top: 1px solid #dce7dc; }
.sgd-ridge-instrument { margin-top: 28px; margin-bottom: 24px; padding: 22px; border: 1px solid #cbd9ce; border-radius: 8px; background: #fff; }
.sgd-ridge-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 26px; align-items: center; padding: 16px 0 10px; }
.sgd-ridge-controls label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 750; }
.sgd-ridge-controls output { font-variant-numeric: tabular-nums; }
.sgd-ridge-controls input { grid-column: 1; }
.sgd-ridge-controls .sgd-segment { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; }
.sgd-ridge-legend, .sgd-ridge-landmarks { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--muted); font-size: 12px; }
.sgd-ridge-legend > span, .sgd-ridge-landmarks > span { display: inline-flex; align-items: center; gap: 7px; }
.sgd-ridge-legend i, .sgd-ridge-landmarks i { display: inline-block; flex: 0 0 auto; }
.sgd-ridge-legend .ridge-path { width: 18px; border-top: 2px solid #235f9e; }
.sgd-ridge-legend .ridge-positive { border-color: #b05f3b; }
.sgd-ridge-legend .sgd-point { width: 10px; height: 10px; border-radius: 50%; background: #367d51; }
.sgd-ridge-legend .ridge-shadow { width: 10px; height: 10px; border: 2px solid #235f9e; border-radius: 50%; }
.sgd-ridge-legend .ridge-gap { width: 18px; border-top: 2px dashed #7862b2; }
.sgd-ridge-landmarks { border-top: 1px solid #e2e8ec; padding-top: 11px; }
.sgd-ridge-landmarks i { width: 10px; height: 10px; border-radius: 50%; }
.sgd-ridge-landmarks .minnorm { background: #18212f; }
.sgd-ridge-landmarks .best { background: #367d51; }
.sgd-ridge-landmarks .calibration { border: 2px solid #b0820f; }
#sgdRidgeCanvas { display: block; width: 100%; height: 360px; margin: 12px 0 4px; touch-action: pan-y; cursor: ew-resize; }
.sgd-ridge-plots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 8px; }
.sgd-ridge-plots figure { min-width: 0; margin: 0; }
.sgd-ridge-plots figcaption { padding: 10px 0; font-size: 15px; font-weight: 750; border-bottom: 1px solid var(--line); }
.sgd-ridge-plots canvas { display: block; width: 100%; height: 320px !important; margin: 10px 0 0 !important; touch-action: pan-y; cursor: crosshair; }
.sgd-page .sgd-ridge-plot-note { color: #526170; font-size: 12px; line-height: 1.6; }
.sgd-page #sgdRidgeDataNote { flex: 1 1 260px; margin: 0; font-size: 12px; color: #536170; line-height: 1.5; }
.sgd-ridge-instrument [hidden] { display: none !important; }
.sgd-ridge-legend .sgd-path { width: 22px; border-top: 3px dashed #367d51; }
.sgd-ridge-summary { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 18px 0; font-variant-numeric: tabular-nums; }
.sgd-ridge-summary dt { font-size: 13px; color: #526170; }
.sgd-ridge-summary dd { font-size: 21px; font-weight: 750; min-height: 1.5em; }
.sgd-ridge-table-wrap { overflow-x: auto; }
.sgd-ridge-table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.sgd-ridge-table caption { text-align: left; font-size: 12px; color: #526170; margin-bottom: 8px; }
.sgd-ridge-table th, .sgd-ridge-table td { padding: 12px 9px; text-align: right; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.sgd-ridge-table th:first-child { text-align: left; }
.sgd-ridge-table thead th { color: #526170; font-size: 12px; }
.sgd-ridge-table td { font-size: 18px; font-weight: 750; }
.sgd-ridge-table tbody tr:first-child { background: #f0f7f1; }
@media (max-width: 1000px) {
  .sgd-ridge-plots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .sgd-ridge-table th, .sgd-ridge-table td { padding: 10px 4px; }
  .sgd-ridge-table td { font-size: 14px; }
  .sgd-ridge-table th { font-size: 12px; }
}
.sgd-ridge-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sgd-ridge-metrics > div { padding: 12px; border-right: 1px solid var(--line); min-width: 0; }
.sgd-ridge-metrics > div:last-child { border-right: 0; }
.sgd-ridge-metrics dt { color: var(--muted); font-size: 12px; }
.sgd-ridge-metrics dd { margin-top: 5px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sgd-ridge-instrument .audit-details { max-width: 100%; }
.causal-mask-section { background: #fffaf0 !important; border-block: 1px solid #eadcae; }
.causal-equations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.causal-equations > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #d6c892;
  border-left: 4px solid #c69218;
  border-radius: 6px;
  background: #fff;
}
.causal-equations > div:last-child { border-left-color: #7862b2; }
.causal-equations strong { font-size: 13px; line-height: 1.25; }
.causal-equation {
  overflow-x: auto;
  color: #18212f;
  font: 600 1.13rem/1.8 Georgia, "Times New Roman", serif;
  white-space: nowrap;
}
.causal-mask-instrument {
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 22px;
  border: 1px solid #cbbd88;
  border-radius: 8px;
  background: #fff;
}
.causal-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 18px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d8dde6;
}
.causal-control-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.causal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.causal-decomposition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 8px 0 28px;
}
.causal-decomposition figure, .causal-system-figure, .causal-side figure { min-width: 0; margin: 0; }
.causal-decomposition figcaption, .causal-system-figure figcaption, .causal-side figcaption { min-height: 47px; margin-bottom: 7px; font-size: 14px; font-weight: 750; }
.causal-decomposition figcaption small, .causal-system-figure figcaption span, .causal-side figcaption span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.causal-decomposition figure.signal figcaption { color: #7b570d; }
.causal-decomposition figure.nuisance figcaption { color: #235f9e; }
.causal-decomposition canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #d8dde6; background: #fbfcfd; }
.causal-operator { color: #778393; font-size: 26px; font-weight: 750; }
.causal-system-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 22px; align-items: start; }
#causalSystemCanvas { display: block; width: 100%; height: 430px; border: 1px solid #cbd5df; background: #fbfcfd; cursor: ns-resize; touch-action: pan-x; }
#causalWeightCanvas { display: block; width: 100%; height: 230px; border: 1px solid #d8dde6; background: #fbfcfd; }
.causal-side { display: grid; gap: 16px; }
.causal-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid #d8dde6; border-radius: 5px; background: #f7f9fb; }
.causal-metrics div { padding: 11px; border-right: 1px solid #d8dde6; border-bottom: 1px solid #d8dde6; }
.causal-metrics div:nth-child(2n) { border-right: 0; }
.causal-metrics div:nth-last-child(-n+2) { border-bottom: 0; }
.causal-metrics dt { color: var(--muted); font-size: 11px; }
.causal-metrics dd { margin-top: 4px; font-size: 21px; font-weight: 850; font-variant-numeric: tabular-nums; }
.causal-heat-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.causal-heat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.causal-heat-legend i { width: 13px; height: 13px; border: 1px solid #bec7d0; }
.causal-heat-legend .positive { background: #70a9c9; }
.causal-heat-legend .negative { background: #cf8a71; }
.causal-heat-legend .masked { background: #edf0f3; }
.causal-heat-legend .identity { background: #273444; }
.causal-scrub-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; margin: 18px 0 0; }
.causal-scrub-row label { display: block; color: var(--muted); font-size: 12px; font-weight: 750; }
.causal-scrub-row label > span { display: flex; justify-content: space-between; }
.causal-scrub-row output { color: var(--ink); font-variant-numeric: tabular-nums; }
.causal-transition-copy { margin-top: 24px; }
.causal-derivation-equation {
  overflow-x: auto;
  margin: 9px 0 14px !important;
  padding: 9px 12px;
  border-left: 3px solid #c99b24;
  background: #fffaf0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem !important;
  line-height: 1.55;
  white-space: nowrap;
}
.sgd-closing { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: center; }
.sgd-closing figure { margin: 0; }.sgd-closing img { width: 100%; display: block; border-radius: 4px; }
.sgd-closing figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sgd-page [hidden] { display: none !important; }
@media (max-width: 920px) {
  .sgd-live-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .sgd-settings { border-left: 0; padding-left: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 18px; }
  .sgd-settings > label, .sgd-settings > input, .sgd-rate-presets { grid-column: 1 / -1; }
  .sgd-metrics { margin-top: 0; grid-column: 2; grid-row: 4 / span 2; }
  .sgd-return-grid, .sgd-closing { grid-template-columns: minmax(0,1fr); }
  .sgd-page .sgd-intro, .sgd-page .sgd-copy { max-width: none; }
  .sgd-ridge-controls { grid-template-columns: minmax(0, 1fr); }
  .sgd-ridge-controls .sgd-segment { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .sgd-ridge-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgd-ridge-metrics > div:nth-child(2) { border-right: 0; }
  .sgd-ridge-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .causal-equations { grid-template-columns: minmax(0, 1fr); }
  .causal-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .causal-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .causal-system-grid { grid-template-columns: minmax(0, 1fr); }
  .causal-side { grid-template-columns: minmax(0, 1fr) minmax(250px, .65fr); }
}
@media (max-width: 540px) {
  .sgd-page .section { padding: 34px 0; }.sgd-page h2 { font-size: 25px; }.sgd-page h3 { font-size: 17px; }
  .sgd-instrument, .sgd-weight-instrument { padding: 12px; width: calc(100% - 20px); }
  .sgd-toolbar { gap: 10px; margin: 12px 0; }.sgd-page button { padding: 7px 8px; font-size: 12px; }
  #sgdRiskCanvas { height: 300px; }.sgd-legend { gap: 5px 10px; font-size: 10px; }
  .sgd-scrub { gap: 8px; }.sgd-scrub > span { max-width: 115px; }
  .sgd-rate-landmarks { font-size: 10px; }.sgd-rate-landmarks > div { display: block; }
  .sgd-metrics dd { font-size: 17px; }.sgd-settings { gap: 0 12px; }
  .sgd-ledger { grid-template-columns: repeat(2,minmax(0,1fr)); }.sgd-ledger > div { border-bottom: 1px solid var(--line); }
  .sgd-ledger > div:nth-child(2) { border-right: 0; }.sgd-ledger strong { font-size: 20px; }
  .sgd-page .sgd-probe-formula { gap: 7px; }.sgd-probe-formula strong { font-size: 20px; }
  .sgd-ridge-instrument { padding: 12px; width: calc(100% - 20px); }
  #sgdRidgeCanvas { height: 305px; }
  .sgd-ridge-legend, .sgd-ridge-landmarks { font-size: 11px; gap: 6px 12px; }
  .sgd-ridge-metrics dd { font-size: 18px; }
  .causal-mask-instrument { padding: 12px; width: calc(100% - 20px); }
  .causal-equations > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px; }
  .causal-equation { font-size: .98rem; }
  .causal-toolbar { grid-template-columns: minmax(0, 1fr); }
  .causal-actions { grid-column: auto; }
  .causal-decomposition { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; }
  .causal-decomposition figure.full { grid-column: 1 / -1; width: 52%; justify-self: center; }
  .causal-decomposition .causal-operator:nth-of-type(2) { display: none; }
  .causal-decomposition figcaption { font-size: 12px; }
  .causal-system-grid, .causal-side { grid-template-columns: minmax(0, 1fr); }
  .causal-derivation-equation { font-size: .9rem !important; }
  #causalSystemCanvas { height: 345px; }
  .causal-scrub-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sgd-page * { scroll-behavior: auto !important; } }

/* Reader path: compare the milestones, then inspect individual updates. */
.sgd-page .sgd-first-reveal { padding: 16px 18px; margin: 22px 0; background: #fff3ce; border-left: 4px solid #c69218; font-weight: 650; line-height: 1.6; }
.sgd-plot-options { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px 24px; padding: 12px 0; margin-bottom: 16px; border-block: 1px solid #d8dde6; }
.sgd-arrival-reveal { min-height: 32px; font-size: 13px; font-weight: 650; }
.sgd-rate-comparison { flex: 1 1 250px; padding-top: 6px; }
.sgd-page .sgd-rate-comparison p { font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.sgd-plot-options > details { flex: 0 1 390px; font-size: 13px; }
.sgd-plot-options summary { min-height: 32px; display: list-item; cursor: pointer; padding: 6px 0; }
.sgd-extra-overlays { display: grid; gap: 10px; padding-top: 8px; }
.sgd-page .sgd-extra-overlays p { font-size: 12px; line-height: 1.55; margin: 0; }
.sgd-key.baseline { color: #687587; border-top-width: 1px; }
.sgd-key.correlator { color: #167c88; border-top-style: dashed; }
.sgd-key.oracle { color: #7862b2; border-top-style: solid; }
.sgd-live-grid { align-items: start; grid-template-rows: auto 1fr; row-gap: 16px; }
.sgd-plot-column { grid-column: 1; grid-row: 1 / 3; }
.sgd-rate-controls { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); padding-left: 22px; min-width: 0; }
.sgd-rate-controls > label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 750; }
.sgd-rate-controls output { font-variant-numeric: tabular-nums; }
.sgd-settings { grid-column: 2; grid-row: 2; }
.sgd-page .sgd-threshold-note { font-size: 12px; color: #536170; line-height: 1.5; margin: 0 0 16px; }
.sgd-point-score { padding: 12px; background: #f6f9fc; border: 1px solid #d8dde6; border-radius: 4px; }
.sgd-point-score table { font-size: 14px; }
.sgd-point-score caption { font-size: 13px; }
.sgd-point-score thead th { font-size: 11px; }
.sgd-gentle-comparison { max-width: 850px; margin-top: 36px; padding-top: 22px; border-top: 1px solid #cbd5df; }
.sgd-comparison-table-wrap { overflow-x: auto; margin: 18px 0; }
.sgd-comparison-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.sgd-comparison-table caption { text-align: left; color: #526170; font-size: 12px; padding: 0 0 10px; }
.sgd-comparison-table th, .sgd-comparison-table td { padding: 12px; text-align: right; border-bottom: 1px solid #d8dde6; }
.sgd-comparison-table th:first-child { text-align: left; }
.sgd-comparison-table thead th { font-size: 12px; color: #526170; }
.sgd-comparison-table small { display: block; font-weight: 400; color: #526170; margin-top: 5px; }
.sgd-comparison-table td { font-size: 17px; font-weight: 750; }
.sgd-useful-row { background: #edf6ef; }
.sgd-weight-options { display: flex; flex-wrap: wrap; gap: 12px; }
.sgd-weight-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 30px; margin: 18px 0; }
.sgd-weight-controls > div { min-width: 0; }
.sgd-weight-controls label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 750; }
.sgd-weight-controls output { margin-left: auto; min-width: 9ch; text-align: right; font-variant-numeric: tabular-nums; }
.sgd-page #sgdWeightDataNote { flex: 1 1 260px; margin: 0; font-size: 12px; line-height: 1.5; color: #536170; }
.sgd-weight-instrument { scroll-margin-top: 125px; }
.sgd-weight-instrument [hidden] { display: none !important; }
.sgd-weight-instrument .sgd-ledger > div { min-width: 0; }
.sgd-weight-instrument .sgd-ledger strong { overflow-wrap: anywhere; }
.sgd-weight-instrument .sgd-comparison-caption { min-height: 4.5em; }
.sgd-weight-instrument .sgd-weight-hint { min-height: 4.5em; overflow-wrap: anywhere; }
.sgd-page .sgd-comparison-caption { font-size: 13px; line-height: 1.5; color: #526170; margin: 12px 0; max-width: 76ch; }
.sgd-equal-key { display: inline-block; width: 20px; vertical-align: middle; border-top: 2px dashed #7862b2; margin-right: 5px; }
.causal-scrub-row { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 14px; }
.causal-scrub-row .sgd-commands { gap: 8px; }
.causal-scrub-row button { min-height: 44px; }
#causalSystemCanvas { touch-action: pan-y; cursor: pointer; }
.sgd-page .causal-diagonal-readout { margin: 12px 0 0; padding: 12px; background: #f1f5f8; font-size: 13px; line-height: 1.55; min-height: 104px; }
.sgd-page .causal-weight-scale { margin: 9px 0; font-size: 12px; color: #526170; line-height: 1.5; min-height: 36px; }
.causal-derivation { padding: 14px 18px; }
.causal-derivation > summary { min-height: 36px; cursor: pointer; font-weight: 750; }
.causal-derivation > p { max-width: 850px; }
@media (max-width: 920px) {
  .sgd-weight-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sgd-live-grid { grid-template-rows: auto; }
  .sgd-rate-controls { grid-column: 1; grid-row: 1; border: 0; padding: 0; }
  .sgd-plot-column { grid-column: 1; grid-row: 2; }
  .sgd-settings { grid-column: 1; grid-row: 3; }
  .sgd-settings .sgd-rate-landmarks { grid-column: 1; grid-row: 1; }
  .sgd-settings .sgd-metrics { grid-column: 2; grid-row: 1 / 3; }
  #sgdReuseSettings { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .sgd-plot-options { gap: 6px; }
  .sgd-arrival-reveal { font-size: 12px; }
  .sgd-point-score table { font-size: 13px; }
  .sgd-comparison-table th, .sgd-comparison-table td { padding: 10px 7px; }
  .sgd-comparison-table td { font-size: 15px; }
  .sgd-comparison-table { font-size: 13px; }
  .causal-derivation { padding: 12px; }
}

/* Share the same experiment between stylized and iid inputs. */
.sgd-data-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 18px 0 10px; padding: 12px; background: #f2f7fb; border: 1px solid #d5e0e9; border-radius: 5px; scroll-margin-top: 80px; }
.sgd-data-controls button, .sgd-arrival-controls button { min-height: 44px; font-weight: 650; }
.sgd-page #sgdDataNote { flex: 1 1 260px; margin: 0; font-size: 12px; line-height: 1.5; color: #536170; }
.sgd-arrival-controls { flex: 1 1 320px; }
.sgd-arrival-controls button[aria-pressed="true"] { background: #eeeaf8; border-color: #7862b2; color: #43316d; }
#sgdNewDraw[hidden], #sgdFreshThresholdRow[hidden] { display: none; }
@media (max-width: 540px) {
  .sgd-data-controls { gap: 8px; padding: 10px; }
  .sgd-arrival-controls { flex-basis: 100%; }
  .sgd-arrival-controls button { flex: 1 1 0; font-size: 12px; }
}
/* Keep the experiment in place as new draws change the first-step numbers. */
.sgd-page .sgd-first-reveal { min-height: calc(4.8em + 32px); }
.sgd-point-score table { table-layout: fixed; }
.sgd-point-score caption { min-height: 2.6em; }
.sgd-metrics dd { flex: 0 0 8ch; text-align: right; }
@media (max-width: 920px) {
  .sgd-page .sgd-first-reveal { min-height: calc(8em + 32px); }
}
@media (max-width: 540px) {
  .sgd-page .sgd-first-reveal { min-height: calc(11.2em + 32px); }
  .sgd-metrics dd { flex-basis: 7ch; font-size: 17px; }
}

/* Physical sensor mode and optional views use the same shared experiment. */
.sgd-page #sgdDataStatus { flex-basis: 100%; font-size: 13px; color: #765b14; }
.sgd-page #sgdDataStatus:empty { display: none; }
.sgd-gradient-figure { margin: 12px 0; padding: 10px; border: 1px solid #d8dde6; }
#sgdGradientCanvas { display: block; width: 100%; height: 160px; }
.sgd-gradient-figure figcaption { font-size: 12px; line-height: 1.5; margin-top: 6px; }
.sgd-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 12px; }
.sgd-response-instrument { margin-block: 24px; padding: 22px; border: 1px solid #cbd9ce; border-radius: 8px; background: white; }
.sgd-page .sgd-response-instrument p { font-size: 14px; line-height: 1.6; }
#sgdResponseCanvas { display: block; width: 100%; height: 310px; touch-action: pan-y; cursor: ew-resize; }
.sgd-instrument[data-model="sensor"] .sgd-key.test { border-color: #b05f3b; }
.sgd-instrument[data-model="sensor"] .sgd-key.train { border-style: dashed; }
@media (max-width: 540px) {
  .sgd-response-instrument { padding: 12px; width: calc(100% - 20px); }
  #sgdResponseCanvas { height: 270px; }
  .sgd-rate-controls output { font-size: 11px; overflow-wrap: anywhere; }
}
.sgd-page #sgdDataNote, .sgd-page #sgdWeightDataNote, .sgd-page #sgdRidgeDataNote,
.sgd-page #sgdComparisonCaption, .sgd-page #sgdResponseReadout, .sgd-page #sgdWeightCaption { overflow-wrap: anywhere; }

/* Match optional overlays to their plot legend and make clipped weights actionable. */
.sgd-key.response-interpolator { color: #18212f; border-top-style: dashed; }
.sgd-key.response-crossing { color: #18212f; border-top-style: dotted; }
.sgd-key.training-crossing { color: #c77d2b; border-top-style: dotted; }
.sgd-key.response-sgd { color: #367d51; border-top-style: dashed; }
.sgd-response-legend { margin-top: 10px; }

/* One local rate changes both the response plot and the ridge comparison.
   Keep the two primary consequences beside one another at desktop widths. */
.sgd-bias-model-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sgd-bias-model-controls .sgd-data-controls { margin: 0; }
.sgd-linked-bias .sgd-response-instrument { margin: 0 0 18px; padding: 0; border: 0; width: 100%; }
.sgd-linked-bias .sgd-ridge-controls { background: #fff; border-block: 1px solid #d8dde6; margin: 14px 0; }
.sgd-linked-bias #sgdRidgeSupported[hidden] { display: none !important; }
@media (max-width: 1099px) {
  .sgd-linked-bias .sgd-ridge-plots { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .sgd-linked-plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
  .sgd-linked-plots > #sgdResponseInstrument { grid-column: 1; grid-row: 2; min-width: 0; margin: 0; }
  .sgd-linked-plots > #sgdRidgeSupported,
  .sgd-linked-plots .sgd-ridge-plots { display: contents; }
  .sgd-linked-plots .sgd-ridge-legend { grid-column: 1 / -1; grid-row: 1; }
  .sgd-linked-plots .sgd-ridge-plots > figure:nth-child(1) { grid-column: 2; grid-row: 2; }
  .sgd-linked-plots .sgd-ridge-plots > figure:nth-child(2) { grid-column: 1; grid-row: 3; }
  .sgd-linked-plots .sgd-ridge-plots > figure:nth-child(3) { grid-column: 2; grid-row: 3; }
  .sgd-linked-plots .sgd-ridge-plot-note,
  .sgd-linked-plots .sgd-ridge-landmarks,
  .sgd-linked-plots .sgd-ridge-summary,
  .sgd-linked-plots .sgd-ridge-table-wrap { grid-column: 1 / -1; }
  .sgd-linked-plots #sgdResponseInstrument h3 { margin: 0; padding: 10px 0; font-size: 15px; font-weight: 750; border-bottom: 1px solid var(--line); }
  .sgd-linked-plots #sgdResponseCanvas { height: 320px; margin-top: 10px; }
  .sgd-linked-plots .sgd-ridge-summary { gap: 8px 22px; margin: 10px 0; }
  .sgd-linked-plots .sgd-ridge-summary dd { font-size: 18px; }
  .sgd-linked-plots .sgd-ridge-table th,
  .sgd-linked-plots .sgd-ridge-table td { padding: 8px 5px; }
  .sgd-linked-plots .sgd-ridge-table thead th { font-size: 11px; }
  .sgd-linked-plots .sgd-ridge-table td { font-size: 15px; }
  .sgd-linked-plots:has(> #sgdRidgeSupported[hidden]) > #sgdResponseInstrument { grid-column: 1 / -1; grid-row: auto; }
}
.sgd-linked-bias > .sgd-ridge-controls { position: relative; padding: 10px 0; }
.sgd-page .sgd-weight-range-notice { margin: 8px 0; padding: 8px 12px; background: #fff6e7; font-size: 13px; line-height: 1.5; }
.sgd-weight-range-notice button { margin-left: .35em; padding: 5px 9px; border: 1px solid #c69218; border-radius: 5px; background: white; color: #65480e; font: inherit; font-weight: 650; cursor: pointer; }
/* The three-example matrix systems are complete statements; keep them unclipped on 320 px phones. */
@media (max-width: 380px) {
  .causal-equation.causal-matrix { font-size: .88rem; }
}

/* Local three-example explanation beside the causal-masking prose. */
.sgd-mask-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.sgd-mask-card{background:#fff;border:1px solid #cdd5dc;border-radius:8px;padding:15px}.sgd-mask-card h3{margin:0 0 8px;font-size:18px}.sgd-mask-card p{font-size:15px;margin:8px 0}.sgd-mask-table{border-collapse:separate;border-spacing:4px;margin:auto;font-size:17px;text-align:center}.sgd-mask-table td{width:72px;height:43px;background:#edf2f5;border-radius:3px}.sgd-mask-table td[data-series~=diag]{background:#f2dfae}.sgd-mask-table td[data-series~=future]{background:#f1f2f3;color:#5d6877}.sgd-mask-card small{display:block;color:#576477;font-size:13px}@media(max-width:600px){.sgd-mask-pair{grid-template-columns:1fr}.sgd-mask-table td{width:80px}}