:root { --math-supporting-text-size: .9rem; }
.math-expression { font-size: 1.18em; }
/* KaTeX replaces MathML after the deferred page scripts load. Keep that
   temporary source representation from flashing before the final rendering. */
math.math-expression { visibility: hidden; }
.math-expression .katex { font-size: 1em; }
.math-symbol,
.math-inline { font-family: KaTeX_Math, KaTeX_Main, serif; font-size: 1.12em; font-style: italic; }

.math-intro .lede { max-width: 39rem; }

.math-index { width: min(var(--content), 100%); }
.math-list { display: grid; gap: 1rem; }

.math-exploration-link {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 3.55rem;
  padding: .15rem 0;
  color: var(--text);
  font-family: var(--code);
  text-decoration: none;
}

.math-exploration-icon::before { background: linear-gradient(90deg, var(--accent) 0 48%, var(--accent-secondary) 48%); mask-image: url("/assets/icons/math-function.svg"); -webkit-mask-image: url("/assets/icons/math-function.svg"); }
.math-explorations-index .math-exploration-icon::before { background: url("/assets/icons/quiz.svg") center / contain no-repeat; mask-image: none; -webkit-mask-image: none; }
.math-index[aria-labelledby="probability-explorations"] .math-exploration-icon::before { background: url("/assets/icons/casino.svg") center / contain no-repeat; mask-image: none; -webkit-mask-image: none; }
.math-index[aria-labelledby="linear-algebra-explorations"] .math-exploration-icon::before { background: url("/assets/icons/function-search.svg") center / contain no-repeat; mask-image: none; -webkit-mask-image: none; }
.math-exploration-icon::after { content: none; }
.math-exploration-copy { display: block; }
.math-exploration-title { display: inline; font-family: var(--code); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 400; letter-spacing: .02em; line-height: 1; }
.math-exploration-link-text { position: relative; display: inline; padding-bottom: .28rem; }
.math-exploration-link-text::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--accent-secondary); transform: scaleX(0); transform-origin: right; transition: transform 210ms ease; }
.math-exploration-meta { display: block; margin-top: .22rem; color: var(--muted); font-family: var(--serif); font-size: .86em; line-height: 1.2; }
.math-exploration-link .math-exploration-arrow { display: inline-block; margin-left: .45rem; vertical-align: text-top; white-space: nowrap; }
.math-exploration-end { white-space: nowrap; }
.math-exploration-link:hover .math-exploration-link-text::after,
.math-exploration-link:focus-visible .math-exploration-link-text::after { transform: scaleX(1); transform-origin: left; }
.math-exploration-link:hover .math-exploration-arrow,
.math-exploration-link:focus-visible .math-exploration-arrow { opacity: 1; transform: translate(0, 0); }
.math-exploration-link:hover .math-exploration-link-text,
.math-exploration-link:focus-visible .math-exploration-link-text,
.math-exploration-link:hover .math-exploration-end,
.math-exploration-link:focus-visible .math-exploration-end { text-decoration: underline; text-decoration-color: var(--accent-secondary); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.math-exploration-link:hover .math-exploration-link-text::after,
.math-exploration-link:focus-visible .math-exploration-link-text::after { display: none; }

.math-article { display: grid; width: min(var(--wide), 100%); gap: var(--space-section-tight); }
.math-article > section { display: grid; gap: var(--space-heading-body); }
.math-article > section > :is(p, dl) { margin: 0; }
.math-article h2 { margin: 0; }
.math-article .article-header .project-summary { margin-top: var(--space-heading-body); }

.equation-set { display: flex; flex-wrap: wrap; gap: .55rem; }
.equation-set button,
.math-presets button {
  appearance: none;
  min-height: 2.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--code);
  font-size: .86rem;
  line-height: 1.2;
  padding: .5rem .7rem;
}
.equation-set button { font-family: var(--serif); font-size: 1.05rem; text-align: left; }
.equation-description { color: var(--muted); font-family: var(--code); font-size: .86rem; letter-spacing: .01em; }
.math-presets button { font-family: var(--code); }
.equation-set button:hover, .equation-set button:focus-visible, .equation-set button.is-active,
.math-presets button:hover, .math-presets button:focus-visible, .math-presets button.is-active { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); color: var(--text); }
.math-hint, .math-status { color: var(--muted); font-size: var(--math-supporting-text-size); line-height: 1.45; }
.math-workspace > p:not(.math-status):not(.math-hint) { color: var(--muted); font-size: var(--math-supporting-text-size); line-height: 1.45; }
.formula-display { display: block; width: fit-content; max-width: 100%; margin: .65rem 0; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }

