/* Shared presentation for the short mathematics foundation lessons. */
html[lang="en"] .lzh, html[lang^="zh"] .len { display: none !important; }
.mt-prereq { color: var(--text-desc); margin-top: 14px; font-size: .9rem; }
.mt-lab, .mt-content { width: min(100% - 40px, 980px); margin: 0 auto; }
.mt-lab { padding: 25px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, #fff); }
.mt-lab h2, .mt-content h2 { margin: 0 0 10px; font-size: 1.35rem; }
.mt-lab p, .mt-content p { line-height: 1.75; }
.mt-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.mt-controls label { display: flex; flex: 1 1 155px; min-width: 130px; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.mt-controls label input[type="range"] { flex: 1 1 90px; min-width: 90px; accent-color: #0f766e; }
.mt-controls input[type="number"], .mt-controls select { max-width: 190px; padding: 8px; border: 1px solid #a4b5bf; border-radius: 7px; background: #fff; color: #17202a; }
.mt-controls button, .mt-table button { padding: 8px 13px; border: 1px solid #0f766e; border-radius: 7px; color: #115e59; background: #f0fdfa; font: inherit; cursor: pointer; }
.mt-controls button:disabled { opacity: .5; cursor: default; }
.mt-controls button[aria-pressed="true"] { background: #c4ece5; border-width: 2px; }
.mt-controls button:focus-visible, .mt-table button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
#mt-graph { display: block; width: 100%; height: auto; max-height: 420px; border: 1px solid #dce5e8; border-radius: 10px; background: #f8fbfb; touch-action: none; }
.mt-grid { stroke: #d8e4e6; stroke-width: 1; }
.mt-axis { stroke: #667c83; stroke-width: 1.5; }
.mt-primary { stroke: #0f766e; stroke-width: 3; }
.mt-secondary { stroke: #7c3aed; stroke-width: 3; }
.mt-projection { stroke: #c45110; stroke-width: 4; }
.mt-guide { stroke: #8b6b51; stroke-width: 1.5; stroke-dasharray: 5 4; }
.mt-point-a { fill: #0f766e; stroke: #fff; stroke-width: 2; }
.mt-point-b { fill: #7c3aed; stroke: #fff; stroke-width: 2; }
.mt-point-proj { fill: #c45110; stroke: #fff; stroke-width: 2; }
.mt-node { fill: #e7f6f3; stroke: #0f766e; stroke-width: 1.5; }
.mt-contour { fill: none; stroke: #c8dddd; stroke-width: 1.2; }
.mt-event-hit { fill: #b6e7dc; stroke: #0f766e; stroke-width: 2; }
.mt-inactive { fill: #eef1f2; stroke: #aab7ba; stroke-width: 1; }
.mt-bar-a { fill: #0f766e; }
.mt-bar-b { fill: #7c3aed; }
.mt-density-bar { fill: #d8ece9; stroke: #83aaa4; stroke-width: 1; }
.mt-density-selected { fill: #60b8a8; opacity: .75; }
.mt-box { fill: none; stroke: #c45110; stroke-width: 2; stroke-dasharray: 5 3; }
.mt-label { fill: #263d42; font: 11px sans-serif; }
.mt-readout { min-height: 2em; padding: 12px; margin: 12px 0; border-radius: 8px; background: #eaf6f4; color: #134e4a; font-weight: 600; overflow-wrap: anywhere; }
.mt-matrices { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; }
.mt-matrices > div { text-align: center; }
.mt-op { font-size: 1.5rem; }
.mt-table { border-collapse: collapse; margin: 10px auto; background: #fff; font-variant-numeric: tabular-nums; }
.mt-table th, .mt-table td { min-width: 46px; padding: 7px; border: 1px solid #c5d4d6; text-align: center; }
.mt-table th { background: #edf5f4; }
.mt-table .mt-highlight { background: #c4ece5; outline: 2px solid #0f766e; outline-offset: -2px; }
.mt-table button { min-width: 38px; }
.mt-invalid { padding: 12px; border: 1px solid #b54708; border-radius: 8px; color: #8a3100; background: #fff6ed; }
.mt-content { padding: 32px 0; }
.mt-reading { margin: 24px 0; }
.mt-reading h3 { margin: 0 0 8px; font-size: 1.1rem; }
.mt-pitfall { padding: 18px; border-left: 4px solid #c97713; background: #fff8ed; }
.mt-reading .hs-chap-formula { overflow-x: auto; }
.mt-completion { margin-top: 24px; }
.mt-completion button { padding: 10px 16px; border: 1px solid #0f766e; border-radius: 7px; background: #f0fdfa; color: #115e59; font: inherit; cursor: pointer; }
.mt-completion button:disabled { opacity: .55; cursor: default; }
.mt-completion button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.mt-completion p { margin-top: 8px; color: #40565a; }
@media (max-width: 480px) {
  .mt-lab, .mt-content { width: min(100% - 24px, 980px); }
  .mt-lab { padding: 16px; }
  .mt-controls label { flex-basis: 135px; }
  .mt-table th, .mt-table td { min-width: 36px; padding: 5px; }
}