/* Interactive explainers of the Method section (assets/js/explainers.js). Every class starts with xpl-.
   Group colours are those of the paper's Figure 1 (core, then the shells in order) and the proxy box of Figure 2;
   dark mode uses darker steps of the same hues (white labels on them keep at least 5:1, and they keep 3:1 against
   the surface). */

.xpl {
  --xpl-g1: #a5b8c7;
  --xpl-g2: #aac5bf;
  --xpl-g3: #dec6ac;
  --xpl-g4: #c2bccd;
  --xpl-g5: #aab1b8;
  --xpl-proxy: #e4e8eb;
  --xpl-on: #0b0b0b; /* text on a group colour */
  --xpl-off: 0.4; /* parts that the chosen sub-network does not use (their labels stay legible) */
  --xpl-line: #128a5f; /* the proxy line: the page's aqua one step darker, 4:1 on the surface */
  --xpl-danger-on: #ffffff; /* text on the danger colour */
}
@media (prefers-color-scheme: dark) {
  .xpl {
    --xpl-g1: #4f6a79;
    --xpl-g2: #4b7065;
    --xpl-g3: #87684a;
    --xpl-g4: #6b6382;
    --xpl-g5: #5e6872;
    --xpl-proxy: #5b646c;
    --xpl-on: #ffffff;
    --xpl-line: var(--c-aqua);
    --xpl-danger-on: #0d0d0d;
  }
}

/* the module loads after the page text: reserve about the built height (measured at load, default states; the
   parameterization explainer is a little taller under μ-Elastic, the reduced-motion default, than under SP) */
.xpl-host-structure:empty { min-height: 1770px; }
.xpl-host-parameterization:empty { min-height: 2110px; }
@media (max-width: 420px) {
  .xpl-host-structure:empty { min-height: 1960px; }
  .xpl-host-parameterization:empty { min-height: 2290px; }
}
@media (min-width: 700px) {
  .xpl-host-structure:empty { min-height: 1010px; }
  .xpl-host-parameterization:empty { min-height: 1550px; }
}
@media (min-width: 1080px) {
  .xpl-host-structure:empty { min-height: 690px; }
  .xpl-host-parameterization:empty { min-height: 1150px; }
}
/* print leaves the explainers out (style.css), so a box not built yet prints as nothing too, not as a blank reserve */
@media print {
  .xpl-host-structure:empty, .xpl-host-parameterization:empty { min-height: 0; }
}
.method-explainer > .xpl { margin-top: 0; }
.xpl .desc { max-width: 940px; }
.xpl .controls { margin-bottom: 8px; }
.xpl-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 6.4em; }
.xpl-run-btn { min-width: 11.4em; }
/* the Autoplay toggle: pressed while autoplay is on */
.xpl-auto[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.xpl-play svg { fill: currentColor; flex: none; }
.xpl .control > .seg { align-self: flex-start; } /* the box ends with its buttons, however long the label */
.xpl-cutctl .seg button { border-right: 0; }
.xpl-cutctl .seg button + button { border-left: 1px dashed var(--border-strong); }
.xpl-cutctl .seg button[aria-pressed="true"] { background: var(--danger); color: var(--xpl-danger-on); }
/* keyboard focus in the segmented controls: .seg clips what lies outside its buttons (overflow: hidden), so the
   outline is drawn inside the focused button, on a band of the surface colour */
.xpl .seg button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--surface); }

