/* ML playground (playground.js): blocks on a canvas, a library on the left, the chosen block's
   settings on the right, charts in floating windows. GitHub's palette, light and dark, following
   Material's data-md-color-scheme like the simulator next door. */

/* the page hides the navigation and the table of contents: the playground takes the whole width */
.md-main__inner.md-grid:has(.mlp) { max-width: min(1900px, 100%); }

.mlp {
  --mlp-bg: #ffffff; --mlp-bg2: #f6f8fa; --mlp-card: #ffffff; --mlp-card2: #f6f8fa; --mlp-input: #ffffff;
  --mlp-line: #d0d7de; --mlp-line2: #afb8c1; --mlp-fg: #1f2328; --mlp-bright: #1f2328; --mlp-muted: #59636e; --mlp-faint: #818b98;
  --mlp-dot: #d0d7de; --mlp-shadow: rgba(31, 35, 40, .14);
  --mlp-blue: #0969da; --mlp-orange: #bc4c00; --mlp-green: #1a7f37; --mlp-purple: #8250df; --mlp-red: #cf222e;
  --mlp-yellow: #9a6700; --mlp-teal: #0e7c86; --mlp-pink: #bf3989; --mlp-gray: #6e7781;
  --mlp-bluebg: #ddf4ff; --mlp-errbg: #ffebe9; --mlp-warnbg: #fff8c5;
  --mlp-k0: var(--mlp-blue); --mlp-k1: var(--mlp-orange); --mlp-k2: var(--mlp-green); --mlp-k3: var(--mlp-purple);
  --mlp-k4: var(--mlp-red); --mlp-k5: var(--mlp-yellow); --mlp-k6: var(--mlp-gray); --mlp-k7: #0e7c86; --mlp-k8: #bf3989; --mlp-k9: #8a5a2b;
  position: relative;
  display: grid;
  --mlp-lw: 168px; --mlp-rw: var(--mlp-sw, 330px);
  grid-template-columns: var(--mlp-lw) minmax(0, 1fr) var(--mlp-rw);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bar bar bar" "lib view side";
  height: clamp(560px, calc(100vh - 140px), 1100px);
  margin: .6em 0 1.4em;
  border: 1px solid var(--mlp-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--mlp-bg);
  color: var(--mlp-fg);
  font-size: 12.5px;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}
[data-md-color-scheme="slate"] .mlp {
  --mlp-bg: #0d1117; --mlp-bg2: #010409; --mlp-card: #161b22; --mlp-card2: #21262d; --mlp-input: #0d1117;
  --mlp-line: #30363d; --mlp-line2: #484f58; --mlp-fg: #c9d1d9; --mlp-bright: #f0f6fc; --mlp-muted: #8b949e; --mlp-faint: #6e7681;
  --mlp-dot: #262c36; --mlp-shadow: rgba(1, 4, 9, .55);
  --mlp-blue: #58a6ff; --mlp-orange: #f0883e; --mlp-green: #3fb950; --mlp-purple: #bc8cff; --mlp-red: #ff7b72;
  --mlp-yellow: #d29922; --mlp-teal: #39c5cf; --mlp-pink: #f778ba; --mlp-gray: #8b949e;
  --mlp-bluebg: rgba(56, 139, 253, .15); --mlp-errbg: rgba(248, 81, 73, .12); --mlp-warnbg: rgba(187, 128, 9, .15);
  --mlp-k7: #39c5cf; --mlp-k8: #f778ba; --mlp-k9: #c9a27e;
}
.mlp * { box-sizing: border-box; }
.mlp button, .mlp select, .mlp input[type="number"], .mlp input[type="text"] {
  font: inherit; color: var(--mlp-fg); background: var(--mlp-input);
  border: 1px solid var(--mlp-line); border-radius: 6px; padding: 3px 8px; margin: 0; min-height: 27px;
}
.mlp button { cursor: pointer; white-space: nowrap; }
.mlp button:hover:not(:disabled) { border-color: var(--mlp-line2); background: var(--mlp-card2); }
.mlp button:disabled { opacity: .45; cursor: not-allowed; }
.mlp button.mlp-primary { background: var(--mlp-green); border-color: var(--mlp-green); color: #fff; font-weight: 600; }
[data-md-color-scheme="slate"] .mlp button.mlp-primary { color: #0d1117; }
.mlp button.mlp-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--mlp-green); }
.mlp button.mlp-small { min-height: 22px; padding: 1px 7px; font-size: 11px; }
.mlp button.mlp-block { display: block; width: 100%; margin: 6px 0; }
.mlp select { padding-right: 4px; cursor: pointer; max-width: 100%; }
.mlp input[type="checkbox"], .mlp input[type="range"] { accent-color: var(--mlp-blue); }
.mlp a { color: var(--mlp-blue); }

