/* Method walkthrough figures rendered by method-viz.js */
.mv-block {
  margin: 34px 0 50px;
  scroll-margin-top: 24px;
}

.mv-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #8a8278;
  font: 700 11px/1.2 'Roboto Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mv-num {
  padding: 3px 6px;
  border-radius: 5px;
  background: #282724;
  color: #fff;
  letter-spacing: 0.04em;
}

.mv-block h3 {
  margin: 0 0 10px;
  color: #191816;
  font: 700 23px/1.3 'Playfair Display', serif;
}

.mv-lead {
  margin: 0 0 18px;
  color: #45403a;
  font: 400 17px/1.65 var(--rs-ui);
}

.mv-card {
  margin: 0;
  padding: 12px 16px 8px;
  border: 1px solid #e7e3dc;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(45, 38, 28, 0.03);
}

.mv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid #f0ece5;
}

.mv-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #282724;
  color: #fff;
  cursor: pointer;
}

.mv-play svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.mv-play .mv-icon-play,
.mv-play[aria-pressed="false"] .mv-icon-pause {
  display: none;
}

.mv-play[aria-pressed="false"] .mv-icon-play {
  display: block;
}

.mv-steps {
  flex: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-steps button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #ddd7cd;
  border-radius: 50%;
  background: #faf9f6;
  color: #6d665c;
  font: 700 10px/1 'Roboto Mono', monospace;
  cursor: pointer;
}

.mv-steps button[aria-current="step"] {
  border-color: #282724;
  background: #282724;
  color: #fff;
}

.mv-play:focus-visible,
.mv-steps button:focus-visible {
  outline: 2px solid #647a88;
  outline-offset: 2px;
}

.mv-text {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.9em;
  margin: 0;
  color: #2f2b26;
  font: 400 14.5px/1.45 var(--rs-ui);
}

.mv-text b {
  font-weight: 650;
}

.mv-stage {
  overflow-x: auto;
  margin: 0 -6px;
  padding: 6px 6px 0;
}

.mv-svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
  font-family: var(--rs-ui);
}

.mv-labels,
.mv-leaders,
.mv-chips,
.mv-links,
.mv-trunk,
.mv-lanes,
.mv-curves,
.mv-fig svg {
  pointer-events: none;
}

.mv-fig,
.mv-labels text,
.mv-card-g {
  transition: opacity 0.35s ease;
}

.mv-svg .is-dim {
  opacity: 0.16;
}

