/* Interactive figures of the LRP post. Same surfaces and accent as the other post figures. */
.lrp-fig {
  --lrp-warn: #b4532a;
  --lrpw-fwd: #9a9fa3;
  --lrpw-fwd-fill: #6c7175;
  --lrpw-rel: #c8413b;
  --lrpw-neg: #2f6fc4;
}
:root[data-theme="dark"] .lrp-fig {
  --lrp-warn: #e08a5c;
  --lrpw-fwd: #6d7175;
  --lrpw-fwd-fill: #a7abaf;
  --lrpw-rel: #e2615a;
  --lrpw-neg: #5f95e0;
}
.lrp-fig p { margin: .6rem 0; }
.lrp-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.lrp-fig output { font-variant-numeric: tabular-nums; }
.lrp-result { font-size: .88rem; min-height: 3.2em; }
.lrp-small { font-size: .84rem; color: var(--fig-muted); }
.lrp-rule { font-size: .86rem; font-weight: 600; }

.lrp-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .4rem; }
.lrp-fig button { min-height: 38px; padding: .4rem .75rem; border: 1px solid var(--fig-control); border-radius: 6px; background: var(--fig-raised); color: var(--fig-ink); font: 600 .82rem/1.4 var(--sans); cursor: pointer; }
.lrp-fig button:hover { border-color: var(--fig-accent); }
.lrp-fig button[aria-pressed=true] { border-color: var(--fig-accent); box-shadow: 0 0 0 2px var(--fig-accent); }

.lrp-scroll { overflow-x: auto; }

.lrp-stack-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; padding: .7rem 0; border-top: 1px dashed var(--fig-line); border-bottom: 1px dashed var(--fig-line); }
.lrp-stack-controls .lrp-select { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 650; }
.lrp-stack-controls select { min-height: 34px; padding: .2rem .5rem; border: 1px solid var(--fig-control); border-radius: 6px; background: var(--fig-raised); color: var(--fig-ink); font: inherit; font-weight: 500; }
.lrp-row { position: relative; display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 1.8rem; }
.lrp-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 160px; }
.lrp-col--start { z-index: 2; }
.lrp-canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: #1b211d; }
.lrp-start { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: #1b211d;
  box-shadow: 0 0 0 1px rgb(18 44 34 / .12), 0 6px 16px rgb(18 44 34 / .14); }