/* ---------------------------------------------------------------- toolbar */
.mlp-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; background: var(--mlp-card); border-bottom: 1px solid var(--mlp-line); }
.mlp-bar .mlp-sep { width: 1px; align-self: stretch; background: var(--mlp-line); margin: 0 3px; }
.mlp-bar .mlp-grow { flex: 1 1 0; }
.mlp-bar .mlp-tpl { max-width: 17em; }
.mlp-auto { display: inline-flex; align-items: center; gap: 3px; color: var(--mlp-muted); cursor: pointer; }
.mlp.mlp-busy .mlp-bar .mlp-primary { background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); background-size: 200% 100%; animation: mlp-shine 1.2s linear infinite; }
@keyframes mlp-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- library */
.mlp-lib { grid-area: lib; overflow-y: auto; padding: 8px 6px 10px; background: var(--mlp-bg2); border-right: 1px solid var(--mlp-line); }
.md-typeset .mlp-lib details.mlp-sec { margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; font-size: inherit; }
.md-typeset .mlp-lib details.mlp-sec > summary::after { display: none; }
.md-typeset .mlp-lib details.mlp-sec > summary {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 4px; border: 0; background: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mlp-muted); cursor: pointer; list-style: none;
}
.md-typeset .mlp-lib details.mlp-sec > summary::-webkit-details-marker { display: none; }
.md-typeset .mlp-lib details.mlp-sec > summary::before {
  content: '▸'; position: static; width: auto; height: auto; background: none; -webkit-mask-image: none; mask-image: none; font-size: 10px; transition: transform .15s;
}
.md-typeset .mlp-lib details.mlp-sec[open] > summary::before { transform: rotate(90deg); }
.md-typeset .mlp-lib details.mlp-sec > summary span { margin-left: auto; font-weight: 400; color: var(--mlp-faint); letter-spacing: 0; }
.mlp-item { display: flex; align-items: center; gap: 7px; padding: 4px 7px; margin: 2px 0; border: 1px solid var(--mlp-line); border-radius: 6px; background: var(--mlp-card); cursor: grab; touch-action: none; }
.mlp-item:hover { border-color: var(--mlp-line2); }
.mlp-item i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mlp-lib .mlp-hint { margin: 10px 4px 0; color: var(--mlp-faint); font-size: 11px; }