.mv-hit {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

.mv-hit:hover {
  fill: rgba(40, 36, 30, 0.035);
}

.mv-hit:focus-visible {
  stroke: #647a88;
  stroke-width: 1.5;
}

.mv-body {
  transition: opacity 0.35s ease;
}

.mv-body.is-faded {
  opacity: 0.34;
}

.mv-overlay {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mv-overlay.is-on {
  opacity: 1;
}

.mv-name {
  fill: #2f2b26;
  font: 700 11px 'Roboto Mono', monospace;
}

.mv-note {
  fill: #8a8278;
  font-size: 10.5px;
}

.mv-plate {
  fill: #faf8f4;
  stroke: #e6e1d8;
  cursor: pointer;
}

.mv-socket {
  fill: #d9d3c9;
}

.mv-module {
  stroke-width: 0.9;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s ease;
}

.mv-module.is-off {
  opacity: 0.2;
}

.mv-curve {
  fill: none;
  stroke-width: 1.1;
  opacity: 0.16;
  transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

.mv-curve.is-on {
  opacity: 0.8;
  stroke-width: 1.6;
}

.mv-curve.is-off {
  opacity: 0.04;
}

.mv-leader {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.85;
}

.mv-seg {
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s ease;
}

.mv-seg rect {
  fill-opacity: 0.32;
  stroke-opacity: 0.55;
  stroke-width: 1;
  transition: fill-opacity 0.3s ease, stroke-opacity 0.3s ease;
}

.mv-seg:hover rect,
.mv-seg.is-on rect {
  fill-opacity: 0.55;
  stroke-opacity: 1;
}

.mv-seg.is-on rect {
  stroke-width: 1.4;
}

.mv-seg:focus-visible rect {
  stroke-width: 2;
  stroke-opacity: 1;
}

.mv-seg.is-off {
  opacity: 0.35;
}

.mv-seg-label {
  font-size: 11.5px;
  font-weight: 650;
}

.mv-seg-sub {
  fill: #6f685e;
  font-size: 10px;
}

.mv-link {
  fill: none;
  stroke-width: 1.2;
  opacity: 0.35;
}

.mv-trunk-body {
  fill: #2c2a26;
}

.mv-trunk-glow {
  fill: #8d8476;
  opacity: 0;
}

.mv-trunk-label {
  fill: #fbfaf7;
  font: 700 17px 'Playfair Display', serif;
}

.mv-trunk-label.is-small {
  font-size: 15px;
}

.mv-chip {
  stroke-width: 1;
}

.mv-caption {
  margin: 12px 0 0;
}

/* 01: frame cards */
.mv-fcard {
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s ease;
}

.mv-fcard-bg {
  fill: #faf8f4;
  stroke: #e6e1d8;
  stroke-width: 1;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.mv-fcard:hover .mv-fcard-bg {
  fill: #f4f1ea;
}

.mv-fcard.is-on .mv-fcard-bg {
  fill: #fff;
  stroke: #282724;
  stroke-width: 1.4;
}

.mv-fcard:focus-visible .mv-fcard-bg {
  stroke: #647a88;
  stroke-width: 2;
}

.mv-fcard.is-off {
  opacity: 0.4;
}

.mv-fcard-sym {
  fill: #282724;
  font: italic 400 22px 'Playfair Display', serif;
}

.mv-fcard-title {
  fill: #2f2b26;
  font-size: 12.5px;
  font-weight: 700;
}

.mv-fcard-desc {
  fill: #6f685e;
  font-size: 10.5px;
}

.mv-tag {
  fill-opacity: 0.45;
  stroke-width: 0.9;
}

.mv-tag-label {
  font-size: 10px;
  font-weight: 650;
}

/* 03: action experts, their lanes, and the rollout */
.mv-module.mv-expert {
  stroke-dasharray: 2.2 1.6;
}

.mv-xcurve {
  stroke-dasharray: 4 3;
}

.mv-lane {
  fill: none;
  stroke-width: 1.3;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mv-lane.is-on {
  opacity: 0.9;
}

.mv-rollout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0 4px;
  padding: 10px 2px 2px;
  border-top: 1px solid #f0ece5;
}

.mv-rollout-media {
  flex: none;
  width: 256px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #1d1c1a;
}

.mv-rollout-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.mv-rollout-info {
  min-width: 0;
}

.mv-rollout-title {
  margin: 0 0 2px;
  color: #2f2b26;
  font: 700 12.5px/1.4 'Roboto Mono', monospace;
}

.mv-rollout-sub {
  margin: 0 0 8px;
  color: #8a8278;
  font: 400 13px/1.4 var(--rs-ui);
}

.mv-rollout-experts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-rollout-experts li {
  padding: 1px 8px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  font: 650 11.5px/1.6 var(--rs-ui);
}

/* 04: embodiment dreaming */
.mv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 2px 2px;
}

.mv-mode {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #ddd7cd;
  border-radius: 999px;
  background: #faf9f6;
}

.mv-mode button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6d665c;
  font: 650 12.5px/1.3 var(--rs-ui);
  cursor: pointer;
}

.mv-mode button[aria-pressed="true"] {
  background: #282724;
  color: #fff;
}

.mv-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mv-picker button {
  padding: 3px 8px;
  border: 1px solid #e3ddd3;
  border-radius: 6px;
  background: #fff;
  color: #6d665c;
  font: 700 10.5px/1.4 'Roboto Mono', monospace;
  cursor: pointer;
}

.mv-picker button[aria-pressed="true"] {
  border-color: #6a57a6;
  background: #f1edf9;
  color: #4b3b8c;
}

.mv-mode button:focus-visible,
.mv-picker button:focus-visible,
.mv-rollout-media video:focus-visible {
  outline: 2px solid #647a88;
  outline-offset: 2px;
}

.mv-dreaming .mv-svg {
  pointer-events: none;
}

.mv-box-title {
  fill: #2f2b26;
  font-size: 11.5px;
  font-weight: 700;
}

.mv-box-sub {
  fill: #8a8278;
  font-size: 10px;
}

.mv-svg .mv-purple {
  fill: #6a57a6;
}

.mv-dream-box {
  fill: #f1edf9;
  stroke: #8c7bc4;
  stroke-width: 1.1;
  stroke-dasharray: 3 2.5;
}

.mv-teacher {
  fill: #f8f6fc;
}

.mv-sym {
  fill: #4b3b8c;
  font: italic 400 15px 'Playfair Display', serif;
}

.mv-latent {
  fill: #b4a7d7;
  stroke: #6a57a6;
  stroke-width: 0.8;
}

.mv-latent.is-back {
  fill-opacity: 0.45;
  stroke-opacity: 0.45;
}

.mv-targ .mv-latent {
  fill: #e4def3;
}

.mv-loss {
  fill: #fff;
  stroke: #6a57a6;
  stroke-width: 1.4;
}

.mv-loss-label {
  fill: #4b3b8c;
  font: italic 400 16px 'Playfair Display', serif;
}

.mv-sg {
  fill: #6a57a6;
  font-size: 9.5px;
  font-style: italic;
}

.mv-wire {
  fill: none;
  stroke: #a49b8e;
  stroke-width: 1.3;
}

.mv-wire.is-dream {
  stroke: #8c7bc4;
  stroke-dasharray: 4 3;
}

.mv-ema {
  fill: none;
  stroke: #8c7bc4;
  stroke-width: 1.1;
  stroke-dasharray: 2 3;
}

.mv-step {
  stroke-width: 0.6;
}

.mv-dz {
  transition: opacity 0.35s ease;
}

.mv-svg .mv-dz.is-soft {
  opacity: 0.32;
}

.mv-svg.is-deploy .mv-train {
  opacity: 0.07;
}

.mv-future.is-hidden {
  display: none;
}

.mv-gone-tag {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mv-svg.is-deploy .mv-gone-tag {
  opacity: 1;
}

.mv-gone-pill {
  fill: #fff;
  stroke: #4b3b8c;
  stroke-width: 1.2;
}

.mv-gone-text {
  fill: #4b3b8c;
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 700px) {
  .mv-toolbar {
    flex-wrap: wrap;
  }

  .mv-text {
    flex-basis: 100%;
  }

  .mv-rollout {
    flex-direction: column;
    align-items: stretch;
  }

  .mv-rollout-media {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-fig,
  .mv-labels text,
  .mv-card-g,
  .mv-body,
  .mv-overlay,
  .mv-module,
  .mv-curve,
  .mv-seg,
  .mv-seg rect,
  .mv-fcard,
  .mv-fcard-bg,
  .mv-lane,
  .mv-dz,
  .mv-gone-tag {
    transition: none;
  }
}