/* ---- panels */
.xpl-stage { display: grid; gap: 14px 26px; align-items: start; margin: 4px 0 2px; }
.xpl-panel { margin: 0; min-width: 0; }
.xpl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 34px; margin-bottom: 4px; }
.xpl-panel-head .chart-title, .xpl-panel-head .chart-sub { margin: 0; }
.xpl-param .xpl-panel-head { display: block; min-height: 0; }
.xpl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.xpl-svg text { fill: var(--ink); font-variant-numeric: tabular-nums; }
.xpl-svg .xpl-muted { fill: var(--ink-2); }
.xpl-svg .xpl-strong { font-weight: 650; }
.xpl-svg .xpl-math { fill: var(--ink-2); font-family: Georgia, "Times New Roman", serif; }
.xpl-svg .xpl-on { fill: var(--xpl-on); }
.xpl-svg .xpl-halo { paint-order: stroke; stroke: var(--xpl-g1); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.xpl-svg .xpl-halo.xpl-is-veiled { stroke: color-mix(in srgb, var(--surface) 78%, var(--xpl-g1)); } /* the core under the veil */
.xpl .xpl-fill { stroke: var(--surface); stroke-width: 1; }
.xpl .xpl-g1 { fill: var(--xpl-g1); }
.xpl .xpl-g2 { fill: var(--xpl-g2); }
.xpl .xpl-g3 { fill: var(--xpl-g3); }
.xpl .xpl-g4 { fill: var(--xpl-g4); }
.xpl .xpl-g5 { fill: var(--xpl-g5); }
.xpl .xpl-proxyfill { fill: var(--xpl-proxy); stroke: var(--ink-2); stroke-width: 1; }
.xpl-svg .xpl-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.xpl-svg .xpl-hit { fill: transparent; }
/* outline of a block row or a group of x: the fills alone are faint on the light surface */
.xpl-svg .xpl-edge { fill: none; stroke: var(--ink-2); stroke-width: 1; pointer-events: none; }
.xpl-svg .xpl-hit.xpl-edge { fill: transparent; pointer-events: auto; }
.xpl-svg .xpl-pick { cursor: pointer; }
.xpl-svg .xpl-part, .xpl-svg .xpl-ph { transition: opacity 0.25s ease; }
.xpl-svg .xpl-is-off { opacity: var(--xpl-off); }
.xpl-svg .xpl-bracket { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.xpl-svg .xpl-norm.xpl-is-bad .xpl-bracket { stroke: var(--danger); stroke-width: 2; }
.xpl-svg .xpl-norm.xpl-is-bad text { fill: var(--danger); font-weight: 700; }
.xpl-svg .xpl-arrow line { stroke: var(--ink-2); stroke-width: 1.3; }
.xpl-svg .xpl-arrow path { fill: var(--ink-2); }
.xpl-svg .xpl-tick line, .xpl-svg .xpl-tickline { stroke: var(--ink-2); stroke-width: 1.2; }
.xpl-svg .xpl-tick text { fill: var(--ink-2); }
.xpl-svg .xpl-tick.xpl-is-cur text { fill: var(--ink); font-weight: 700; }
.xpl-svg .xpl-tick-cut { display: none; }
.xpl-svg .xpl-tick-cut.xpl-is-cur { display: inline; }
.xpl-svg .xpl-tick-cut.xpl-is-cur text { fill: var(--danger); }
.xpl-svg .xpl-tick-cut.xpl-is-cur line { stroke: var(--danger); }
.xpl-svg .xpl-subbox { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 7 4; pointer-events: none; }
.xpl-svg .xpl-subbox.xpl-is-bad { stroke: var(--danger); }
.xpl-svg .xpl-subbox-key { stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 7 4; }
.xpl-svg .xpl-subbox-key.xpl-is-bad { stroke: var(--danger); }
.xpl-svg .xpl-keytext.xpl-is-bad { fill: var(--danger); }
.xpl-svg .xpl-focusline { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.xpl-svg .xpl-veil { fill: var(--surface); opacity: 0.78; pointer-events: none; }
.xpl-svg .xpl-hatch-line { stroke: var(--danger); stroke-width: 2; }
.xpl-svg .xpl-cutmark { stroke: var(--danger); stroke-width: 1.6; pointer-events: none; }
/* trunk panel */
.xpl-svg .xpl-trunkbox { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.2; }
.xpl-svg .xpl-readout { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; }
.xpl-svg .xpl-loss { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.xpl-svg .xpl-jointbox { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.xpl-svg .xpl-bus { stroke: var(--ink-2); stroke-width: 1.2; }
.xpl-svg .xpl-back { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.xpl-svg .xpl-backhead { fill: var(--ink); }
.xpl-svg .xpl-tier { fill: var(--ink-2); }
.xpl-svg:not(.xpl-is-run) .xpl-stair.xpl-is-sel .xpl-tier { fill: var(--ink); font-weight: 700; }
.xpl-svg:not(.xpl-is-run) .xpl-stair.xpl-is-sel .xpl-readout { stroke: var(--ink); stroke-width: 2; }
.xpl-svg .xpl-prefix { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 6 4; pointer-events: none; }
.xpl-svg .xpl-cutline { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 3; opacity: 0; pointer-events: none; }
.xpl-svg .xpl-cutline.xpl-is-on { opacity: 1; }
.xpl-svg .xpl-sweep { fill: var(--ink); opacity: 0; pointer-events: none; }
.xpl-svg .xpl-sweep.xpl-is-on { animation: xpl-sweep 1.2s linear forwards; }
@keyframes xpl-sweep {
  0% { opacity: 0.18; transform: translateY(0); }
  100% { opacity: 0.18; transform: translateY(40px); }
}
/* one training step: parts wait faded, light up in order, the current one gets an outline; the step trains all
   five widths, so the chosen sub-network's prefix outlines, its emphasis and the cut line are hidden meanwhile */
.xpl-svg.xpl-is-run .xpl-prefix, .xpl-svg.xpl-is-run .xpl-cutline.xpl-is-on { opacity: 0; }
.xpl-svg.xpl-is-run .xpl-ph { opacity: 0.18; }
.xpl-svg.xpl-is-run .xpl-ph.xpl-is-lit { opacity: 1; }
.xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-fill { stroke: var(--ink); stroke-width: 1.2; }
.xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-readout, .xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-loss,
.xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-jointbox, .xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-trunkbox { stroke: var(--ink); stroke-width: 2; }
.xpl-svg.xpl-is-run .xpl-ph.xpl-is-now .xpl-back { stroke-width: 2; }
/* phase 6: the gradients reach every trained part, in backward order: the readouts, then the trunk, then the
   embedding (dashed outlines, like the gradient arrows) */
.xpl-svg .xpl-gradbox { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; opacity: 0; pointer-events: none; }
.xpl-svg.xpl-is-run.xpl-is-back .xpl-readout { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }
.xpl-svg.xpl-is-run.xpl-is-back .xpl-trunkbox { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; transition: stroke-width 0s linear 0.35s, stroke-dasharray 0s linear 0.35s; }
.xpl-svg.xpl-is-run.xpl-is-back .xpl-gradbox { opacity: 1; transition: opacity 0.2s ease 0.7s; }

/* ---- structure layout: layer | trunk | text (wide); layer | trunk, then text (medium); stacked (narrow) */
.xpl-structure .xpl-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "layer" "text" "trunk"; justify-items: center; }
.xpl-structure .xpl-panel-layer { grid-area: layer; width: 100%; max-width: 400px; }
.xpl-structure .xpl-panel-trunk { grid-area: trunk; width: 100%; max-width: 400px; }
.xpl-structure .xpl-text { grid-area: text; width: 100%; max-width: 640px; }
@media (min-width: 700px) {
  .xpl-structure .xpl-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "layer trunk" "text text"; }
  .xpl-structure .xpl-text { max-width: none; }
}
@media (min-width: 1080px) {
  .xpl-structure .xpl-stage { grid-template-columns: minmax(0, 316px) minmax(0, 360px) minmax(0, 1fr); grid-template-areas: "layer trunk text"; gap: 14px 24px; justify-items: stretch; }
}
.xpl-eq { display: grid; font-size: 0.86rem; color: var(--ink); margin: 6px 0 0; }
.xpl-eqstate { grid-area: 1 / 1; visibility: hidden; min-width: 0; }
.xpl-eqstate.xpl-is-cur { visibility: visible; }
.xpl-text { font-size: 0.9rem; min-width: 0; display: grid; }
.xpl-textstate { grid-area: 1 / 1; visibility: hidden; min-width: 0; } /* every state in one cell: see explainers.js */
.xpl-textstate.xpl-is-cur { visibility: visible; }
.xpl-text .xpl-state { font-size: 1rem; margin: 2px 0 8px; }
.xpl-text .xpl-bad { color: var(--danger); }
.xpl-text dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; margin: 0 0 10px; }
.xpl-text dt { color: var(--ink-2); font-weight: 600; }
.xpl-text dd { margin: 0; }
.xpl-text .xpl-reuse { color: var(--ink-2); margin: 0; }
.xpl-panel-trunk .chart-note { margin-top: 6px; }

/* ---- parameterization */
.xpl-sub { font-size: 0.92rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; margin: 12px 0 6px; }
.xpl-cards { display: flex; align-items: stretch; gap: 8px; margin: 0 0 8px; }
.xpl-step { align-self: center; font-size: 0.8rem; color: var(--ink-2); text-align: center; flex: 0 1 110px; line-height: 1.3; }
.xpl-card {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 8px 7px;
  border: 1.5px solid var(--border-strong); border-radius: 9px; background: var(--surface); cursor: pointer; color: var(--ink);
  font-size: 0.82rem; line-height: 1.3; text-align: center;
}
.xpl-card:hover { background: var(--hover-bg); }
.xpl-card.xpl-c-proxy { border-color: var(--xpl-line); }
.xpl-card.xpl-c-small { border-color: var(--c-blue); }
.xpl-card.xpl-c-large { border-color: var(--c-orange); }
.xpl-card[aria-pressed="true"] { border-width: 3px; padding: 6.5px 6.5px 5.5px; }
.xpl-card.xpl-c-proxy[aria-pressed="true"] { background: color-mix(in srgb, var(--xpl-line) 10%, var(--surface)); }
.xpl-card.xpl-c-small[aria-pressed="true"] { background: color-mix(in srgb, var(--c-blue) 10%, var(--surface)); }
.xpl-card.xpl-c-large[aria-pressed="true"] { background: color-mix(in srgb, var(--c-orange) 10%, var(--surface)); }
.xpl-card-title { font-weight: 650; font-size: 0.92rem; }
.xpl-card-line { color: var(--ink-2); }
.xpl-mini { display: block; width: 100%; max-width: 150px; height: 12px; }
.xpl-formula { font-size: 0.95rem; margin: 2px 0 4px; }
/* parameterization panels. Below 1080 px the two charts come first, right under the Parameterization control, then
   the legend and the fan-in panel with the control for t. From 1080 px: fan-in | Initialization | Update, with the
   legend under the charts. From 700 px the panels are subgrids, so titles and charts line up across the columns. */
.xpl-param .xpl-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.xpl-param .xpl-panel, .xpl-param .xpl-legend { width: 100%; max-width: 400px; }
.xpl-param .xpl-panel-fan { order: 1; }
@media (min-width: 700px) {
  .xpl-param .xpl-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0; }
  .xpl-param .xpl-panel-init, .xpl-param .xpl-panel-upd { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; max-width: none; }
  .xpl-param .xpl-legend { grid-column: 1 / -1; grid-row: 3; max-width: none; margin-top: 10px; }
  .xpl-param .xpl-panel-fan { grid-column: 1 / -1; grid-row: 4; max-width: 360px; margin-top: 18px; }
}
@media (min-width: 1080px) {
  .xpl-param .xpl-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; justify-items: stretch; }
  .xpl-param .xpl-panel-fan { grid-column: 1; grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; max-width: none; margin-top: 0; }
  .xpl-param .xpl-panel-fan > .xpl-svg { grid-row: span 2; }
  .xpl-param .xpl-panel-init { grid-column: 2; }
  .xpl-param .xpl-panel-upd { grid-column: 3; }
  .xpl-param .xpl-legend { grid-column: 2 / span 2; grid-row: 3; align-self: start; }
}
.xpl-svg .xpl-grid { stroke: var(--grid); stroke-width: 1; }
.xpl-svg .xpl-axis { stroke: var(--axis); stroke-width: 1; }
.xpl-svg .xpl-proxyline { stroke: var(--xpl-line); stroke-width: 2.4; }
.xpl-svg .xpl-proxyhalo { stroke: var(--surface); stroke-width: 4.6; }
.xpl-svg .xpl-ghost { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.xpl-svg .xpl-val { fill: var(--ink); font-weight: 600; }
.xpl-svg .xpl-val.xpl-muted { fill: var(--ink-2); font-weight: 500; }
.xpl-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.84rem; color: var(--ink); margin: 0; padding: 0; list-style: none; }
.xpl-key { display: inline-flex; align-items: center; gap: 6px; }
.xpl-k { flex: none; display: inline-block; }
.xpl-k-line { width: 22px; height: 0; border-top: 2.4px solid var(--xpl-line); }
.xpl-k-bars { width: 14px; height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--xpl-g1) 0 20%, var(--xpl-g2) 20% 40%, var(--xpl-g3) 40% 60%, var(--xpl-g4) 60% 80%, var(--xpl-g5) 80%); }
.xpl-k-proxy { width: 12px; height: 12px; border-radius: 2px; background: var(--xpl-proxy); border: 1px solid var(--ink-2); }
.xpl-k-ghost { width: 12px; height: 12px; border: 1.2px dashed var(--ink-2); border-radius: 1px; }
.xpl-status { font-size: 0.9rem; color: var(--ink-2); margin: 12px 0 8px; line-height: 1.55; }
.xpl-status b { color: var(--ink); }
.xpl-table-title { font-size: 0.88rem; font-weight: 650; margin: 10px 0 4px; }
.xpl-table-wrap { max-width: 760px; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
/* the look of the page's data tables, restated (table.data has a max-content width) */
.xpl-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.xpl-table th, .xpl-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.xpl-table tbody tr:last-child > * { border-bottom: 0; }
.xpl-table thead th { color: var(--ink-2); font-weight: 600; background: var(--surface-2); vertical-align: bottom; white-space: normal; }
.xpl-table th:first-child { text-align: left; }
.xpl-table tbody th { font-weight: 500; color: var(--ink); }
.xpl-table .xpl-rule { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.78rem; }
.xpl-short { display: none; }
@media (max-width: 760px) {
  .xpl-cards { gap: 5px; }
  .xpl-step { display: none; }
  .xpl-card { font-size: 0.76rem; padding: 6px 4px; }
  .xpl-card[aria-pressed="true"] { padding: 4.5px 2.5px; }
  .xpl-card-title { font-size: 0.84rem; }
}
@media (max-width: 480px) {
  .xpl-card-q { display: none; }
  .xpl-text dl { gap: 4px 10px; }
  .xpl-table th, .xpl-table td { padding: 4px 4px; }
  .xpl-long { display: none; }
  .xpl-short { display: inline; }
}
@media (max-width: 340px) {
  .xpl-table { font-size: 0.74rem; }
  .xpl-table th, .xpl-table td { padding: 4px 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .xpl-svg .xpl-sweep.xpl-is-on { animation: none; opacity: 0; }
}
@media (forced-colors: active) {
  .xpl-svg, .xpl-mini, .xpl-k-line, .xpl-k-bars { forced-color-adjust: none; }
  .xpl .seg button[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
  .xpl .seg button:focus-visible { outline-color: Highlight; }
}