/* ---------------------------------------------------------------- canvas */
.mlp-view {
  grid-area: view; position: relative; overflow: hidden; touch-action: none; outline: none;
  background-color: var(--mlp-bg); background-image: radial-gradient(var(--mlp-dot) 1.1px, transparent 1.2px);
}
.mlp-view.mlp-panning { cursor: grabbing; }
.mlp-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mlp .mlp-wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; pointer-events: none; }
.mlp-wires path { fill: none; }
.mlp-wires .mlp-hit { stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.mlp-wires .mlp-w { stroke-width: 2.4px; stroke-linecap: round; }
.mlp-wires .t-data .mlp-w { stroke: var(--mlp-green); }
.mlp-wires .t-X .mlp-w { stroke: var(--mlp-blue); }
.mlp-wires .t-model .mlp-w { stroke: var(--mlp-orange); }
.mlp-wires .mlp-sel .mlp-w { stroke: var(--mlp-bright); stroke-width: 3.4px; }
.mlp-wires .mlp-flow .mlp-w { stroke-dasharray: 6 6; animation: mlp-flow .6s linear infinite; }
@keyframes mlp-flow { to { stroke-dashoffset: -12; } }
.mlp-wires .mlp-temp { stroke: var(--mlp-bright); stroke-width: 2px; stroke-dasharray: 6 4; }
.mlp-wires text { font-size: 10.5px; font-family: var(--md-code-font-family, monospace); }
.mlp-wires .mlp-lbl rect { fill: var(--mlp-bg); stroke: var(--mlp-line); stroke-width: 1px; }
.mlp-wires .mlp-lbl .mlp-shape { fill: var(--mlp-fg); }
.mlp-wires .mlp-lbl .mlp-flag { fill: var(--mlp-red); }

/* ---------------------------------------------------------------- blocks */
.mlp-node { position: absolute; width: 176px; background: var(--mlp-card); border: 1px solid var(--mlp-line2); border-radius: 8px; box-shadow: 0 6px 18px var(--mlp-shadow); }
.mlp-node.mlp-viewer { width: 186px; }
.mlp-node.mlp-sel { border-color: var(--mlp-blue); box-shadow: 0 0 0 1px var(--mlp-blue), 0 6px 18px var(--mlp-shadow); }
.mlp-node.mlp-err { border-color: var(--mlp-red); box-shadow: 0 0 0 1px var(--mlp-red), 0 6px 18px var(--mlp-shadow); }
.mlp-node.mlp-idle { opacity: .7; }
.mlp-node.mlp-running .mlp-head { background-image: linear-gradient(90deg, transparent, var(--mlp-bluebg), transparent); background-size: 200% 100%; animation: mlp-shine 1.1s linear infinite; }
.mlp-node.mlp-pulse { animation: mlp-pulse .9s ease-out; }
@keyframes mlp-pulse { 0% { box-shadow: 0 0 0 7px var(--mlp-blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mlp-node.mlp-drop { border-color: var(--mlp-green); box-shadow: 0 0 0 2px var(--mlp-green); }
.mlp-head { display: flex; align-items: center; gap: 5px; padding: 4px 4px 4px 8px; border-bottom: 1px solid var(--mlp-line); border-radius: 8px 8px 0 0; background: var(--mlp-card2); cursor: grab; touch-action: none; }
.mlp-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
.mlp-head .mlp-title { font-weight: 700; color: var(--mlp-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlp-head .mlp-name { color: var(--mlp-muted); font-family: var(--md-code-font-family, monospace); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.mlp button.mlp-x { min-height: 0; padding: 0 4px; line-height: 16px; border: 0; background: transparent; color: var(--mlp-faint); font-size: 14px; }
.mlp button.mlp-x:hover { color: var(--mlp-red); background: transparent; }
.mlp button.mlp-open:hover { color: var(--mlp-blue); }
.mlp-ports { display: flex; justify-content: space-between; padding: 3px 0 1px; gap: 6px; }
.mlp-ins, .mlp-outs { display: flex; flex-direction: column; gap: 2px; }
.mlp-outs { align-items: flex-end; }
.mlp-port { position: relative; display: flex; align-items: center; gap: 4px; height: 16px; color: var(--mlp-muted); font-size: 10.5px; cursor: crosshair; touch-action: none; }
.mlp-port i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mlp-line2); background: var(--mlp-bg); }
.mlp-ins .mlp-port i { margin-left: -6px; }
.mlp-outs .mlp-port i { margin-right: -6px; }
.mlp-port[data-t="data"] i { border-color: var(--mlp-green); }
.mlp-port[data-t="X"] i { border-color: var(--mlp-blue); }
.mlp-port[data-t="model"] i { border-color: var(--mlp-orange); }
.mlp-port.mlp-on[data-t="data"] i { background: var(--mlp-green); }
.mlp-port.mlp-on[data-t="X"] i { background: var(--mlp-blue); }
.mlp-port.mlp-on[data-t="model"] i { background: var(--mlp-orange); }
/* while a wire is dragged: green where it makes sense, amber where it connects with a note, faded where it is refused */
.mlp-port.mlp-can i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlp-green) 35%, transparent); }
.mlp-port.mlp-warn i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlp-yellow) 45%, transparent); }
.mlp-port.mlp-ok i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mlp-green) 45%, transparent); }
.mlp-port.mlp-warn.mlp-ok i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mlp-yellow) 55%, transparent); }
.mlp-port.mlp-no { opacity: .3; }
.mlp-node.mlp-cand { border-color: var(--mlp-green); }
.mlp-node.mlp-dim { opacity: .4; }
.mlp-item.mlp-dim { opacity: .35; }
.mlp-why { position: absolute; z-index: 8; max-width: 240px; padding: 5px 8px; border-radius: 6px; background: var(--mlp-card2); border: 1px solid var(--mlp-line2); border-left: 3px solid var(--mlp-yellow); box-shadow: 0 6px 18px var(--mlp-shadow); color: var(--mlp-bright); font-size: 11.5px; line-height: 1.35; pointer-events: none; display: none; }
.mlp-why.mlp-bad { border-left-color: var(--mlp-red); }
.mlp-why.mlp-show { display: block; }
.mlp .mlp-inline { display: block; width: calc(100% - 14px); margin: 2px 7px 0; min-height: 23px; padding: 1px 4px; font-size: 11.5px; border-radius: 4px; }
.mlp .mlp-inline.mlp-rng { display: flex; align-items: center; gap: 5px; border: 0; padding: 0; }
.mlp .mlp-inline.mlp-rng span { color: var(--mlp-muted); font-family: var(--md-code-font-family, monospace); font-size: 10.5px; }
.mlp .mlp-inline.mlp-rng input { flex: 1 1 auto; min-width: 0; margin: 0; }
.mlp .mlp-inline.mlp-rng output { font-family: var(--md-code-font-family, monospace); font-size: 11px; min-width: 2.4em; text-align: right; }
.mlp-info { padding: 3px 8px 5px; color: var(--mlp-muted); font-size: 11px; white-space: pre-line; overflow-wrap: anywhere; }
.mlp-info:empty { display: none; }
.mlp-info b { color: var(--mlp-bright); font-weight: 600; }
.mlp-mt { display: block; margin-top: 2px; }
.mlp-mg { display: grid; grid-template-columns: auto 1fr auto; gap: 0 4px; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mlp-mg > span { padding: 0 6px 0 8px; }
.mlp-mg > b { text-align: right; }
.mlp-mg > small { font-size: 10px; }
.mlp-sk { font-family: var(--md-code-font-family, monospace); font-size: 10.5px; color: var(--mlp-fg); }
.mlp-leak { color: var(--mlp-red); font-weight: 600; cursor: help; }
.mlp-prev { margin: 0 6px 5px; border-radius: 4px; background: var(--mlp-bg2); display: flex; justify-content: center; }
.mlp-prev:empty { display: none; }
.mlp-prev svg, .mlp-prev canvas { display: block; width: 100%; height: auto; }
.mlp-minitab { display: flex; gap: 2px; padding: 4px; font-family: var(--md-code-font-family, monospace); font-size: 9.5px; color: var(--mlp-muted); overflow: hidden; }
.mlp-minitab span { border: 1px solid var(--mlp-line); border-radius: 3px; padding: 1px 3px; white-space: nowrap; }
.mlp-msg { margin: 0 6px 6px; padding: 5px 7px; border-radius: 5px; background: var(--mlp-errbg); color: var(--mlp-red); font-size: 11px; line-height: 1.35; user-select: text; }
.mlp-msg:empty { display: none; }
.mlp-msg.mlp-warn { background: var(--mlp-warnbg); color: var(--mlp-yellow); }

/* ---------------------------------------------------------------- overlays on the canvas */
.mlp-status { position: absolute; left: 8px; bottom: 8px; right: 70px; display: flex; flex-wrap: wrap; gap: 4px 14px; pointer-events: none; font-family: var(--md-code-font-family, monospace); font-size: 11px; color: var(--mlp-muted); }
.mlp-status > span { background: var(--mlp-card); border: 1px solid var(--mlp-line); border-radius: 5px; padding: 2px 7px; }
.mlp-status b { color: var(--mlp-bright); font-weight: 600; }
.mlp-status .mlp-bad { color: var(--mlp-red); }
.mlp-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.mlp-zoom button { min-height: 26px; padding: 1px 9px; background: var(--mlp-card); }
.mlp-toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(460px, 86%); padding: 7px 12px; border-radius: 6px; background: var(--mlp-card2); border: 1px solid var(--mlp-line2); color: var(--mlp-bright); box-shadow: 0 6px 18px var(--mlp-shadow); pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 7; }
.mlp-toast.mlp-show { opacity: 1; }
.mlp-pal { position: absolute; z-index: 8; width: 250px; background: var(--mlp-card); border: 1px solid var(--mlp-line2); border-radius: 8px; box-shadow: 0 10px 28px var(--mlp-shadow); overflow: hidden; }
.mlp .mlp-pal input[type="text"] { width: 100%; border: 0; border-bottom: 1px solid var(--mlp-line); border-radius: 0; padding: 7px 9px; }
.mlp-pal ul { list-style: none; margin: 0 !important; padding: 4px !important; max-height: 280px; overflow-y: auto; }
.mlp-pal li { display: flex; gap: 8px; align-items: baseline; padding: 4px 7px; margin: 0 !important; border-radius: 5px; cursor: pointer; }
.mlp-pal li i { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
.mlp-pal li small { color: var(--mlp-muted); margin-left: auto; font-size: 10.5px; }
.mlp-pal li.mlp-act { background: var(--mlp-bluebg); color: var(--mlp-bright); }
.mlp-ghost { position: fixed; z-index: 1000; pointer-events: none; padding: 5px 9px; border-radius: 6px; background: var(--mlp-card2); border: 1px solid var(--mlp-blue); color: var(--mlp-bright); font-size: 12px; }
.mlp-note, .mlp-help {
  position: absolute; z-index: 6; top: 10px; width: min(370px, calc(100% - 20px)); padding: 8px 12px 10px; border-radius: 8px;
  background: var(--mlp-card); border: 1px solid var(--mlp-line2); box-shadow: 0 10px 28px var(--mlp-shadow); font-size: 12px; line-height: 1.5;
}
.mlp-note { left: 10px; }
.mlp-help { right: 340px; top: 46px; }
.mlp-help > .mlp-x { position: absolute; right: 4px; top: 4px; }
.mlp-help table { margin: 0 !important; font-size: 11.5px !important; }
.mlp-help td { padding: 2px 6px !important; vertical-align: top; }
.mlp-help td:first-child { white-space: nowrap; color: var(--mlp-bright); font-weight: 600; }
.mlp-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.mlp-note-head b { color: var(--mlp-bright); }
.mlp-note-head .mlp-x { margin-left: auto; }
.mlp-note p, .mlp-help p { margin: 0 0 4px; }

/* ---------------------------------------------------------------- the side panel */
.mlp-side { grid-area: side; overflow-y: auto; padding: 10px 12px 16px; background: var(--mlp-bg2); border-left: 1px solid var(--mlp-line); user-select: text; }
.mlp-side .mlp-empty { color: var(--mlp-muted); margin: 20px 4px; }
.mlp-side-head { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--mlp-bright); margin-bottom: 4px; }
.mlp-side-head .mlp-lesson { margin-left: auto; font-size: 11.5px; }
.mlp .mlp-about { color: var(--mlp-muted); font-size: 11.5px; margin: 4px 0 8px; }
.mlp-side .mlp-msg { margin: 6px 0; }
.mlp-prow { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 4px 8px; align-items: center; margin: 6px 0; }
.mlp-prow > label { color: var(--mlp-muted); font-size: 11.5px; }
.mlp-prow.mlp-bool > input { justify-self: start; }
.mlp-prow.mlp-wide { grid-template-columns: 1fr; }
.mlp-prow.mlp-off { opacity: .45; }
.mlp-prow .mlp-hintline { grid-column: 1 / -1; color: var(--mlp-faint); font-size: 10.5px; margin-top: -2px; }
.mlp-rng { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mlp-rng input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; }
.mlp .mlp-rng input[type="number"] { width: 5.4em; flex: none; padding: 2px 4px; min-height: 24px; }
.mlp .mlp-code-in { font-family: var(--md-code-font-family, monospace); font-size: 11px; width: 100%; }
.mlp-cols { max-height: 220px; overflow-y: auto; border: 1px solid var(--mlp-line); border-radius: 6px; padding: 4px 6px; background: var(--mlp-card); }
.mlp-colck { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 0; cursor: pointer; }
.mlp-kn, .mlp-kc { display: inline-block; min-width: 14px; text-align: center; border-radius: 3px; font-size: 9.5px; font-weight: 700; font-family: var(--md-code-font-family, monospace); padding: 0 2px; }
.mlp-kn { color: var(--mlp-blue); background: var(--mlp-bluebg); }
.mlp-kc { color: var(--mlp-teal); background: color-mix(in srgb, var(--mlp-teal) 14%, transparent); }
.mlp-nan { color: var(--mlp-red); }
.md-typeset .mlp .mlp-facts table.mlp-ftab { display: table; border: 0; box-shadow: none; background: none; width: 100%; border-collapse: collapse; font-size: 11px; margin: 8px 0 4px; }
.md-typeset .mlp .mlp-facts th, .md-typeset .mlp .mlp-facts td { min-width: 0; background: none; border-top: 0; padding: 2px 4px; text-align: right; border-bottom: 1px solid var(--mlp-line); font-family: var(--md-code-font-family, monospace); }
.md-typeset .mlp .mlp-facts th { text-align: left; color: var(--mlp-muted); font-weight: 400; font-family: inherit; }
/* choices per column (impute, transform, scale, encode) */
.mlp-percol { margin: 10px 0 4px; }
.md-typeset .mlp table.mlp-pctab { display: table; border: 0; box-shadow: none; background: none; width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 4px 0; }
.md-typeset .mlp .mlp-pctab th, .md-typeset .mlp .mlp-pctab td { min-width: 0; background: none; border-top: 0; padding: 2px 4px; border-bottom: 1px solid var(--mlp-line); vertical-align: middle; }
.md-typeset .mlp .mlp-pctab th { text-align: left; font-weight: 400; color: var(--mlp-fg); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-typeset .mlp .mlp-pctab td { color: var(--mlp-faint); font-family: var(--md-code-font-family, monospace); font-size: 10.5px; text-align: right; }
.md-typeset .mlp .mlp-pctab td:last-child { width: 55%; }
.mlp .mlp-pcsel { width: 100%; font-size: 11px; padding: 1px 2px; }
.md-typeset .mlp .mlp-pctab tr.mlp-pcset th { color: var(--mlp-bright); font-weight: 600; }
.mlp-pctab tr.mlp-pcset .mlp-pcsel { border-color: var(--mlp-blue); }
.mlp-pcbtns { display: flex; gap: 12px; flex-wrap: wrap; }
.mlp button.mlp-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--mlp-blue); font-size: 11.5px; cursor: pointer; }
.mlp-pc { color: var(--mlp-blue); font-size: 10.5px; }
.mlp details.mlp-colsout { margin: 6px 0; border: 0; box-shadow: none; background: none; padding: 0; font-size: 11.5px; }
.mlp details.mlp-colsout > summary { color: var(--mlp-blue); cursor: pointer; padding: 0; background: none; border: 0; }
.mlp details.mlp-colsout > summary::before, .mlp details.mlp-colsout > summary::after { display: none; }
.mlp-collist { max-height: 200px; overflow-y: auto; font-size: 11px; line-height: 1.6; padding: 4px 0; }
.mlp-collist em { color: var(--mlp-red); font-style: normal; }
.mlp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.mlp-btns .mlp-grow { flex: 1 1 10em; margin: 0; }
.mlp-results { margin-top: 10px; }
.mlp-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mlp-tiles-h { width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mlp-muted); margin: 6px 0 2px; }
.mlp-tile { flex: 1 1 70px; border: 1px solid var(--mlp-line); border-radius: 6px; padding: 4px 8px; background: var(--mlp-card); }
.mlp-tile small { display: block; color: var(--mlp-muted); font-size: 10.5px; }
.mlp-tile b { font-size: 16px; color: var(--mlp-bright); font-family: var(--md-code-font-family, monospace); }
.mlp-tile em { display: block; font-style: normal; color: var(--mlp-muted); font-size: 10.5px; font-family: var(--md-code-font-family, monospace); }
.mlp-tile.mlp-val { border-color: var(--mlp-orange); }
.mlp-tile.mlp-test { border-color: var(--mlp-green); }
.mlp-side-view { margin-top: 8px; }
.mlp-scroll { overflow: auto; max-width: 100%; }
.mlp-scroll.mlp-tall { max-height: 420px; }
.md-typeset .mlp table.mlp-dtab, .md-typeset .mlp table.mlp-mtab { display: table; border-collapse: collapse; font-size: 11px; margin: 6px 0; width: 100%; border: 0; box-shadow: none; background: none; }
.md-typeset .mlp .mlp-dtab th, .md-typeset .mlp .mlp-dtab td, .md-typeset .mlp .mlp-mtab th, .md-typeset .mlp .mlp-mtab td {
  padding: 3px 5px; border: 0; border-bottom: 1px solid var(--mlp-line); text-align: left; background: none; font-size: 11px; min-width: 0; vertical-align: middle;
}
.md-typeset .mlp .mlp-dtab th, .md-typeset .mlp .mlp-mtab th { color: var(--mlp-muted); font-weight: 600; position: sticky; top: 0; background: var(--mlp-card); }
.md-typeset .mlp .mlp-mtab td:not(:first-child) { font-family: var(--md-code-font-family, monospace); text-align: right; }
.md-typeset .mlp .mlp-mtab small { color: var(--mlp-muted); }
.md-typeset .mlp tr.mlp-pm td { background: var(--mlp-bluebg); }
.md-typeset .mlp tr.mlp-click { cursor: pointer; }
.md-typeset .mlp tr.mlp-click:hover td { background: var(--mlp-card2); }
.md-typeset .mlp .mlp-peek td { font-family: var(--md-code-font-family, monospace); white-space: nowrap; }
.md-typeset .mlp .mlp-peek th.mlp-tcol, .md-typeset .mlp .mlp-peek th.mlp-tcol { color: var(--mlp-orange); }
.mlp-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.mlp-lock { font-size: 11.5px; padding: 5px 8px; border-radius: 5px; background: var(--mlp-bluebg); margin: 4px 0 8px; }
.mlp-lock.mlp-warnbg { background: var(--mlp-warnbg); color: var(--mlp-yellow); }

