.interactive-course[data-course="machine-learning"] .lesson-main :is(h1,h2,h3,.section-prose) { overflow-wrap: anywhere; }
.interactive-course[data-course="machine-learning"] .section-prose pre { overflow-wrap: normal; }
.interactive-course[data-course="machine-learning"] .section-prose pre + p { margin-top: 1.25rem; }
.interactive-course[data-course="machine-learning"] .visual-comparison :is(.programming-flow-arrow,.programming-stage-number) { display: none; }
.ml-lab { padding: clamp(12px, 3vw, 24px); border: 1px solid var(--border); border-radius: 18px; background: var(--panel); margin: 24px 0; }
.ml-lab-controls { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.ml-lab-controls label { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 4ch; align-items: center; width: 100%; gap: 12px; font-weight: 600; }
.ml-lab-controls input { width: 100%; min-width: 0; accent-color: var(--accent); min-height: 44px; cursor: pointer; }
.ml-lab-controls output { font-variant-numeric: tabular-nums; min-width: 3ch; }
.ml-lab table { width: 100%; border-collapse: collapse; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.ml-lab caption { text-align: left; font-weight: 600; margin-bottom: 12px; }
.ml-lab :is(th,td) { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
.ml-lab thead { background: var(--accent-soft); }
.ml-lab tr[data-error="true"] [data-ml-error], .ml-lab tr[data-error="true"] [data-ml-decision] { font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.ml-lab-summary { font-weight: 600; border-left: 3px solid var(--accent); padding-left: 12px; }
@media (max-width: 600px) { .ml-lab :is(th,td) { padding: 8px 4px; } }
.ml-tree { margin: 24px 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; color: var(--accent); }
.ml-tree svg { display: block; width: 100%; max-width: 480px; margin: auto; }
.ml-tree figcaption { color: var(--muted); margin-top: 12px; }
/* House-price introduction: values stay visible while inspection changes emphasis. */
.ml-house-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 14px; }
.ml-house-table table { display: table; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ml-house-table caption { text-align: left; padding: 14px; background: var(--accent-soft); font-weight: 600; }
.ml-house-table :is(th,td) { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.ml-house-table thead { background: var(--panel); }
.ml-house-table tbody tr { background: var(--panel); }
.ml-house-table tbody tr:last-child :is(th,td) { border-bottom: 0; }
.ml-house-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ml-house-plot { margin: 24px 0; }
.ml-house-plot svg { display: block; width: 100%; max-width: 540px; margin: auto; color: var(--text); }
.ml-house-grid { fill: none; stroke: var(--border); }
.ml-house-axis { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ml-house-axis-labels { fill: currentColor; font-family: inherit; font-size: 14px; }
.ml-house-line { fill: none; stroke-width: 3; }
.ml-house-line-a { stroke: #c66324; stroke-dasharray: 7 5; }
.ml-house-line-b { stroke: #4285cf; }
.ml-house-points { fill: currentColor; }
.ml-house-plot figcaption { margin-top: 14px; }
.ml-house-choices { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.ml-house-choices button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.ml-house-choices button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ml-house-choices button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ml-house-lab[data-house-active="a"] .ml-house-line-a,
.ml-house-lab[data-house-active="b"] .ml-house-line-b { stroke-width: 6; }
.ml-house-inspection { padding: 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); min-height: 7em; }
.ml-house-scroll-hint { display: none; color: var(--muted); }
.ml-house-calculation { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft); }
@media (max-width: 600px) {
  .ml-house-table :is(th,td) { padding: 10px 8px; }
  .ml-house-lab .ml-house-table table { min-width: 470px; }
  .ml-house-scroll-hint { display: block; }
  .ml-house-calculation { padding: 14px; }
}
/* Topic diagrams separate known data, fitted settings and a new estimate. */
.learning-visual.ml-concept-visual { background: var(--panel); border-color: var(--border); padding: clamp(16px, 3vw, 28px); }
.ml-concept-visual .visual-symbol { display: none; }
.ml-map-phase + .ml-map-phase { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 24px; }
.ml-map-phase-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; }
.ml-map-phase-heading p { margin: 0; }
.ml-map-phase-label { display: inline-block; font-size: .85em; font-weight: 750; letter-spacing: .03em; color: var(--accent); }
.ml-training-route,.ml-prediction-route { display: grid; grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr); align-items: center; }
.ml-concept-visual h4 { font-size: var(--text-body); margin: 0 0 14px; }
.ml-sale-records { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ml-sale-records h4 { padding: 14px 16px 0; }
.ml-sale-records table { display: table; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ml-sale-records :is(th,td) { padding: 9px 12px; border: 0; border-top: 1px solid var(--border); text-align: left; }
.ml-sale-records th { font-size: .85em; font-weight: 650; }
.ml-sale-records td:last-child { background: var(--accent-soft); }
.ml-map-connector { text-align: center; color: var(--muted); display: flex; flex-direction: column; font-size: .85em; }
.ml-map-arrow { font-size: 28px; line-height: 1.1; }
.ml-model-settings { border: 1px solid var(--border); border-top: 4px solid #4285cf; padding: 20px; border-radius: 14px; }
.ml-model-settings dl { margin: 0; display: grid; gap: 16px; }
.ml-concept-visual dt { color: var(--muted); font-size: .9em; }
.ml-concept-visual dd { margin: 4px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-model-settings dd { font-size: 1.35em; }
.ml-new-house { text-align: center; padding: 16px; }
.ml-new-house svg { width: 130px; max-width: 100%; height: 90px; color: var(--accent); }
.ml-house-outline,.ml-house-floorplan { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ml-house-floorplan { fill: var(--accent-soft); stroke-width: 2; }
.ml-area-value { margin: 0 0 8px; font-size: 1.4em; font-variant-numeric: tabular-nums; }
.ml-map-note { color: var(--muted); font-size: .9em; margin: 8px 0 0; }
.ml-predicted-price { border: 1px solid var(--border); border-top: 4px solid #4285cf; border-radius: 14px; padding: 20px; }
.ml-price-value { font-size: clamp(26px, 3vw, 34px); font-weight: 750; letter-spacing: -.03em; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.ml-price-calculation { font-variant-numeric: tabular-nums; margin: 0 0 16px; }
.ml-reused-settings { font-size: .85em; color: var(--muted); margin: 0; }
.ml-area-control { align-items: center; gap: 16px; padding: 18px; border-radius: 12px; background: var(--accent-soft); margin-top: 18px; }
.ml-area-control label { display: grid; gap: 10px; flex: 1; min-width: 0; }
.ml-area-control input { accent-color: var(--accent); width: 100%; min-height: 36px; cursor: pointer; }
.ml-area-control output { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
.ml-rule-contrast { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.ml-rule-contrast article + article { border-left: 1px solid var(--border); padding-left: 24px; }
.ml-rule-contrast h4 { margin-top: 12px; }
.ml-rule-contrast dl { display: grid; gap: 18px; margin: 0; }
.ml-contrast-result { border-top: 1px solid var(--border); padding-top: 14px; }
.ml-contrast-result dd { font-size: 1.3em; }
@media (max-width: 650px) {
  .ml-training-route,.ml-prediction-route { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .ml-map-connector { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
  .ml-map-arrow { transform: rotate(90deg); }
  .ml-rule-contrast { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .ml-rule-contrast article + article { border-left: 0; border-top: 1px solid var(--border); padding: 22px 0 0; }
  .ml-model-settings dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
}
.ml-agent-loop { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 24px 0; }
.ml-agent-loop > div { display: grid; gap: 6px; padding: 16px 20px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--panel); }
.ml-agent-loop > div span { color: var(--muted); font-size: .9em; }
.ml-agent-loop > span { text-align: center; font-size: 24px; line-height: 1; transform: rotate(90deg); }
.ml-cluster-picture { margin: 24px 0; padding: 20px; border: 1px solid var(--border); border-radius: 16px; }
.ml-cluster-pairs { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0; }
.ml-cluster-pairs > div { flex: 1; min-width: 180px; border: 2px dashed var(--accent); padding: 16px; border-radius: 18px; }
.ml-cluster-pairs h4 { margin: 0 0 14px; font-size: var(--text-body); }
.ml-cluster-pairs span { display: inline-flex; min-width: 64px; min-height: 64px; align-items: center; justify-content: center; margin: 4px; border-radius: 50%; background: var(--accent-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Named learning types remain distinguishable without relying on color alone. */
.ml-type-label { display: flex; align-items: center; gap: 10px; }
.ml-type-symbol { width: 36px; height: 36px; flex: 0 0 36px; padding: 4px; border-radius: 10px; background: var(--type-symbol-bg); color: var(--type-ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-learning-types { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.ml-rule-contrast.ml-learning-types article { padding: 20px; border: 1px solid var(--type-edge); border-top: 4px solid var(--type-ink); border-radius: 16px; background: var(--type-bg); }
.ml-learning-types [data-learning-kind="supervised"] { --type-ink:#245f99; --type-bg:#edf5ff; --type-edge:#bfd7f0; --type-symbol-bg:#dcecff; }
.ml-learning-types [data-learning-kind="unsupervised"] { --type-ink:#7251a0; --type-bg:#f5effc; --type-edge:#dac9ed; --type-symbol-bg:#eaddf8; }
.ml-learning-types [data-learning-kind="reinforcement"] { --type-ink:#946017; --type-bg:#fff6e7; --type-edge:#ebd4ab; --type-symbol-bg:#fae7bf; }
.ml-learning-types .ml-map-phase-label { color: var(--type-ink); }
.ml-learning-types .ml-contrast-result { border-color: var(--type-edge); }
:root[data-theme="dark"] .ml-learning-types [data-learning-kind="supervised"] { --type-ink:#9ccaff; --type-bg:#192b40; --type-edge:#345477; --type-symbol-bg:#233e5b; }
:root[data-theme="dark"] .ml-learning-types [data-learning-kind="unsupervised"] { --type-ink:#d0b1f2; --type-bg:#2b213c; --type-edge:#574172; --type-symbol-bg:#403052; }
:root[data-theme="dark"] .ml-learning-types [data-learning-kind="reinforcement"] { --type-ink:#efc37e; --type-bg:#352b1b; --type-edge:#6f5630; --type-symbol-bg:#4b3c23; }
@media (max-width: 1200px) { .ml-learning-types { grid-template-columns: minmax(0,1fr); } }
.ml-application-path { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 24px 0; }
.ml-application-path > div { padding: 16px 20px; display: grid; gap: 8px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--panel); }
.ml-application-path > div span { color: var(--muted); }
.ml-application-path > span { text-align: center; font-size: 24px; transform: rotate(90deg); }
.ml-book-match { display: grid; gap: 14px; margin: 20px 0; }
.ml-book-match > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.ml-book-match strong { min-width: 125px; }
.ml-book-match span { padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); }
.ml-book-match .ml-tag-match { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ml-book-match b { margin-left: auto; font-size: .9em; }
.ml-application-contrast { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.ml-rule-contrast.ml-application-contrast article { padding: 20px; border: 1px solid var(--border); border-top: 4px solid var(--app-ink); border-radius: 16px; background: var(--app-bg); }
.ml-application-contrast [data-application="recommendation"] { --app-ink:#245f99; --app-bg:#edf5ff; }
.ml-application-contrast [data-application="message"] { --app-ink:#7251a0; --app-bg:#f5effc; }
.ml-application-contrast [data-application="forecast"] { --app-ink:#946017; --app-bg:#fff6e7; }
.ml-application-contrast .ml-map-phase-label { color: var(--app-ink); }
.ml-application-symbol { width: 32px; height: 32px; flex: 0 0 32px; color: var(--app-ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .ml-application-contrast [data-application="recommendation"] { --app-ink:#9ccaff; --app-bg:#192b40; }
:root[data-theme="dark"] .ml-application-contrast [data-application="message"] { --app-ink:#d0b1f2; --app-bg:#2b213c; }
:root[data-theme="dark"] .ml-application-contrast [data-application="forecast"] { --app-ink:#efc37e; --app-bg:#352b1b; }
@media (max-width: 1200px) { .ml-application-contrast { grid-template-columns: minmax(0,1fr); } }

/* Match a raw CSV record to its parsed table without row striping. */
.ml-dataset-loading { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 20px; align-items: center; }
.ml-dataset-loading > div { min-width: 0; }
.ml-dataset-source pre { margin-bottom: 0; }
.ml-dataset-connector { text-align: center; color: var(--section-ink); }
.ml-dataset-connector > span { font-size: 36px; }
.ml-dataset-connector p { font-size: var(--text-label); line-height: 1.5; margin: 8px 0 0; }
.ml-dataset-table { overflow-x: auto; margin: 20px 0; }
.ml-dataset-table table { display: table; width: 100%; font-variant-numeric: tabular-nums; }
.ml-dataset-table caption { text-align: left; padding: 14px; font-weight: 650; background: #f5eddf; color: #62471f; }
.ml-dataset-table th { background: #e8eef8; color: #304e75; text-align: left; }
.ml-dataset-table td { background: var(--panel); }
.ml-dataset-table td.ml-cell-focus { background: var(--section-soft); color: var(--section-ink); box-shadow: inset 0 0 0 2px var(--section-ink); font-weight: 700; }
.ml-dataset-table td span { display: block; font-size: var(--text-label); font-weight: 500; }
.ml-dataset-table .ml-map-note { margin: 16px 0 0; }
:root[data-theme=dark] .ml-dataset-table caption { background: #342c20; color: #e7cf9e; }
:root[data-theme=dark] .ml-dataset-table th { background: #233247; color: #b7d2f4; }
@media (max-width: 1200px) {
  .ml-dataset-loading { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ml-dataset-connector > span { display: inline-block; transform: rotate(90deg); }
  .ml-dataset-connector p { margin-top: 0; }
}

/* Missing measurements and unusual observations have different meanings. */
.ml-rule-contrast.ml-data-quality article { padding: 24px; border: 1px solid var(--quality-edge); border-top: 4px solid var(--quality-ink); border-radius: 16px; background: var(--quality-bg); }
.ml-data-quality [data-quality=missing] { --quality-bg: #edf3fc; --quality-ink: #366394; --quality-edge: #c3d6ed; }
.ml-data-quality [data-quality=unusual] { --quality-bg: #fff5e5; --quality-ink: #926017; --quality-edge: #ead5b3; }
.ml-data-quality .ml-type-label, .ml-data-quality .ml-contrast-result dd { color: var(--quality-ink); }
.ml-quality-symbol { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 2px solid currentColor; border-radius: 50%; font-size: 24px; font-weight: 750; }
.ml-data-quality [data-quality=missing] .ml-quality-symbol { border-style: dashed; }
:root[data-theme=dark] .ml-data-quality [data-quality=missing] { --quality-bg: #1d2c41; --quality-ink: #acd0f4; --quality-edge: #395777; }
:root[data-theme=dark] .ml-data-quality [data-quality=unusual] { --quality-bg: #342a1c; --quality-ink: #ebc788; --quality-edge: #675334; }
.ml-missing-figure { margin: 28px 0; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--section-edge); border-radius: 16px; }
.ml-value-absent { color: var(--muted); font-style: italic; }
.ml-fare-plot { width: 100%; min-width: 360px; height: auto; color: var(--section-ink); }
.ml-missing-figure:has(.ml-fare-plot) { overflow-x: auto; }
.ml-fare-plot text { fill: var(--text); font-family: var(--font-text); font-size: 14px; }
.ml-fare-plot circle { fill: var(--section-ink); stroke: var(--panel); stroke-width: 2px; }
.ml-fare-plot .ml-fare-flag { fill: #c27022; }
.ml-fare-axis { stroke: var(--muted); stroke-width: 1.5px; }
.ml-fare-fence { stroke: #c27022; stroke-width: 2px; stroke-dasharray: 5 4; }
:root[data-theme=dark] .ml-fare-plot .ml-fare-flag { fill: #edbf7c; }
:root[data-theme=dark] .ml-fare-fence { stroke: #edbf7c; }

/* Column scaling and row normalization use different reference values. */
.ml-rule-contrast.ml-scale-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-rule-contrast.ml-scale-methods article { padding: 22px; border: 1px solid var(--scale-edge); border-top: 4px solid var(--scale-ink); border-radius: 16px; background: var(--scale-bg); }
.ml-scale-methods [data-quality=standard] { --scale-bg: #edf3fc; --scale-ink: #366394; --scale-edge: #c3d6ed; }
.ml-scale-methods [data-quality=range] { --scale-bg: #eaf7f2; --scale-ink: #26736c; --scale-edge: #c4e1d9; }
.ml-scale-methods [data-quality=row] { --scale-bg: #fff5e5; --scale-ink: #926017; --scale-edge: #ead5b3; }
.ml-scale-methods .ml-type-label, .ml-scale-methods .ml-map-phase-label, .ml-scale-methods .ml-contrast-result dd { color: var(--scale-ink); }
:root[data-theme=dark] .ml-scale-methods [data-quality=standard] { --scale-bg: #1d2c41; --scale-ink: #acd0f4; --scale-edge: #395777; }
:root[data-theme=dark] .ml-scale-methods [data-quality=range] { --scale-bg: #203931; --scale-ink: #93d7ca; --scale-edge: #345c50; }
:root[data-theme=dark] .ml-scale-methods [data-quality=row] { --scale-bg: #342a1c; --scale-ink: #ebc788; --scale-edge: #675334; }
@media (max-width: 1200px) { .ml-rule-contrast.ml-scale-methods { grid-template-columns: minmax(0, 1fr); } }

/* A partition separates complete records, not features from their targets. */
.ml-split-record-label { margin: 0 0 20px; }
.ml-split-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ml-split-bins article { padding: 22px; border: 1px solid var(--split-edge); border-top: 4px solid var(--split-ink); border-radius: 16px; background: var(--split-bg); }
.ml-split-bins [data-split-role=train] { --split-bg: #edf3fc; --split-ink: #366394; --split-edge: #c3d6ed; }
.ml-split-bins [data-split-role=test] { --split-bg: #fff5e5; --split-ink: #926017; --split-edge: #ead5b3; }
.ml-split-bin-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ml-split-bin-heading h4 { color: var(--split-ink); margin: 0; }
.ml-split-bin-heading > span { color: var(--muted); font-size: var(--text-label); }
.ml-split-records { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.ml-split-records li { display: grid; place-items: center; min-width: 44px; min-height: 44px; background: var(--panel); color: var(--split-ink); border: 1px solid var(--split-edge); border-radius: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-split-bins p { margin: 0; }
.ml-split-bins + .ml-map-note { margin-top: 20px; }
.ml-time-partition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ml-time-partition > div { border-left: 4px solid var(--section-ink); padding: 16px; background: var(--section-soft); border-radius: 0 12px 12px 0; }
.ml-time-partition strong, .ml-time-partition span { display: block; margin-bottom: 10px; }
.ml-time-partition p { margin: 0; }
:root[data-theme=dark] .ml-split-bins [data-split-role=train] { --split-bg: #1d2c41; --split-ink: #acd0f4; --split-edge: #395777; }
:root[data-theme=dark] .ml-split-bins [data-split-role=test] { --split-bg: #342a1c; --split-ink: #ebc788; --split-edge: #675334; }
@media (max-width: 650px) { .ml-split-bins, .ml-time-partition { grid-template-columns: minmax(0, 1fr); } }

.ml-tree-map { padding-top: 8px; }
.ml-tree-question { position: relative; display: grid; gap: 8px; max-width: 430px; margin: 0 auto; padding: 20px; border: 2px solid var(--section-ink); border-radius: 14px; text-align: center; }
.ml-tree-question::after { content: ''; position: absolute; top: 100%; left: 50%; height: 24px; border-left: 2px solid var(--section-ink); }
.ml-tree-node-label { color: var(--muted); font-size: .875rem; }
.ml-tree-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 46px; }
.ml-tree-leaf { position: relative; padding: 20px; border: 1px solid var(--section-edge); background: var(--section-soft); border-radius: 14px; }
.ml-tree-leaf::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: calc(50% + 12px); height: 22px; border-top: 2px solid var(--section-ink); border-left: 2px solid var(--section-ink); }
.ml-tree-leaf:last-child::before { left: auto; right: 50%; border-left: 0; border-right: 2px solid var(--section-ink); }
.ml-tree-leaf p { margin: 0 0 12px; }
.ml-tree-condition { font-weight: 700; color: var(--section-ink); }
.ml-tree-leaf strong, .ml-tree-leaf .ml-tree-node-label { display: block; margin-top: 8px; }
@media (max-width: 650px) {
  .ml-tree-branches { grid-template-columns: minmax(0, 1fr); border-left: 2px solid var(--section-ink); margin-left: 16px; padding: 24px 0 0 22px; gap: 20px; }
  .ml-tree-question { max-width: none; text-align: left; }
  .ml-tree-question::after { left: 16px; }
  .ml-tree-leaf::before, .ml-tree-leaf:last-child::before { left: -24px; right: auto; top: 24px; bottom: auto; width: 24px; height: 0; border: 0; border-top: 2px solid var(--section-ink); }
}

.ml-confusion-map table { display: table; width: 100%; max-width: 680px; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.ml-confusion-map caption { padding: 12px 0 20px; color: var(--muted); text-align: left; }
.ml-confusion-map th { padding: 12px; text-align: left; font-size: .875rem; overflow-wrap: anywhere; }
.ml-confusion-map th:first-child { width: 22%; }
.ml-confusion-map td { padding: 18px; border: 1px solid var(--matrix-edge); background: var(--matrix-bg); color: var(--matrix-ink); border-radius: 12px; vertical-align: top; overflow-wrap: normal; }
.ml-confusion-map td strong, .ml-confusion-map td span, .ml-confusion-map td small { display: block; }
.ml-confusion-map td strong { font-size: 1.75rem; margin-bottom: 8px; }
.ml-confusion-map td small { font-size: .875rem; margin-top: 8px; }
.ml-confusion-map [data-confusion=tn], .ml-confusion-map [data-confusion=tp] { --matrix-bg: #eaf6ef; --matrix-ink: #24543b; --matrix-edge: #c4dfcd; }
.ml-confusion-map [data-confusion=fp] { --matrix-bg: #fff3df; --matrix-ink: #77510d; --matrix-edge: #ead2a7; }
.ml-confusion-map [data-confusion=fn] { --matrix-bg: #fff0f3; --matrix-ink: #863c51; --matrix-edge: #e9c5cf; }
:root[data-theme=dark] .ml-confusion-map [data-confusion=tn], :root[data-theme=dark] .ml-confusion-map [data-confusion=tp] { --matrix-bg: #1d3429; --matrix-ink: #bce3ce; --matrix-edge: #355647; }
:root[data-theme=dark] .ml-confusion-map [data-confusion=fp] { --matrix-bg: #342b1b; --matrix-ink: #ecd297; --matrix-edge: #665332; }
:root[data-theme=dark] .ml-confusion-map [data-confusion=fn] { --matrix-bg: #38212a; --matrix-ink: #efb9c9; --matrix-edge: #704453; }
@media (max-width: 650px) {
  .ml-confusion-map table { border-spacing: 3px; }
  .ml-confusion-map th { padding: 6px 3px; font-size: .75rem; }
  .ml-confusion-map td { padding: 10px 7px; font-size: .875rem; }
  .ml-confusion-map td small { font-size: .75rem; }
  .ml-confusion-map td strong { font-size: 1.5rem; }
}

.ml-cluster-map svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.ml-cluster-map svg text { fill: var(--text); font-family: var(--font-text); font-size: 18px; }
.ml-cluster-map [data-cluster="0"] { color: #367bcb; }
.ml-cluster-map [data-cluster="1"] { color: #b25797; }
.ml-cluster-observation { fill: currentColor; }
.ml-cluster-center { fill: none; stroke: currentColor; stroke-width: 2; }
.ml-cluster-legend { display: grid; gap: 10px; padding-top: 12px; }
.ml-cluster-legend p { margin: 0; }
:root[data-theme=dark] .ml-cluster-map [data-cluster="0"] { color: #8dbef1; }
:root[data-theme=dark] .ml-cluster-map [data-cluster="1"] { color: #eca4d4; }

.ml-hierarchy-map svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.ml-hierarchy-map svg text { fill: var(--text); font-family: var(--font-text); font-size: 17px; }
.ml-hierarchy-pair { fill: none; stroke: var(--section-ink); stroke-width: 3; }
.ml-hierarchy-join { fill: none; stroke: var(--muted); stroke-width: 3; }
.ml-hierarchy-cut { stroke: #c38918; stroke-width: 2; stroke-dasharray: 7 5; }
.ml-hierarchy-summary { margin: 16px 0; padding: 14px; background: var(--section-soft); border-radius: 10px; }
:root[data-theme=dark] .ml-hierarchy-cut { stroke: #e7bf6e; }

.ml-pca-map svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.ml-pca-map svg text { fill: var(--text); font-family: var(--font-text); font-size: 18px; }
.ml-pca-axis { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.ml-pca-original { fill: var(--section-ink); }
.ml-pca-restored { fill: var(--panel); stroke: #b5780c; stroke-width: 2; }
.ml-pca-gap { stroke: #b5780c; stroke-width: 2; stroke-dasharray: 3 2; }
.ml-pca-mean { stroke: var(--text); stroke-width: 2; }
.ml-pca-map .ml-pca-two, .ml-pca-map[data-ml-pca-count="2"] .ml-pca-one { display: none; }
.ml-pca-map[data-ml-pca-count="2"] .ml-pca-two { display: block; }
.ml-pca-map button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.ml-pca-map button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ml-pca-map button[aria-pressed="true"] { border-color: var(--section-ink); background: var(--section-soft); color: var(--section-ink); }
:root[data-theme=dark] .ml-pca-restored, :root[data-theme=dark] .ml-pca-gap { stroke: #efc577; }
@media (max-width: 650px) {
  .ml-pca-map svg text { font-size: 22px; }
}

.ml-cv-test { padding: 16px; margin-bottom: 20px; background: var(--section-soft); border: 1px dashed var(--border); border-radius: 12px; }
.ml-cv-test p { margin: 8px 0 0; }
.ml-cv-test-records { font-weight: 700; letter-spacing: .15em; }
.ml-cv-fold { padding: 14px 12px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; }
.ml-cv-fold[data-active="true"] { border-color: var(--section-ink); box-shadow: inset 0 0 0 1px var(--section-ink); }
.ml-cv-records { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.ml-cv-records li { padding: 8px 2px; margin: 0; text-align: center; border-radius: 8px; }
.ml-cv-records strong, .ml-cv-records span { display: block; }
.ml-cv-records span { font-size: .75rem; margin-top: 4px; }
.ml-cv-records [data-role="train"] { background: #e9f2fc; color: #245a85; }
.ml-cv-records [data-role="validation"] { background: #fff0ce; color: #715010; }
:root[data-theme=dark] .ml-cv-records [data-role="train"] { background: #20374b; color: #b7daf7; }
:root[data-theme=dark] .ml-cv-records [data-role="validation"] { background: #41351f; color: #f1d79c; }
.ml-cv-map { margin-bottom: 20px; }
.ml-cv-map .ml-lab-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 300px; margin: 20px 0 12px; }
.ml-cv-map button { min-height: 44px; padding: 10px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.ml-cv-map button[aria-pressed="true"] { background: var(--section-soft); color: var(--section-ink); border-color: var(--section-ink); }
.ml-cv-map button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ml-cv-summary { padding: 14px; min-height: 5.5em; background: var(--section-soft); border-radius: 10px; margin: 0; }
@media (max-width: 800px) {
  .ml-cv-records { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-cv-records span { font-size: .8125rem; }
}

.ml-tuning-map { margin-bottom: 20px; }
.ml-tuning-candidate { padding: 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; }
.ml-tuning-candidate[data-active="true"] { border-color: var(--section-ink); box-shadow: inset 0 0 0 1px var(--section-ink); }
.ml-tuning-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ml-tuning-heading h4 { margin: 0; }
.ml-tuning-winner { padding: 4px 9px; border-radius: 20px; font-size: .8125rem; font-weight: 600; color: #24543b; background: #eaf6ef; }
:root[data-theme=dark] .ml-tuning-winner { color: #bce3ce; background: #1d3429; }
.ml-tuning-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ml-tuning-fold { padding: 10px 4px; border-radius: 8px; text-align: center; background: var(--section-soft); }
.ml-tuning-fold span, .ml-tuning-fold strong { display: block; font-variant-numeric: tabular-nums; }
.ml-tuning-fold span { font-size: .8125rem; color: var(--muted); }
.ml-tuning-fold strong { margin: 4px 0; }
.ml-tuning-map .ml-tuning-mean { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 8px; }
.ml-tuning-track { height: 7px; background: var(--border); border-radius: 8px; overflow: hidden; }
.ml-tuning-track span { display: block; height: 100%; background: var(--section-ink); }
.ml-tuning-map .ml-lab-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 12px; }
.ml-tuning-map button { min-height: 44px; padding: 10px 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.ml-tuning-map button[aria-pressed="true"] { background: var(--section-soft); color: var(--section-ink); border-color: var(--section-ink); }
.ml-tuning-map button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ml-tuning-summary { padding: 14px; min-height: 5.5em; background: var(--section-soft); border-radius: 10px; }
.ml-tuning-protected { padding: 14px; border: 1px dashed var(--border); border-radius: 10px; }
.ml-tuning-protected p { margin: 8px 0 0; }
@media (max-width: 650px) {
  .ml-tuning-candidate { padding: 12px; }
  .ml-tuning-fold strong, .ml-tuning-map button { font-size: .875rem; }
  .ml-tuning-map button { overflow-wrap: normal; }
}
@media (max-width: 350px) {
  .ml-tuning-map .ml-lab-controls { grid-template-columns: 1fr; }
}

.ml-fit-map { display: grid; gap: 18px; margin-bottom: 20px; }
.ml-fit-panel { padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.ml-fit-panel svg { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto 18px; }
.ml-fit-panel svg text { fill: var(--text); font-family: var(--font-text); font-size: 17px; }
.ml-fit-line { fill: none; stroke: var(--fit-color); stroke-width: 2.5; }
.ml-fit-training { fill: var(--text); stroke: var(--panel); stroke-width: 1; }
.ml-fit-validation { fill: var(--panel); stroke: var(--text); stroke-width: 1.5; }
[data-ml-fit-degree="1"] { --fit-color: #bd7c17; }
[data-ml-fit-degree="2"] { --fit-color: #27815b; }
[data-ml-fit-degree="4"] { --fit-color: #b45287; }
:root[data-theme=dark] [data-ml-fit-degree="1"] { --fit-color: #e9bc6e; }
:root[data-theme=dark] [data-ml-fit-degree="2"] { --fit-color: #7ad7aa; }
:root[data-theme=dark] [data-ml-fit-degree="4"] { --fit-color: #eaa4cd; }
.ml-fit-errors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.ml-fit-errors > div { padding: 10px; background: var(--section-soft); border-radius: 8px; }
.ml-fit-panel p { margin: 14px 0 0; }
@media (max-width: 650px) {
  .ml-fit-panel { padding: 10px; }
  .ml-fit-panel svg text { font-size: 22px; }
  .ml-fit-errors { grid-template-columns: 1fr; }
}

.ml-refit-map { margin-bottom: 20px; }
.ml-refit-map .ml-cluster-legend { padding-top: 0; margin-bottom: 16px; }
.ml-refit-reference { padding: 12px; background: var(--section-soft); border-radius: 10px; }
.ml-refit-panel { padding: 16px; border: 1px solid var(--border); border-radius: 12px; margin-top: 18px; }
.ml-refit-panel svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto 16px; }
.ml-refit-panel svg text { fill: var(--text); font-family: var(--font-text); font-size: 17px; }
.ml-refit-reference-line { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; }
.ml-refit-mean-line { stroke: var(--fit-color); stroke-width: 3; }
.ml-refit-prediction { fill: var(--fit-color); stroke: var(--panel); stroke-width: .5; }
.ml-refit-panel p { margin: 14px 0 0; }
.ml-passenger-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ml-passenger-routes > div { padding: 16px; border: 1px solid var(--border); border-top: 4px solid #27815b; border-radius: 12px; }
.ml-passenger-routes > div + div { border-top-color: #8660b5; }
.ml-passenger-routes h4 { margin: 0 0 12px; }
.ml-passenger-routes p { margin: 0; line-height: 1.9; }
.ml-passenger-vector { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--section-soft); }
.ml-passenger-vector code { overflow-wrap: anywhere; }
.ml-housing-bar-row { display: grid; gap: 10px; padding: 16px 0; }
.ml-housing-bar-track { height: 24px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--section-soft); }
.ml-housing-bar-track span { display: block; height: 100%; background: #986cc0; }
.ml-housing-model .ml-housing-bar-track span { background: #27815b; }
.ml-housing-bar-row b { font-variant-numeric: tabular-nums; }
.ml-housing-scale { color: var(--muted); }
.ml-customer-map svg { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto 16px; }
.ml-customer-map svg text { fill: var(--text); font-family: var(--font-text); font-size: 17px; }
.ml-customer-low { fill: #27815b; }
.ml-customer-high { fill: #8660b5; }
.ml-customer-center { fill: none; stroke: var(--text); stroke-width: 2; }
.ml-spam-tokens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.ml-spam-tokens > span { display: grid; gap: 10px; text-align: center; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.ml-spam-tokens code { overflow-wrap: anywhere; }
.ml-spam-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.ml-spam-scores > div { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; }
.ml-spam-scores strong { font-variant-numeric: tabular-nums; }
.ml-customer-legend { display: grid; gap: 10px; }
.ml-customer-legend p { margin: 0; }
.ml-customer-table { max-width: 650px; margin: 20px 0; }
.ml-customer-table table { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.ml-customer-table caption { text-align: left; padding: 12px 0; color: var(--muted); }
.ml-customer-table th, .ml-customer-table td { padding: 12px; border: 1px solid var(--border); text-align: left; overflow-wrap: anywhere; background: transparent; }
:root[data-theme=dark] .ml-customer-low { fill: #7ad7aa; }
:root[data-theme=dark] .ml-customer-high { fill: #bca2ee; }
.ml-housing-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ml-housing-values > div { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.ml-housing-values strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
:root[data-theme=dark] .ml-housing-bar-track span { background: #bca2ee; }
:root[data-theme=dark] .ml-housing-model .ml-housing-bar-track span { background: #7ad7aa; }
:root[data-theme=dark] .ml-passenger-routes > div { border-top-color: #7ad7aa; }
:root[data-theme=dark] .ml-passenger-routes > div + div { border-top-color: #bca2ee; }
@media (max-width: 650px) {
  .ml-refit-panel { padding: 10px; }
  .ml-refit-panel svg text { font-size: 22px; }
  .ml-passenger-routes { grid-template-columns: 1fr; }
  .ml-housing-values { grid-template-columns: 1fr; }
  .ml-customer-table th, .ml-customer-table td { padding: 8px; }
  .ml-customer-map svg text { font-size: 21px; }
  .ml-spam-tokens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-spam-scores { grid-template-columns: 1fr; }
}