/* Explanatory figures may use restrained pastels; the surrounding site stays neutral. */
.learning-figure {
  --diagram-blue:#d8e6f1;
  --diagram-green:#cfe3dc;
  --diagram-yellow:#f0dfbf;
  --diagram-pink:#f3dfe7;
  --diagram-lilac:#e8e2f4;
  --diagram-line:#434950;
  --diagram-blue-strong:#315f80;
  --diagram-pink-strong:#86506a;
  margin:34px 0;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.dark .learning-figure {
  --diagram-blue:#283f51;
  --diagram-green:#28473d;
  --diagram-yellow:#51432b;
  --diagram-pink:#49303a;
  --diagram-lilac:#393247;
  --diagram-line:#d9d9d6;
  --diagram-blue-strong:#8fc4e8;
  --diagram-pink-strong:#e0a4bd;
}
.learning-figure h3 { margin:0 0 12px; font:600 21px/1.4 Georgia,serif; }
.diagram-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:0; border-radius:0; background:transparent; }
.diagram-scroll:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.learning-diagram { display:block; width:100%; min-width:760px; height:auto; color:var(--ink); }
.learning-diagram text { fill:var(--ink); font:14px/1.3 system-ui,sans-serif; text-anchor:start; }
.learning-diagram .diagram-center { text-anchor:middle; }
.learning-diagram .diagram-label { font-size:14px; font-weight:700; }
.learning-diagram .diagram-small { font-size:14px; fill:var(--muted); }
.learning-diagram .diagram-kicker { font-size:11px; font-weight:800; letter-spacing:.13em; }
.learning-diagram .diagram-mono,.learning-diagram .diagram-formula { font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.learning-diagram .diagram-formula { font-size:14px; }

.learning-diagram .diagram-arrow { fill:var(--diagram-line); }
.learning-diagram .diagram-link { fill:none; stroke:var(--diagram-line); stroke-width:1.6; }
.learning-diagram .diagram-weight { stroke-width:1.2; opacity:.62; }
.learning-diagram .diagram-weight-label { font-size:12px; font-weight:700; }
.learning-diagram .diagram-residual { fill:none; stroke:var(--diagram-line); stroke-width:1.7; stroke-dasharray:7 5; }
.learning-diagram .diagram-memory-lane { fill:none; stroke:var(--diagram-line); stroke-width:4; }
.learning-diagram .diagram-axis { fill:none; stroke:var(--diagram-line); stroke-width:1.2; }
.learning-diagram .diagram-trend { fill:none; stroke:#537f9f; stroke-width:3; }
.learning-diagram .diagram-point { fill:#477693; stroke:var(--surface); stroke-width:2; }
.learning-diagram .diagram-orbit { fill:none; stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 5; }
.learning-diagram .diagram-vector { stroke-width:3.5; marker-end:context-stroke; }
.learning-diagram .tone-input .diagram-vector { stroke:var(--diagram-blue-strong); }
.learning-diagram .tone-key .diagram-vector { stroke:var(--diagram-pink-strong); }
.learning-diagram .diagram-vector-tip .diagram-scalar { stroke-width:2; }
.learning-diagram .diagram-divider { fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:4 6; }
.learning-diagram .diagram-brace { fill:none; stroke:var(--diagram-line); stroke-width:1.4; }

.learning-diagram .diagram-scalar { fill:var(--surface); stroke:var(--diagram-line); stroke-width:1.6; }
.learning-diagram .diagram-operation { fill:var(--diagram-yellow); stroke:var(--diagram-line); stroke-width:1.8; }
.learning-diagram .diagram-layer { fill:var(--diagram-lilac); stroke:var(--diagram-line); stroke-width:1.5; }
.learning-diagram .diagram-note { fill:var(--accent-soft); stroke:var(--line); stroke-width:1.2; }
.learning-diagram .diagram-cell { fill:var(--surface); stroke:var(--diagram-line); stroke-width:1.2; }
.learning-diagram .diagram-heat { fill:var(--diagram-blue); opacity:.45; }
.learning-diagram .heat-value-0 { fill:var(--diagram-blue); }
.learning-diagram .heat-value-1 { fill:var(--diagram-green); }
.learning-diagram .heat-value-2 { fill:var(--diagram-yellow); }
.learning-diagram .heat-value-3 { fill:var(--diagram-pink); }
.learning-diagram .heat-value-4 { fill:var(--diagram-lilac); }
.learning-diagram .diagram-row-outline { fill:none; stroke:var(--diagram-line); stroke-width:2.4; }
.learning-diagram .selected-row .diagram-mono { font-weight:850; }
.learning-diagram .diagram-cache-row rect { fill:var(--surface); stroke:var(--line); }
.learning-diagram .diagram-cache-row.is-new rect { fill:var(--diagram-green); stroke:var(--diagram-line); stroke-width:1.6; }
.learning-diagram .diagram-cache-read { stroke:#527c9b; stroke-width:1.3; opacity:.7; }

.learning-diagram .tone-input .diagram-scalar,
.learning-diagram .tone-input.diagram-note { fill:var(--diagram-blue); }
.learning-diagram .tone-key .diagram-layer,
.learning-diagram .tone-key .diagram-scalar,
.learning-diagram .tone-key .diagram-cell { fill:var(--diagram-pink); }
.learning-diagram .tone-value .diagram-layer,
.learning-diagram .tone-value .diagram-scalar,
.learning-diagram .tone-value .diagram-cell,
.learning-diagram .tone-value.diagram-note { fill:var(--diagram-green); }
.learning-diagram .tone-calc .diagram-scalar,
.learning-diagram .tone-calc .diagram-operation { fill:var(--diagram-yellow); }
.learning-diagram .tone-output .diagram-scalar,
.learning-diagram .tone-output .diagram-layer,
.learning-diagram .tone-output .diagram-cell { fill:var(--diagram-lilac); stroke-width:2; }
.learning-diagram .tone-layer .diagram-layer { fill:var(--diagram-lilac); }
.learning-diagram .tone-gate .diagram-scalar { fill:var(--diagram-pink); }
.learning-diagram .tone-score .diagram-cell { fill:var(--diagram-yellow); }
.learning-diagram .tone-weight .diagram-cell { fill:var(--diagram-blue); }

.learning-diagram .diagram-step { transition:opacity .16s ease; }
.learning-diagram .diagram-step.is-current { opacity:1; }
.learning-diagram .diagram-step.is-done,
.learning-diagram .diagram-step.is-future { opacity:1; }
.learning-diagram .diagram-step.is-current .diagram-scalar,
.learning-diagram .diagram-step.is-current .diagram-operation,
.learning-diagram .diagram-step.is-current .diagram-layer,
.learning-diagram .diagram-step.is-current .diagram-note,
.learning-diagram .diagram-step.is-current .diagram-cell { stroke-width:2.5; }
.learning-diagram .diagram-step.is-future .diagram-scalar,
.learning-diagram .diagram-step.is-future .diagram-operation,
.learning-diagram .diagram-step.is-future .diagram-layer,
.learning-diagram .diagram-step.is-future .diagram-note,
.learning-diagram .diagram-step.is-future .diagram-cell {
  fill:var(--surface);
  stroke-dasharray:5 4;
}
.learning-diagram .diagram-step.is-future .diagram-link,
.learning-diagram .diagram-step.is-future .diagram-axis,
.learning-diagram .diagram-step.is-future .diagram-trend,
.learning-diagram .diagram-step.is-future .diagram-divider,
.learning-diagram .diagram-step.is-future .diagram-residual,
.learning-diagram .diagram-step.is-future .diagram-vector,
.learning-diagram .diagram-step.is-future .diagram-row-outline {
  opacity:.62;
  stroke-dasharray:5 4;
}
.learning-diagram .diagram-step.is-future text { fill:var(--ink); }
.learning-diagram .diagram-link.is-current { stroke-width:3; }
.learning-diagram .diagram-link.is-future { opacity:.62; stroke-dasharray:5 4; }

.diagram-controls { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px; }
.diagram-controls button { min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:700 13px/1 system-ui,sans-serif; cursor:pointer; }
.diagram-controls button:hover:not(:disabled) { border-color:var(--ink); background:var(--accent-soft); }
.diagram-controls button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.diagram-controls button:disabled { opacity:.42; cursor:not-allowed; }
.diagram-step-status { min-width:92px; font:700 12px/1.4 system-ui,sans-serif; color:var(--muted); text-align:center; }
.learning-figure .diagram-step-copy { margin:12px 0 0; max-width:62ch; font:650 15px/1.55 system-ui,sans-serif; }
.learning-figure figcaption { margin-top:12px; max-width:68ch; font:14px/1.65 system-ui,sans-serif; color:var(--muted); }
.learning-figure .diagram-scroll-hint { display:none; margin:9px 0 0; font-size:12px; color:var(--muted); }

@media(max-width:1100px) { .learning-figure .diagram-scroll-hint { display:block; } }
@media(max-width:600px) {
  .learning-figure { margin:28px 0; padding:20px 0; }
  .diagram-controls { align-items:stretch; }
  .diagram-controls button { flex:1 1 84px; }
  .diagram-step-status { order:-1; flex-basis:100%; text-align:left; }
}
@media(prefers-reduced-motion:reduce) { .learning-diagram .diagram-step { transition:none; } }