.math-workspace { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--border); background: var(--surface); }
.math-workspace-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.math-presets { display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.math-presets button { min-height: 2.1rem; font-size: .72rem; padding: .35rem .55rem; }
.number-line { display: block; width: 100%; height: auto; margin-top: .4rem; overflow: visible; touch-action: none; }
.number-line .axis, .number-line .tick { stroke: var(--border-strong); }
.number-line .axis { stroke-width: 2; }
.number-line .tick { stroke-width: 1; }
.number-line .tick-label { fill: var(--muted); font-family: KaTeX_Main, serif; font-size: 20px; text-anchor: middle; }
.number-line .mean-line { stroke: var(--accent-secondary); stroke-width: 2; stroke-dasharray: 5 4; }
.number-line .mean-label { fill: var(--accent-secondary); font-family: KaTeX_Math, serif; font-size: 24px; font-weight: 600; text-anchor: middle; }
.number-line .deviation-line { stroke: var(--accent); stroke-width: 2; opacity: .72; }
.number-line .observation { fill: var(--accent); stroke: var(--bg); stroke-width: 3; cursor: grab; }
.number-line .observation:active { cursor: grabbing; }
.number-line .observation:focus { outline: none; stroke: var(--accent-secondary); stroke-width: 5; }
.number-line .observation-label { fill: var(--text); font-family: KaTeX_Math, serif; font-size: 22px; text-anchor: middle; pointer-events: none; }
.number-line .is-emphasized { opacity: 1; stroke-width: 4; }
.number-line[data-highlight="mean"] .observation, .number-line[data-highlight="mean"] .deviation-line,
.number-line[data-highlight="deviation"] .observation, .number-line[data-highlight="deviation"] .deviation-line { opacity: .36; }
.number-line[data-highlight="mean"] .mean-line, .number-line[data-highlight="deviation"] .deviation-line { opacity: 1; stroke-width: 4; }
.number-line[data-highlight="variance"] .deviation-line, .number-line[data-highlight="standard-deviation"] .deviation-line { opacity: 1; stroke-width: 3; }

.math-calculation dl { display: grid; grid-template-columns: minmax(8rem, .85fr) minmax(0, 2fr); border-top: 1px solid var(--border); }
.math-calculation dt, .math-calculation dd { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.math-calculation dt { color: var(--muted); font-family: var(--code); font-size: .78rem; letter-spacing: .03em; }
.math-calculation dd { overflow-wrap: anywhere; font-family: KaTeX_Main, serif; font-size: 1rem; text-align: right; }
.math-calculation[data-highlight="mean"] .calculation-mean,
.math-calculation[data-highlight="deviation"] .calculation-deviation,
.math-calculation[data-highlight="squared"] .calculation-squared,
.math-calculation[data-highlight="variance"] .calculation-variance,
.math-calculation[data-highlight="standard-deviation"] .calculation-standard-deviation { color: var(--accent); font-weight: 700; }

.inline-equation { font-family: KaTeX_Main, serif; white-space: nowrap; }
.z-score-view { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: .45rem; min-height: 8rem; padding: .9rem 0 .4rem; border-bottom: 1px solid var(--border-strong); }
.z-score-item { display: grid; grid-template-rows: 1fr auto; gap: .35rem; min-width: 0; text-align: center; }
.z-score-bar-wrap { display: flex; align-items: end; min-height: 5.5rem; border-bottom: 1px solid var(--border); }
.z-score-bar { width: 100%; height: 100%; min-height: 2px; }
.z-score-bar rect { fill: var(--accent-secondary); }
.z-score-item.is-negative .z-score-bar rect { fill: var(--accent); }
.z-score-value { font-family: KaTeX_Main, serif; font-size: clamp(.72rem, 2.5vw, .9rem); }
.z-score-view.is-undefined { display: block; min-height: auto; padding: .9rem; border: 1px solid var(--border); color: var(--muted); }

@media (max-width: 560px) {
  .math-workspace-heading { display: grid; }
  .math-presets { justify-content: start; }
  .math-calculation dl { grid-template-columns: 1fr; }
  .math-calculation dt { padding-bottom: .1rem; border-bottom: 0; }
  .math-calculation dd { padding-top: .1rem; text-align: left; }
  .z-score-view { gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) { .math-exploration-link, .equation-set button, .math-presets button { transition: none; } }

.normal-pdf, .normal-z-equation { font-family: KaTeX_Main, serif; font-size: clamp(1rem, 2.3vw, 1.2rem); overflow-wrap: anywhere; }
.normal-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.normal-controls label { display: grid; gap: .35rem; color: var(--text); font-family: var(--code); font-size: .78rem; }
.normal-controls output { color: var(--accent-secondary); font-family: KaTeX_Main, serif; font-size: 1.1rem; }
.normal-controls input { width: 100%; accent-color: var(--accent-secondary); }
.normal-curve, .normal-region { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.normal-curve .axis, .normal-region .axis { stroke: var(--border-strong); stroke-width: 2; }
.normal-curve .tick, .normal-region .tick { stroke: var(--border-strong); stroke-width: 1; }
.normal-curve .tick-label, .normal-region .tick-label { fill: var(--muted); font-family: KaTeX_Main, serif; font-size: 20px; text-anchor: middle; }
.normal-curve .curve, .normal-region .curve { fill: none; stroke: var(--accent-secondary); stroke-width: 3; }
.normal-curve .mean-guide { stroke: var(--accent-secondary); stroke-width: 2; stroke-dasharray: 5 4; }
.normal-curve .sigma-guide { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.normal-curve .guide-label { fill: var(--muted); font-family: KaTeX_Math, serif; font-size: 22px; text-anchor: middle; }
.normal-curve .mean-label { fill: var(--text); font-family: KaTeX_Math, serif; font-size: 26px; font-weight: 600; text-anchor: middle; }
.normal-curve .expectation-label { font-weight: 400; }
.normal-curve .observation-guide { stroke: var(--accent); stroke-width: 2; }
.normal-curve .observation-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 4; cursor: grab; }
.normal-curve .observation-dot:active { cursor: grabbing; }
.normal-curve .observation-dot:focus { outline: none; stroke: var(--accent-secondary); stroke-width: 6; }
.normal-curve .observation-label { fill: var(--accent); font-family: KaTeX_Math, serif; font-size: 24px; font-weight: 600; text-anchor: middle; }
.normal-curve[data-highlight="mean"] .mean-guide, .normal-curve[data-highlight="spread"] .sigma-guide, .normal-curve[data-highlight="observation"] .observation-guide, .normal-curve[data-highlight="z"] .observation-guide { stroke-width: 4; }
.normal-curve[data-highlight="mean"] .curve, .normal-curve[data-highlight="spread"] .curve { stroke-width: 4; }
.normal-curve[data-highlight="observation"] .observation-dot, .normal-curve[data-highlight="z"] .observation-dot { stroke: var(--accent-secondary); stroke-width: 6; }
.normal-region .area { fill: var(--accent-secondary-soft); }
.normal-region .band-edge { stroke: var(--accent-secondary); stroke-width: 2; stroke-dasharray: 4 3; }
.normal-region .band-label { fill: var(--accent-secondary); font-family: KaTeX_Math, serif; font-size: 22px; text-anchor: middle; }
.math-context-link { padding-top: var(--space-section-tight); border-top: 1px solid var(--border); font-family: var(--code); font-size: .88rem; }
.math-context-link a,
.math-article a[href^="http"] { color: var(--text); text-decoration: underline; text-decoration-color: currentColor; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.math-context-link a { display: inline-flex; align-items: baseline; gap: .35rem; }
.math-context-link a, .math-context-link a::after { text-decoration: none; }
.math-context-link a::after { content: none; }
.related-item-title { text-decoration: underline; text-decoration-color: currentColor; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.math-article a[href^="http"]::after { color: var(--accent-secondary); content: "↗"; display: inline-block; margin-left: .35rem; font-family: var(--serif); font-size: var(--up-right-arrow-size); font-weight: 300; line-height: 1; vertical-align: middle; opacity: 0; transform: translate(-.35rem, .15rem); transition: opacity var(--motion), transform var(--motion); }
.math-context-link a:hover, .math-context-link a:focus-visible,
.math-article a[href^="http"]:hover, .math-article a[href^="http"]:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.math-context-link a:hover .related-item-title, .math-context-link a:focus-visible .related-item-title { text-decoration-color: var(--accent); text-decoration-style: solid; }
.math-article a[href^="http"]:hover::after, .math-article a[href^="http"]:focus-visible::after { opacity: 1; transform: translate(0, 0); }

@media (max-width: 620px) {
  .normal-controls { grid-template-columns: 1fr; gap: .8rem; }
  .normal-curve .mean-label { font-size: 32px; }
}

/* Linear Algebra: transformations reuse the coordinate plane with calculated SVG geometry. */
.transform-plane { display: block; width: 100%; height: auto; margin-block: -.5rem; touch-action: none; overflow: hidden; }
.transform-grid-original { stroke: var(--border); stroke-width: 1; }
.transform-grid-result { stroke: var(--accent-secondary); stroke-width: 1.3; opacity: .44; }
.transform-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.transform-original { stroke: var(--accent); fill: var(--accent); stroke-width: 3; }
.transform-result { stroke: var(--accent-secondary); fill: var(--accent-secondary); stroke-width: 3.5; }
.transform-basis-one { stroke: var(--accent); fill: var(--accent); stroke-width: 2.4; opacity: .82; }
.transform-basis-two { stroke: var(--accent-secondary); fill: var(--accent-secondary); stroke-width: 2.4; opacity: .82; }
.transform-area { fill: var(--accent-secondary-soft); stroke: var(--accent-secondary); stroke-width: 2; opacity: .75; }
.transform-plane marker path { stroke: none; stroke-width: 0; }
.transform-handle { fill: var(--accent); fill-opacity: .001; stroke: var(--accent); stroke-opacity: .001; pointer-events: all; cursor: grab; }
.transform-handle-indicator { fill: var(--accent); stroke: var(--bg); stroke-width: 3; pointer-events: none; opacity: 0; }
.transform-handle:hover + .transform-handle-indicator, .transform-handle:focus + .transform-handle-indicator, .transform-handle-indicator.is-dragging { opacity: 1; }
.transform-handle:focus { outline: none; }
.transform-basis-readout { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--text); font-family: KaTeX_Main, serif; font-size: 1rem; line-height: 1.45; }
.transform-calculation, .transform-determinant, .transform-composition { overflow-wrap: anywhere; font-family: KaTeX_Main, serif; font-size: clamp(1rem, 3vw, 1.3rem); }
.transform-determinant { margin: 0; }
[data-transform-editor], [data-transform-basis], [data-transform-composition] { display: grid; gap: .85rem; }
[data-transform-determinant] { display: grid; gap: .65rem; }
[data-transform-determinant] > p { margin: 0; }
[data-transform-editor] > .matrix-display { justify-self: start; }
.transform-composition + button { appearance: none; margin-top: .7rem; min-height: 2.35rem; padding: .4rem .65rem; border: 1px solid var(--border-strong); border-radius: 0; background: transparent; color: var(--text); font-family: var(--code); cursor: pointer; }
.transform-composition + button:hover, .transform-composition + button:focus-visible { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }
@media (max-width: 620px) { .transform-plane { margin-block: -.65rem; } }
.eigen-plane { display: block; width: 100%; height: auto; margin-block: -.5rem; touch-action: none; }
.eigen-grid { stroke: var(--border); stroke-width: 1; }.eigen-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.eigen-original { stroke: var(--accent); fill: var(--accent); stroke-width: 3; }.eigen-result { stroke: var(--accent-secondary); fill: var(--accent-secondary); stroke-width: 3.5; }.eigen-result.is-aligned { stroke-width: 5; }
.eigen-plane marker path { stroke: none; stroke-width: 0; }.eigen-direction { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }.eigen-direction-1 { opacity: .32; }
.eigen-handle { fill: var(--accent); fill-opacity: .001; stroke: var(--accent); stroke-opacity: .001; pointer-events: all; cursor: grab; }.eigen-handle-indicator { fill: var(--accent); stroke: var(--bg); stroke-width: 3; pointer-events: none; opacity: 0; }.eigen-handle:hover + .eigen-handle-indicator, .eigen-handle:focus + .eigen-handle-indicator { opacity: 1; }
.eigen-status { color: var(--muted); font-size: .9rem; line-height: 1.45; }.eigen-status.is-found { color: var(--accent-secondary); font-weight: 700; }.eigen-readout { color: var(--text); font-family: KaTeX_Main, serif; font-size: 1rem; line-height: 1.45; }.eigen-readout + button { appearance: none; min-height: 2.3rem; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--code); padding: .4rem .65rem; cursor: pointer; }
[data-eigen-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-pca-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-eigen-editor], [data-eigen-result] { display: grid; gap: .8rem; } [data-eigen-editor] > .matrix-display { justify-self: start; }

/* PCA: a data cloud shares the familiar plane geometry without becoming a chart dashboard. */
.pca-stages { display: flex; flex-wrap: wrap; gap: .4rem; }
.pca-stages button { appearance: none; min-height: 2.25rem; padding: .35rem .55rem; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--code); font-size: .76rem; cursor: pointer; }
.pca-stages button.is-active, .pca-stages button:hover, .pca-stages button:focus-visible { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }
.pca-plot { display: block; width: 100%; height: auto; margin-block: -.45rem; overflow: hidden; }
.pca-grid { stroke: var(--border); stroke-width: 1; }.pca-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.pca-point { fill: var(--accent); stroke: var(--bg); stroke-width: 2; cursor: pointer; }.pca-point.is-selected { fill: var(--accent-secondary); stroke-width: 3; }
.pca-mean { fill: var(--text); stroke: var(--bg); stroke-width: 2; }.pca-label { fill: var(--muted); font: 600 18px KaTeX_Main, serif; pointer-events: none; }
.pca-ellipse { fill: var(--accent-secondary-soft); stroke: var(--accent-secondary); stroke-width: 2; stroke-dasharray: 6 5; }.pca-pc1 { stroke: var(--text); stroke-width: 4; }.pca-pc2 { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; opacity: .65; }.pca-pc1-label { fill: var(--text); }
.pca-projection { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .7; }.pca-projected { fill: var(--accent-secondary); stroke: var(--bg); stroke-width: 1.5; }
[data-pca-readout] { display: grid; gap: .6rem; }.pca-stage-copy { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }.pca-calculations { display: grid; gap: .3rem; color: var(--muted); font-family: var(--serif); font-size: .9rem; line-height: 1.45; }.pca-calculations p { margin: 0; overflow-wrap: anywhere; }.pca-calculations .math-expression { color: var(--text); font-size: 1em; }.pca-calculations strong { color: var(--text); font-family: var(--code); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }.pca-sample-note { font-family: var(--serif); font-size: .86em; }
.pca-covariance { color: var(--text); font-family: KaTeX_Main, serif; white-space: nowrap; }.pca-covariance i { font-family: KaTeX_Math, serif; }

/* Explorations: familiar controls, with the problem itself as the visual focus. */
.monty-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1rem); }
.monty-door { display: grid; place-items: center; gap: .5rem; min-height: clamp(8rem, 20vw, 11rem); border: 2px solid var(--border-strong); border-radius: 0; background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--code); }.monty-door:not(:disabled):hover, .monty-door:not(:disabled):focus-visible { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }.monty-door:disabled { cursor: default; }.monty-door.is-original { outline: 2px solid var(--accent); outline-offset: 3px; }.monty-door.is-final { border-color: var(--accent-secondary); }.monty-door.is-opened { color: var(--muted); background: transparent; }.monty-door.is-prize { border-color: var(--accent); }
.monty-door-number { font-size: clamp(1.45rem, 5vw, 2.25rem); }.monty-door-symbol { font-size: 1.3rem; }.monty-controls { display: flex; flex-wrap: wrap; gap: .5rem; }.monty-controls button { appearance: none; min-height: 2.5rem; padding: .5rem .8rem; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--code); cursor: pointer; }.monty-controls button:hover, .monty-controls button:focus-visible { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }.monty-result { color: var(--muted); }.monty-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.monty-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }.monty-cases > div { display: grid; gap: .35rem; padding: .7rem; border-top: 1px solid var(--border); }.monty-cases strong { font-family: var(--code); font-size: .82rem; }.monty-cases span { color: var(--muted); font-family: var(--serif); }
.monty-simulation { display: grid; gap: .6rem; }.monty-simulation p { display: grid; grid-template-columns: 9rem 1fr; gap: .25rem .8rem; margin: 0; }.monty-simulation strong { font-family: var(--code); font-size: .8rem; }.monty-simulation span { color: var(--muted); font-family: var(--serif); }.monty-simulation i { grid-column: 1 / -1; display: block; height: .55rem; border: 1px solid var(--border-strong); }.monty-simulation b { display: block; width: 0; height: 100%; background: var(--accent-secondary); transition: width 180ms ease; }
@media (max-width: 520px) { .monty-cases { grid-template-columns: 1fr; gap: .2rem; }.monty-simulation p { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .monty-simulation b { transition: none; } }
.bridges-map { display:block; width:100%; height:auto; touch-action:manipulation; }.bridge-water { fill:var(--accent-secondary-soft); stroke:var(--accent-secondary); stroke-width:1; opacity:.7; }.bridge-bank { fill:var(--surface); stroke:var(--border-strong); stroke-width:1.5; }.bridge-edge { fill:none; stroke:var(--accent); stroke-width:13; stroke-linecap:round; cursor:pointer; }.bridge-edge.is-available { stroke:var(--accent-secondary); stroke-width:17; }.bridge-edge.is-used { stroke:var(--muted); stroke-dasharray:5 7; opacity:.55; }.bridge-vertex { fill:var(--surface); stroke:var(--accent); stroke-width:3; cursor:pointer; }.bridge-vertex.is-graph { fill:var(--bg); }.bridge-vertex.is-current { fill:var(--accent-secondary-soft); stroke:var(--accent-secondary); }.bridge-label { fill:var(--text); font:17px var(--code); pointer-events:none; }.bridges-degrees { display:flex; flex-wrap:wrap; gap:.45rem 1rem; color:var(--muted); font-family:var(--serif); }.bridges-degrees strong { color:var(--text); font-family:var(--code); font-size:.78rem; }
.poker-cards{display:flex;flex-wrap:wrap;gap:.5rem}.poker-card{display:grid;grid-template-rows:auto auto;align-content:space-between;justify-items:center;min-width:3.5rem;min-height:5.6rem;padding:.4rem .5rem .7rem;border:1px solid var(--border-strong)}.poker-rank{font:1.2rem KaTeX_Main,serif}.poker-suit{display:grid;place-items:center;width:1.8rem;height:1.8rem;font-family:var(--code);font-size:1.8rem;font-weight:400;line-height:1}.poker-inline-suit{font-family:var(--code);font-size:1.1em}.poker-suit-diamonds,.poker-suit-hearts{color:var(--accent)}.poker-suit-clubs,.poker-suit-spades{color:var(--accent-secondary)}.poker-deal{appearance:none;justify-self:start;margin-top:.7rem;min-height:2.5rem;border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer;font-family:var(--code);padding:.5rem .8rem}.poker-deal:hover,.poker-deal:focus-visible{border-color:var(--accent-secondary);background:var(--accent-secondary-soft)}.poker-result{display:grid;gap:.25rem;color:var(--muted)}.poker-result strong{color:var(--accent-secondary);font:1.2rem var(--code)}.poker-table{display:grid;gap:.3rem}.poker-table div{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(10rem,1fr);gap:.15rem .8rem;padding:.45rem 0;border-top:1px solid var(--border)}.poker-table strong{grid-row:span 2;font-family:var(--code)}.poker-table span,.poker-table em,.poker-note{color:var(--muted);font-family:var(--serif)}.poker-table em{grid-column:1/-1;font-style:normal}.poker-note{font-size:.9em}@media(max-width:520px){.poker-table div{grid-template-columns:1fr}.poker-table strong{grid-row:auto}.poker-card{min-width:3rem;min-height:4.8rem}}
.poker-simulation-controls { justify-content: flex-end; }
@media (max-width: 560px) { .poker-simulation-controls { justify-content: flex-start; } }
.poker-table { gap: 0; }
.poker-table > div { grid-template-columns: minmax(9rem, .7fr) minmax(15rem, 1.3fr); grid-template-areas: "category theory" "observed observed"; gap: .45rem 1rem; padding: .7rem 0; }
.poker-table > div:last-child { border-bottom: 1px solid var(--border); }
.poker-table > div > strong { grid-area: category; grid-row: auto; }
.poker-theory { display: grid; grid-area: theory; gap: .25rem; }
.poker-table .poker-theory, .poker-table .poker-observed { font-size: .9rem; line-height: 1.45; }
.poker-observed { display: block; grid-area: observed; padding: .05rem 0 0; border: 0; }
@media (max-width: 620px) { .poker-table > div { grid-template-columns: 1fr; grid-template-areas: "category" "theory" "observed"; gap: .3rem; } }

/* Shared supporting-copy role across lessons and explorations. */
.math-exploration-meta, .equation-description, .pca-stage-copy, .pca-calculations, .pca-sample-note,
.eigen-status, .vector-readout, .bayes-frequency, .conditional-note,
.monty-result, .monty-cases span, .monty-simulation span, .bridges-degrees,
.poker-note, .poker-table .poker-theory, .poker-table .poker-observed,
[data-band-summary], [data-z-explanation], [data-z-score-summary],
[data-bridges-readout], [data-poker-sim-note] {
  font-size: var(--math-supporting-text-size);
  line-height: 1.45;
}
[data-band-summary], [data-z-explanation], [data-z-score-summary],
[data-bridges-readout], [data-poker-sim-note] { color: var(--muted); }
@media (max-width: 620px) { .pca-stages { gap: .3rem; }.pca-stages button { font-size: .7rem; padding: .32rem .42rem; }.pca-plot { margin-block: -.65rem; }.pca-label { font-size: 21px; } }

.conditional-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.population-grid-wrap { display: grid; gap: .8rem; }
.population-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(2px, .55vw, 5px);
  width: min(32rem, 100%);
  padding: clamp(.55rem, 2vw, .9rem);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  transition: opacity 180ms ease;
}
.population-cell { aspect-ratio: 1; min-width: 0; border: 1px solid var(--border-strong); background: var(--surface); transition: opacity 180ms ease, transform 180ms ease; }
.population-cell--a-only { border-color: var(--accent); background: var(--accent-soft); }
.population-cell--b-only { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }
.population-cell--both { border-color: var(--text); background: repeating-linear-gradient(135deg, var(--accent-soft) 0 4px, var(--accent-secondary-soft) 4px 8px); box-shadow: inset 0 0 0 1px var(--text); }
.population-grid[data-conditioned="true"] .population-cell:not(.population-cell--b-only):not(.population-cell--both) { opacity: .18; transform: scale(.82); }
.population-grid[data-highlight="a"] .population-cell:not(.population-cell--a-only):not(.population-cell--both),
.population-grid[data-highlight="intersection"] .population-cell:not(.population-cell--both),
.population-grid[data-highlight="b"] .population-cell:not(.population-cell--b-only):not(.population-cell--both),
.population-grid[data-highlight="conditional"] .population-cell:not(.population-cell--b-only):not(.population-cell--both) { opacity: .25; }
.population-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-family: var(--code); font-size: .74rem; }
.population-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.population-legend i { width: .85rem; height: .85rem; border: 1px solid var(--border-strong); background: var(--surface); }
.population-legend .legend-a { border-color: var(--accent); background: var(--accent-soft); }
.population-legend .legend-b { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }
.population-legend .legend-both { border-color: var(--text); background: repeating-linear-gradient(135deg, var(--accent-soft) 0 3px, var(--accent-secondary-soft) 3px 6px); }
.conditional-fraction { display: grid; grid-template-columns: max-content; justify-content: start; gap: .15rem; font-family: KaTeX_Main, serif; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.15; }
.conditional-fraction span:first-child { border-bottom: 1px solid currentColor; padding-bottom: .12rem; }
.conditional-note { color: var(--muted); font-size: .9rem; }