.lrp-start .lrp-canvas, .lrp-plane .lrp-canvas { position: absolute; inset: 0; height: 100%; border-radius: 0; background: none; }
.lrp-heat { opacity: var(--lrp-heat-opacity, 1); }
.lrp-tools { position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; padding-top: .5rem; }
.lrp-stackfig .lrp-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--fig-control); border-radius: 8px; background: var(--fig-raised); color: var(--fig-ink); cursor: pointer; transition: border-color .15s, background .15s; }
.lrp-stackfig .lrp-icon:hover { border-color: var(--fig-accent); background: var(--fig-hover); }
.lrp-stackfig .lrp-icon:focus-visible { outline: 3px solid var(--fig-accent); outline-offset: 2px; }
.lrp-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lrp-icon svg .lrp-icon-fill { fill: currentColor; fill-opacity: .85; }
.lrp-stack-controls .lrp-range { display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 650; }
.lrp-stack-controls .lrp-range input { width: 140px; accent-color: var(--fig-accent); }
.lrp-stack-controls .lrp-range output { min-width: 3em; font-weight: 500; color: var(--fig-accent); font-variant-numeric: tabular-nums; }
.lrp-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.lrp-ribbon { fill: #ea7c33; fill-opacity: .5; }
:root[data-theme="dark"] .lrp-ribbon { fill: #c08562; fill-opacity: .28; }
.lrp-start, .lrp-plane { width: 100%; }
.lrp-plane { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #1b211d;
  box-shadow: 0 0 0 1px rgb(18 44 34 / .12), 0 6px 16px rgb(18 44 34 / .14); }
.lrp-layer-top { margin: 0 0 .45rem !important; height: 1.5em; line-height: 1.5em; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fig-muted); text-align: center; }
.lrp-layer-name { margin: .55rem 0 0 !important; height: 3em; font-size: .76rem; line-height: 1.35; color: var(--fig-muted); text-align: center; white-space: nowrap; }
.lrp-layer-name b { display: block; font-size: .86rem; color: var(--fig-ink); font-variant-numeric: tabular-nums; }
.lrp-stackfig .lrp-result { margin: 1rem 0 0; font-size: .9rem; min-height: 2.8em; }
.lrp-status:empty { display: none; }

/* the water figure: a small network drawn twice, prediction on the left and relevance on the right */
.lrpw-stage { position: relative; }
.lrp-fig .lrpw-scene { overflow: visible; user-select: none; -webkit-user-select: none; }
.lrpw-pad { position: absolute; cursor: crosshair; touch-action: none; }
.lrp-fig .lrpw-clear { position: absolute; display: inline-flex; align-items: center; gap: 4px; min-height: 0; height: 28px; padding: 0 11px 0 8px; border: 1px solid var(--lrpw-rel); border-radius: 999px; background: color-mix(in srgb, var(--lrpw-rel) 12%, var(--fig-raised)); color: var(--lrpw-rel); font: 700 .8rem/1 system-ui, sans-serif; transform: translateX(-50%); }
.lrp-fig .lrpw-clear:hover { border-color: var(--lrpw-rel); background: var(--lrpw-rel); color: #fff; }
.lrp-fig .lrpw-clear svg { width: 12px; height: 12px; fill: currentColor; }
.lrpw-controls { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 .6rem; }
.lrpw-modes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lrpw-label { color: var(--fig-muted); font: 650 .78rem/1 system-ui, sans-serif; }
.lrpc-row { font: 600 22px system-ui, sans-serif; fill: var(--fig-ink); }
.lrpc-row--rel { fill: #e6a19c; }
.lrpc-frame { fill: none; stroke: var(--fig-ink); stroke-width: 1.4; }
.lrpc-label { font: 600 11.5px system-ui, sans-serif; fill: var(--fig-muted); }
.lrpc-box rect { fill: var(--fig-raised); stroke: var(--fig-ink); stroke-width: 1.4; }
.lrpc-block { cursor: pointer; }
.lrpc-block:hover rect { stroke: var(--fig-accent); stroke-width: 2.4; }
.lrpc-boxtitle { font: 700 12.5px system-ui, sans-serif; fill: var(--fig-ink); pointer-events: none; }
.lrpc-boxsub { font: 500 10.5px system-ui, sans-serif; fill: var(--fig-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.lrpc-wire { fill: none; stroke: var(--lrpw-fwd); stroke-width: 2; }
.lrpc-skip { fill: none; stroke: var(--fig-accent); stroke-width: 2.4; }
.lrpc-skiplabel { font: 650 11.5px system-ui, sans-serif; fill: var(--fig-accent); font-variant-numeric: tabular-nums; }
.lrpc-skiplabel--neg { fill: var(--lrpw-neg); }
.lrpc-arrowhead { fill: var(--lrpw-fwd); }
.lrpc-plus { fill: var(--fig-raised); stroke: var(--fig-accent); stroke-width: 2; }
.lrpc-plussign { font: 700 17px system-ui, sans-serif; fill: var(--fig-accent); pointer-events: none; }
.lrpc-band { fill: none; stroke: var(--lrpw-rel); stroke-opacity: .55; stroke-linejoin: round; }
.lrpc-band--neg { stroke: var(--lrpw-neg); }
.lrpc-junction { fill: var(--fig-accent); }
.lrpc-parts { font: 600 10.5px system-ui, sans-serif; fill: var(--fig-muted); font-variant-numeric: tabular-nums; }
.lrpc-boxsub--neg { fill: var(--lrpw-neg); }
.lrp-fig .lrpc-more > summary { font: 600 1rem/1.5 var(--sans); }
.lrpc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: .4rem; }
.lrp-fig .lrpc-card { padding: .7rem .75rem .6rem; border: 1px solid var(--fig-line); border-radius: 10px; background: var(--fig-raised); }
.lrp-fig .lrpc-card-head { margin: 0 0 .35rem; font-size: .84rem; line-height: 1.4; }
.lrp-fig .lrpc-card-head b { font-variant-numeric: tabular-nums; }
.lrp-fig .lrpc-card-note { margin: .4rem 0 0; color: var(--fig-muted); font-size: .76rem; line-height: 1.45; }
.lrpc-pane { cursor: pointer; opacity: .3; }
.lrpc-pane:hover { opacity: .6; }
.lrpc-pane--on, .lrpc-pane--on:hover { opacity: 1; cursor: default; }
.lrpc-hit { fill: transparent; }
.lrpc-card-label { font: 700 12px system-ui, sans-serif; fill: var(--fig-ink); }
.lrpc-card-tick { font: 600 10.5px system-ui, sans-serif; fill: var(--fig-muted); }
.lrpc-card-total { font: 700 12px system-ui, sans-serif; fill: var(--fig-ink); font-variant-numeric: tabular-nums; }
.lrpc-axis { stroke: color-mix(in srgb, var(--fig-ink) 22%, var(--fig-surface)); stroke-width: 1; }
.lrpc-divider { stroke: var(--fig-line); stroke-width: 1; stroke-dasharray: 3 3; }
.lrpc-bar { fill: var(--lrpw-rel); }
.lrpc-bar--neg { fill: var(--lrpw-neg); }
.lrpc-reach { stroke: var(--fig-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.lrpc-curve { fill: none; stroke: color-mix(in srgb, var(--fig-ink) 40%, var(--fig-surface)); stroke-width: 1.4; stroke-dasharray: 3 2; }
@media (max-width: 960px) { .lrpc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lrpc-cards { grid-template-columns: minmax(0, 1fr); } }
.lrpc-block:focus-visible rect { stroke: var(--fig-accent); stroke-width: 2.4; }
.lrp-fig .lrpc-block:focus-visible { outline: none; }
.lrp-fig .lrpc-inside-text { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--fig-line); font-size: .9rem; }
.lrpc-open rect { stroke: var(--fig-accent); stroke-width: 2.6; }
.lrp-fig .lrpc-pick { color: var(--fig-accent); }
.lrpc-total { font: 700 14px system-ui, sans-serif; fill: var(--fig-ink); font-variant-numeric: tabular-nums; }
.lrpw-total { font: 700 15px system-ui, sans-serif; fill: var(--fig-ink); font-variant-numeric: tabular-nums; }
.lrpw-total-label { font: 600 12px system-ui, sans-serif; fill: var(--fig-muted); }
.lrpw-edge--rel.lrpw-neg { stroke: var(--lrpw-neg); }
.lrpw-fill--rel.lrpw-neg { fill: var(--lrpw-neg); }
.lrpw-readout { min-height: 4.4em; font-size: .9rem; }
.lrpw-readout b { font-variant-numeric: tabular-nums; }
.lrpw-title { font: 600 26px system-ui, sans-serif; fill: var(--fig-ink); }
.lrpw-title--rel { fill: #e6a19c; }
.lrpw-hint { font: 600 11px system-ui, sans-serif; fill: var(--fig-muted); }
.lrpw-node { fill: var(--fig-raised); stroke: var(--fig-ink); stroke-width: 1.6; }
.lrpw-frame { fill: none; stroke: var(--fig-ink); stroke-width: 1.4; }
.lrpw-grid { stroke: color-mix(in srgb, var(--fig-ink) 14%, transparent); stroke-width: .5; }
.lrpw-digit { font: 700 10px system-ui, sans-serif; fill: var(--fig-ink); pointer-events: none; }
.lrpw-edge { fill: none; stroke-linecap: butt; }
.lrpw-edge--fwd { stroke: var(--lrpw-fwd); }
.lrpw-fill--fwd { fill: var(--lrpw-fwd-fill); }
.lrpw-fill--rel { fill: var(--lrpw-rel); }
.lrpw-edge--rel { stroke: var(--lrpw-rel); }
.lrpw-hit { fill: transparent; cursor: pointer; }
.lrpw-halo { fill: none; stroke: transparent; stroke-width: 3; }
.lrpw-hover .lrpw-halo { stroke: var(--fig-accent); }
.lrpw-mirror .lrpw-halo { stroke: var(--fig-accent); stroke-dasharray: 3 2; }
.lrpw-dim { opacity: .28; }
.lrpw-explained .lrpw-node { stroke: var(--lrpw-rel); stroke-width: 2.4; }

@media (max-width: 640px) {
  .lrp-fig .lrpw-clear { height: 22px; margin-top: -4px; padding: 0 8px 0 6px; font-size: .7rem; }
  .lrp-fig .lrpw-clear svg { width: 10px; height: 10px; }
  .lrpw-hint { font-size: 17px; }
  .lrp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
  .lrp-col { width: auto; }
  .lrp-col--start, .lrp-col--layer:last-child { grid-column: 1 / -1; width: 100%; max-width: 280px; margin: 0 auto; }
  .lrp-col--start { margin-bottom: 3rem; }
  .lrp-col--layer .lrp-layer-top:empty { display: none; }
  .lrp-ribbons { display: none; }
  .lrp-layer-name { white-space: normal; }
}

.lrp-neuron .lrp-neuron-scene.lrp-nt-wide { max-width: 840px; }
.lrp-neuron .lrp-neuron-scene.lrp-nt-tall { max-width: 420px; }
.lrp-neuron .lrp-neuron-scene { max-width: 560px; margin: .4rem auto 0; touch-action: pan-y; }
.lrp-nt-head { font: 700 13px system-ui, sans-serif; letter-spacing: .08em; fill: var(--fig-muted); }
.lrp-nt-fband { fill: none; stroke: color-mix(in srgb, var(--lrpw-fwd) 80%, var(--fig-surface)); stroke-linecap: round; transition: stroke-width .3s; }
.lrp-nt-fflow { fill: none; stroke: rgb(255 255 255 / .75); stroke-linecap: round; stroke-dasharray: 1.5 11; animation: lrp-nt-fflow 1.1s linear infinite; pointer-events: none; }
@keyframes lrp-nt-fflow { to { stroke-dashoffset: -12.5; } }
.lrp-nt-out { font: 700 20px system-ui, sans-serif; fill: var(--fig-ink); font-variant-numeric: tabular-nums; }
.lrp-nt-track { fill: none; stroke: var(--fig-track); stroke-width: 3px; }
.lrp-nt-stream { fill: none; stroke: var(--lrpw-rel); stroke-linecap: round; transition: stroke-width .45s cubic-bezier(.3,.7,.2,1); }
.lrp-nt-stream.lrp-nt-neg { stroke: var(--lrpw-neg); }
.lrp-nt-flow { fill: none; stroke: rgb(255 255 255 / .75); stroke-linecap: round; stroke-dasharray: 1.5 11; animation: lrp-nt-flow 1.1s linear infinite; pointer-events: none; }
@keyframes lrp-nt-flow { to { stroke-dashoffset: 12.5; } }
.lrp-nt-paused :is(.lrp-nt-flow, .lrp-nt-fflow) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lrp-nt-flow, .lrp-nt-fflow { animation: none; } }
.lrp-nt-input { fill: var(--fig-raised); stroke: var(--fig-control); stroke-width: 2; }
.lrp-nt-neuron { fill: var(--fig-raised); stroke: var(--fig-ink); stroke-width: 2.5; }
.lrp-nt-name { font: italic 600 19px system-ui, sans-serif; fill: var(--fig-ink); }
.lrp-nt-small { font: 16px system-ui, sans-serif; fill: var(--fig-muted); font-variant-numeric: tabular-nums; }
.lrp-nt-gets { font: 600 18px system-ui, sans-serif; fill: var(--fig-muted); font-variant-numeric: tabular-nums; }
.lrp-nt-gets.lrp-nt-pos { fill: var(--lrpw-rel); }
.lrp-nt-gets.lrp-nt-neg { fill: var(--lrpw-neg); }
.lrp-nt-total { font: 600 17px system-ui, sans-serif; fill: var(--fig-muted); font-variant-numeric: tabular-nums; }
.lrp-nt-warn { fill: var(--lrp-warn); font-weight: 700; }
.lrp-nt-chip { cursor: ew-resize; outline: none; touch-action: none; }
.lrp-nt-chip rect { fill: var(--fig-raised); stroke: var(--fig-accent); stroke-width: 2; transition: fill .15s; }
.lrp-nt-chip text { font: 700 20px system-ui, sans-serif; fill: var(--fig-ink); font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; }
.lrp-nt-chip .lrp-nt-arrow { font-weight: 400; fill: var(--fig-accent); }
.lrp-nt-chip:hover rect, .lrp-nt-chip.lrp-nt-drag rect { fill: var(--fig-hover); }
.lrp-nt-chip:focus-visible rect { stroke-width: 4; }
.lrp-neuron:not(.lrp-nt-touched) .lrp-nt-chip .lrp-nt-arrow { animation: lrp-nt-nudge 1.6s ease-in-out 3; }
@keyframes lrp-nt-nudge { 50% { opacity: .25; } }
.lrp-nt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: .4rem; }
.lrp-nt-eqline { margin: 0 !important; font-size: .9rem; color: var(--fig-muted); }
.lrp-nt-bar .lrp-buttons { margin: 0; }
.lrp-nt-eq { color: var(--fig-ink); font-weight: 600; }
.lrp-neuron .lrp-nt-note { min-height: 3.2em; margin: .5rem 0 0; }
.lrp-nt-modes { align-items: center; }
@media (max-width: 560px) {
  .lrp-nt-small { font-size: 20px; }
  .lrp-nt-gets { font-size: 21px; }
  .lrp-nt-total { font-size: 20px; }
  .lrp-nt-name { font-size: 22px; }
  .lrp-nt-head { font-size: 17px; }
}