/* Preserve the original visual language. Give the illustration its own canvas
   stage so captions never compete with one another or with the animation. */
.viz-pane {
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-height) + 20px) 16px 20px;
  gap: 12px;
}
.viz-pane::after {
  display: none;
}
.animation-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  order: 2;
  width: 100%;
}
.animation-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.viz-pane > .viz-hint {
  position: static;
  transform: none;
  order: 1;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  font-size: 0.78rem;
}
.viz-pane > .viz-stats {
  position: static;
  transform: none;
  order: 3;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  white-space: normal;
  font-size: 0.72rem;
  line-height: 1.6;
}
.viz-pane > .viz-controls {
  position: static;
  transform: none;
  order: 4;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 4px 0;
}
.evidence {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.evidence summary {
  cursor: pointer;
  min-height: 44px;
  color: var(--text-primary);
}
.evidence p {
  margin-bottom: 14px;
}
.evidence a {
  color: var(--accent);
  line-height: 2;
}
@media (max-width: 900px) {
  .viz-pane {
    height: auto;
    min-height: 0;
    padding: 16px;
    gap: 12px;
  }
  .animation-stage {
    flex: none;
    height: clamp(320px, 48svh, 460px);
    min-height: 320px;
  }
  .viz-pane > .viz-hint,
  .viz-pane > .viz-stats {
    font-size: 0.76rem;
    line-height: 1.5;
  }
  .mobile-section-title {
    white-space: normal;
    overflow: visible;
  }
}
@media (max-width: 480px) {
  .site-brand {
    max-width: 128px;
    white-space: normal;
    line-height: 1.3;
  }
  .site-header {
    gap: 6px;
  }
  .header-actions {
    gap: 6px;
  }
}
/* Keep the focusable native input inside its visible switch label. */
.switch-container { position:relative; }
.switch-container .switch-input { top:50%; left:12px; }
/* Focus and deep links must settle before an experiment is operated. */
html { scroll-behavior:auto; }
/* Read the story first; numerical diagnostics are an explicit reader choice. */
.viz-pane > .viz-stats { display:none; }
html[data-measurements='true'] .viz-pane > .viz-stats:not(:empty) { display:block; }
.viz-feedback { order:3; flex:none; margin:0; padding:8px 12px; color:var(--text-secondary); font-size:.85rem; line-height:1.6; max-width:54ch; align-self:center; text-align:center; }
.viz-feedback:empty { display:none; }
.viz-pane > .viz-hint { background:transparent; border:0; text-align:center; align-self:center; opacity:1; color:var(--text-secondary); padding:0 10px; }
.chapter-sources { display:inline-block; margin-top:24px; padding:6px 0; color:var(--text-muted); font-size:.78rem; text-underline-offset:4px; }
.chapter-sources:hover { color:var(--accent); }
.slider-container { flex-wrap:wrap; }
.slider-value { min-width:4.5em; text-align:right; }
.viz-controls .viz-btn:first-child { border-color:var(--accent-dim); }
@media(max-width:900px){.viz-feedback{font-size:.84rem;padding:4px 10px 8px}.mobile-control-dock .slider-container{grid-template-columns: minmax(75px,1fr) minmax(75px,1.2fr) minmax(56px,auto)}.mobile-control-dock .slider-value{font-size:.74rem;max-width:82px;white-space:normal}}