/* ---------------------------------------------------------------- windows */
.mlp-wins { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.mlp-win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 260px; min-height: 160px; max-height: calc(100% - 20px);
  height: auto; background: var(--mlp-card); border: 1px solid var(--mlp-line2); border-radius: 8px;
  box-shadow: 0 16px 40px var(--mlp-shadow); resize: both; overflow: hidden; user-select: text;
}
.mlp-win-head { display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--mlp-line); background: var(--mlp-card2); cursor: move; user-select: none; touch-action: none; }
.mlp-win-head b { color: var(--mlp-bright); }
.mlp-win-head .mlp-name { flex: 1 1 auto; color: var(--mlp-muted); font-family: var(--md-code-font-family, monospace); font-size: 11px; }
.mlp-win-body { flex: 1 1 auto; overflow: auto; padding: 8px 12px 12px; }
.mlp-two { display: flex; flex-wrap: wrap; gap: 10px; }
.mlp-two > div { flex: 1 1 200px; min-width: 0; }
.mlp-eda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.mlp-eda-cols { flex: 1 1 260px; min-width: 0; }
.mlp-eda-detail { flex: 1 1 300px; min-width: 0; }
.mlp-edatab td { white-space: nowrap; }
.mlp-assoc { margin-top: 10px; overflow-x: auto; }
.mlp-thr { grid-template-columns: auto minmax(0, 1fr); }
.mlp-tuneform .mlp-prow { grid-template-columns: 30% minmax(0, 1fr) minmax(0, 1fr); }