@media (max-width: 620px) {
  .conditional-controls { grid-template-columns: 1fr; }
  .population-grid { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .population-grid, .population-cell { transition: none; }
}

.bayes-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.bayes-stage { padding: .7rem 0; border-top: 1px solid var(--border); }
.bayes-stage strong { display: block; color: var(--accent); font-family: var(--code); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.bayes-stage > span { display: block; margin-top: .35rem; color: var(--muted); font-family: KaTeX_Main, serif; font-size: 1.05rem; }
.bayes-grid { width: min(32rem, 100%); }
.bayes-cell--a-without-evidence { border-color: var(--accent); background: var(--accent-soft); }
.bayes-cell--evidence-a { border: 2px solid var(--text); background: var(--accent); }
.bayes-cell--evidence-not-a { border: 2px dashed var(--text); background: var(--accent-secondary); }
.bayes-cell--not-a-without-evidence { background: var(--surface); }
.population-legend .bayes-legend-a { border-color: var(--accent); background: var(--accent-soft); }
.population-legend .bayes-legend-not-a { background: var(--surface); }
.population-legend .bayes-legend-evidence-a { border: 2px solid var(--text); background: var(--accent); }
.population-legend .bayes-legend-evidence-not-a { border: 2px dashed var(--text); background: var(--accent-secondary); }
.bayes-grid[data-observed="true"] .bayes-cell:not(.bayes-cell--evidence-a):not(.bayes-cell--evidence-not-a) { opacity: .16; transform: scale(.82); }
.bayes-grid[data-highlight="prior"] .bayes-cell:not(.bayes-cell--a-without-evidence):not(.bayes-cell--evidence-a),
.bayes-grid[data-highlight="true"] .bayes-cell:not(.bayes-cell--evidence-a),
.bayes-grid[data-highlight="false"] .bayes-cell:not(.bayes-cell--evidence-not-a),
.bayes-grid[data-highlight="evidence"] .bayes-cell:not(.bayes-cell--evidence-a):not(.bayes-cell--evidence-not-a),
.bayes-grid[data-highlight="posterior"] .bayes-cell:not(.bayes-cell--evidence-a):not(.bayes-cell--evidence-not-a) { opacity: .22; }
.bayes-frequency { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.bayes-comparison { color: var(--text); font-family: KaTeX_Main, serif; font-size: clamp(1.05rem, 2.5vw, 1.3rem); }

@media (max-width: 620px) {
  .bayes-stages { grid-template-columns: 1fr; gap: .25rem; }
}

/* Linear Algebra: coordinate geometry needs a plane rather than a chart. */
.vector-plane { display: block; width: 100%; height: auto; margin-block: -.55rem; touch-action: none; overflow: hidden; }
.vector-grid { stroke: var(--border); stroke-width: 1; }
.vector-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.vector-tick { fill: var(--muted); font-family: KaTeX_Main, serif; font-size: 13px; font-weight: 400; text-anchor: middle; }
.vector-line { fill: none; stroke-width: 3; }
.vector-u { stroke: var(--accent); fill: var(--accent); }
.vector-v { stroke: var(--accent-secondary); fill: var(--accent-secondary); }
.vector-sum { stroke: var(--text); fill: var(--text); }
.vector-scaled { stroke: var(--muted); fill: var(--muted); stroke-dasharray: 5 4; }
.vector-zero { fill: var(--muted); stroke: var(--bg); stroke-width: 2; }
.vector-plane marker path { stroke: none; stroke-width: 0; }
.vector-translation { opacity: .5; stroke-dasharray: 4 4; }
.vector-label { font-family: KaTeX_Math, serif; font-size: 16px; font-weight: 400; pointer-events: none; }
.vector-handle { stroke-width: 3; cursor: grab; pointer-events: all; }
.vector-handle.vector-u { fill: var(--accent); fill-opacity: .001; stroke: var(--accent); stroke-opacity: .001; }
.vector-handle.vector-v { fill: var(--accent-secondary); fill-opacity: .001; stroke: var(--accent-secondary); stroke-opacity: .001; }
.vector-handle:focus { outline: none; stroke-width: 3; }
.vector-handle-indicator { pointer-events: none; opacity: 0; stroke: var(--bg); stroke-width: 3; }
.vector-handle.vector-u:hover + .vector-handle-indicator.vector-u, .vector-handle.vector-u:focus + .vector-handle-indicator.vector-u, .vector-handle-indicator.vector-u.is-dragging { fill: var(--accent); opacity: 1; }
.vector-handle.vector-v:hover + .vector-handle-indicator.vector-v, .vector-handle.vector-v:focus + .vector-handle-indicator.vector-v, .vector-handle-indicator.vector-v.is-dragging { fill: var(--accent-secondary); opacity: 1; }
.vector-scalar-control { display: grid; grid-template-columns: max-content 3rem minmax(11rem, 19rem); align-items: center; gap: .8rem; width: min(100%, 31rem); font-family: var(--code); font-size: .82rem; }
.vector-scalar-control output { color: var(--accent-secondary); font-family: KaTeX_Main, serif; font-size: 1.1rem; text-align: right; }
.vector-scalar-control input { width: 100%; accent-color: var(--accent-secondary); }
.vector-readout { display: flex; flex-wrap: wrap; gap: .3rem .65rem; color: var(--muted); font-family: var(--serif); font-size: .9rem; line-height: 1.45; }
.vector-reading { white-space: nowrap; }
.vector-matrix { font-family: KaTeX_Main, serif; font-size: clamp(1.1rem, 3vw, 1.45rem); }.vector-matrix .matrix-variable { font-family: KaTeX_Math, KaTeX_Main, serif; font-style: italic; }.vector-matrix-copy { font-family: var(--serif); }
@media (max-width: 620px) { .vector-tick { font-size: 24px; } .vector-label { font-size: 28px; } .vector-scalar-control { grid-template-columns: max-content 1fr; } .vector-scalar-control input { grid-column: 1 / -1; } }

/* Linear Algebra: matrices use bracketed collections rather than table-like UI. */
.matrix-dimension-controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.matrix-dimension-controls button { appearance: none; min-height: 2.35rem; padding: .42rem .65rem; border: 1px solid var(--border-strong); border-radius: 0; background: transparent; color: var(--text); font-family: KaTeX_Main, serif; font-size: 1rem; cursor: pointer; }
.matrix-dimension-controls button:hover, .matrix-dimension-controls button:focus-visible, .matrix-dimension-controls button.is-active { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); }
.matrix-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.matrix-editor-head > div { display: flex; align-items: baseline; gap: .65rem; }
.matrix-editor-head p { margin: 0; color: var(--muted); font-family: var(--code); font-size: .78rem; }
.matrix-name { font-family: KaTeX_Math, serif; font-size: 1.5rem; font-style: italic; }
.matrix-dimension { color: var(--accent-secondary); font-family: KaTeX_Main, serif; font-size: 1rem; }
.matrix-display { display: inline-grid; grid-template-columns: auto auto auto; align-items: stretch; vertical-align: middle; min-width: max-content; font-family: KaTeX_Main, serif; }
.matrix-bracket { position: relative; width: .48rem; min-height: 100%; }
.matrix-bracket::before, .matrix-bracket::after { content: ""; position: absolute; width: .48rem; border-top: 2px solid currentColor; }
.matrix-bracket::before { top: 0; }.matrix-bracket::after { bottom: 0; }
.matrix-bracket:first-child { border-left: 2px solid currentColor; }.matrix-bracket:first-child::before, .matrix-bracket:first-child::after { left: 0; }
.matrix-bracket:last-child { border-right: 2px solid currentColor; }.matrix-bracket:last-child::before, .matrix-bracket:last-child::after { right: 0; }
.matrix-cells { display: grid; gap: .23rem; padding: .24rem 0; }
.matrix-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.15rem, auto); gap: .38rem; }
.matrix-cell { display: grid; place-items: center; min-width: 2.15rem; min-height: 1.8rem; padding: .1rem .25rem; color: var(--text); font-size: 1.1rem; line-height: 1; }
.matrix-cell .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.matrix-cell input { box-sizing: border-box; width: 3.05rem; min-height: 2.15rem; border: 1px solid var(--border-strong); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; text-align: center; }
.matrix-cell input:focus { outline: 2px solid var(--accent-secondary); outline-offset: 1px; }
.matrix-result-cell { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; }
.matrix-result-cell:hover, .matrix-result-cell:focus-visible, .matrix-result-cell.is-selected, .matrix-row-calculations button:hover, .matrix-row-calculations button:focus-visible, .matrix-row-calculations button.is-selected { border-color: var(--accent-secondary); background: var(--accent-secondary-soft); outline: none; }
.matrix-operation, [data-matrix-editor], [data-matrix-addition], [data-matrix-vector], [data-matrix-product] { min-width: 0; max-width: 100%; }
[data-matrix-editor] { display: grid; gap: .8rem; }
[data-matrix-editor] > .matrix-display { justify-self: start; }
.matrix-operation + .math-hint { margin-top: .9rem; }
.matrix-operation { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--text); font-family: KaTeX_Main, serif; font-size: 1.05rem; }
.matrix-operation > :is(span, b) { align-self: center; }
.matrix-operation > b { font-size: 1.45rem; font-weight: 400; line-height: 1; }
.matrix-variable, .matrix-expression { font-family: KaTeX_Math, KaTeX_Main, serif; font-size: 1.15em; font-style: italic; }
.matrix-operator { font-family: KaTeX_Main, serif; font-size: 1.15em; }
.matrix-scalar-wrap { display: grid; gap: .65rem; }
.matrix-scalar-control { display: grid; grid-template-columns: max-content 3rem minmax(10rem, 20rem); align-items: center; gap: .7rem; width: min(100%, 30rem); font-family: var(--code); font-size: .82rem; }
.matrix-scalar-control output { color: var(--accent-secondary); font-family: KaTeX_Main, serif; font-size: 1.05rem; text-align: right; }
.matrix-scalar-control input { width: 100%; accent-color: var(--accent-secondary); }
.matrix-vector { display: inline-flex; align-items: start; font-family: KaTeX_Main, serif; font-size: 1.2rem; white-space: nowrap; }
.matrix-vector sup { margin-left: .1rem; font-size: .65em; }
.matrix-row-calculations { display: grid; gap: .4rem; margin-top: .65rem; }
.matrix-row-calculations button, .matrix-product-detail { box-sizing: border-box; width: fit-content; max-width: 100%; overflow-wrap: anywhere; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-family: KaTeX_Main, serif; font-size: .92rem; line-height: 1.4; text-align: left; }
.matrix-product-detail { margin-top: .65rem; color: var(--muted); }
.matrix-order-note { color: var(--accent); font-family: var(--code); font-size: .82rem; }
.matrix-invalid { color: var(--accent); font-family: var(--code); font-size: .8rem; }
.matrix-bridge { display: grid; gap: .45rem; padding: .9rem 0; border-block: 1px solid var(--border); font-family: KaTeX_Main, serif; font-size: clamp(1.25rem, 3vw, 1.7rem); }
@media (max-width: 620px) {
  .matrix-operation { align-items: center; gap: .3rem; }
  .matrix-operation > .matrix-display { min-width: 0; max-width: 100%; }
  .matrix-row { grid-auto-columns: minmax(1.7rem, auto); gap: .26rem; }
  .matrix-cell { min-width: 1.7rem; min-height: 1.65rem; padding-inline: .14rem; font-size: 1rem; }
  .matrix-cell input { width: 2.25rem; min-height: 2rem; }
  .matrix-bracket { width: .4rem; }
  .matrix-bracket::before, .matrix-bracket::after { width: .4rem; }
  .matrix-scalar-control { grid-template-columns: max-content 1fr; }
  .matrix-scalar-control input { grid-column: 1 / -1; }
  .matrix-row-calculations button, .matrix-product-detail { width: 100%; }
}