/* ---------------------------------------------------------------- charts */
.mlp-chart { display: block; width: 100%; height: auto; overflow: visible; margin: 2px 0; }
.mlp-chart text { font-size: 10px; fill: var(--mlp-muted); font-family: var(--md-text-font-family, sans-serif); }
.mlp-chart .mlp-lab { fill: var(--mlp-fg); font-size: 10.5px; }
.mlp-chart .mlp-small { font-size: 10px; fill: var(--mlp-fg); }
.mlp-chart .mlp-grid { stroke: var(--mlp-line); stroke-width: .6; opacity: .7; }
.mlp-chart .mlp-axis { stroke: var(--mlp-line2); stroke-width: 1; }
.mlp-chart .mlp-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.mlp-chart .mlp-thick { stroke-width: 2.6; }
.mlp-chart .mlp-band { opacity: .15; stroke: none; }
.mlp-chart .mlp-mark { stroke: var(--mlp-fg); stroke-dasharray: 4 3; stroke-width: 1; opacity: .7; }
.mlp-chart .mlp-err { stroke: var(--mlp-fg); stroke-width: 1.2; opacity: .6; }
.mlp-chart .mlp-pts circle { opacity: .78; }
.mlp-chart .mlp-cellt { font-size: 10px; fill: var(--mlp-bright); font-family: var(--md-code-font-family, monospace); }
.mlp-chart .mlp-click { cursor: pointer; }
.mlp-chart .mlp-click:hover rect { stroke: var(--mlp-fg); stroke-width: 1.2; }
.mlp-chart .mlp-dotsel { fill: var(--mlp-bright); stroke: var(--mlp-bg); stroke-width: 2; }
.mlp-chart .mlp-testmark { fill: var(--mlp-green); font-size: 13px; }
.mlp-chart.mlp-mini { margin: 0; }
.mlp-chart.mlp-heat { width: auto; max-width: 100%; }
.mlp-chart.mlp-spark { width: 70px; height: 20px; }
.mlp-map { display: block; border-radius: 4px; }
.mlp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--mlp-muted); margin: 2px 0 6px; }
.mlp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------------------------------------------------------------- code */
.mlp pre.mlp-code {
  margin: 4px 0 0; padding: 8px 0; overflow: auto; font-family: var(--md-code-font-family, monospace); font-size: 11.5px; line-height: 1.5;
  color: var(--mlp-fg); background: var(--mlp-bg2); border-radius: 6px; user-select: text;
}
.mlp pre.mlp-code > div { padding: 0 10px; white-space: pre; border-left: 3px solid transparent; }
.mlp pre.mlp-code > div[data-n] { cursor: pointer; }
.mlp pre.mlp-code > div.mlp-hl { background: var(--mlp-bluebg); border-left-color: var(--mlp-blue); }
.mlp-code .k { color: var(--mlp-red); }
.mlp-code .s { color: var(--mlp-blue); }
.mlp-code .n { color: var(--mlp-teal); }
.mlp-code .c { color: var(--mlp-faint); font-style: italic; }
.mlp-code .f { color: var(--mlp-purple); }

/* a look or evaluation block is selected: its charts and analyses fill a wider side panel */
.mlp.mlp-sidewide { --mlp-rw: var(--mlp-sw, max(330px, min(540px, 38%))); }
/* closed panels give their room to the canvas; the side panel also closes with no block selected */
.mlp.mlp-nolib { --mlp-lw: 20px; }
.mlp.mlp-sidecol { --mlp-rw: 20px; }
.mlp.mlp-noside { --mlp-rw: 0px; }
.mlp.mlp-nolib .mlp-lib, .mlp.mlp-noside .mlp-side, .mlp.mlp-sidecol .mlp-side,
.mlp.mlp-noside .mlp-grip, .mlp.mlp-sidecol .mlp-grip { display: none; }
/* a collapsed panel leaves a thin rail on its edge: click it to open the panel again */
.mlp .mlp-rail { display: none; align-self: stretch; min-height: 0; width: 100%; padding: 8px 0 0; border: 0; border-radius: 0;
  background: var(--mlp-bg2); color: var(--mlp-muted); font-size: 13px; line-height: 1; align-items: flex-start; justify-content: center; cursor: pointer; }
.mlp .mlp-rail:hover { color: var(--mlp-blue); background: var(--mlp-card); }
.mlp .mlp-rail-l { grid-area: lib; border-right: 1px solid var(--mlp-line); }
.mlp .mlp-rail-r { grid-area: side; border-left: 1px solid var(--mlp-line); }
.mlp.mlp-nolib .mlp-rail-l, .mlp.mlp-sidecol .mlp-rail-r { display: flex; }
.mlp-lib-head { display: flex; justify-content: flex-end; margin: -4px 0 0; }
.mlp-side-head .mlp-collapse { margin-left: 6px; }
.mlp-side-head .mlp-lesson + .mlp-collapse { margin-left: 4px; }
.mlp-side-head b + .mlp-collapse { margin-left: auto; }
.mlp-bar .mlp-panel.mlp-on { color: var(--mlp-blue); }
.mlp-bar .mlp-panel.mlp-attn { box-shadow: inset 0 -2px 0 var(--mlp-blue); }
/* the side panel's left edge: drag to resize */
.mlp-grip { grid-area: side; justify-self: start; align-self: stretch; width: 8px; margin-left: -4px; cursor: col-resize; z-index: 4; }
.mlp-grip:hover, .mlp-resizing .mlp-grip { background: linear-gradient(90deg, transparent 3px, var(--mlp-blue) 3px, var(--mlp-blue) 5px, transparent 5px); }
.mlp-resizing { user-select: none; cursor: col-resize; }
/* the panel and the windows lay out their content by their own width */
.mlp-side, .mlp-win-body { container-type: inline-size; }
.mlp-bar .mlp-winonly { display: none; }
.mlp-haswin .mlp-bar .mlp-winonly { display: inline-flex; }
.mlp-win.mlp-pulse { animation: mlp-pulse .9s ease-out; }
@container (min-width: 820px) {
  .mlp-eda-cols { flex: 0 1 46%; }
  .mlp-eda-detail { flex: 1 1 0; }
}

/* ---------------------------------------------------------------- narrow: canvas, then the side panel */
@media (max-width: 960px) {
  .mlp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(420px, 64vh) auto; grid-template-areas: "bar" "view" "side"; height: auto; }
  .mlp.mlp-sidewide { grid-template-columns: minmax(0, 1fr); }
  .mlp-grip { display: none; }
  .mlp.mlp-nolib, .mlp.mlp-noside, .mlp.mlp-sidecol, .mlp.mlp-nolib.mlp-sidewide { grid-template-columns: minmax(0, 1fr); }
  .mlp .mlp-rail { display: none !important; }
  .mlp-lib { display: none; }
  .mlp-side { border-left: 0; border-top: 1px solid var(--mlp-line); max-height: 70vh; }
  .mlp-bar .mlp-sep, .mlp-bar .mlp-wideonly { display: none; }
  .mlp-help { right: 10px; }
  .mlp-win { left: 8px !important; width: calc(100% - 16px) !important; }
}

/* the page around the playground: short notes, collapsed */
.md-typeset .mlp-notes { margin-top: 1.2em; font-size: .68rem; color: var(--md-default-fg-color--light); }