.reference-source {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  border-block: 1px solid var(--rule);
  padding-block: 24px;
  margin-block: 28px;
}
.reference-source h2 { margin-top: 0; }
.reference-source dl { margin: 0; }
.reference-source dt { font: 11px/1.6 var(--mono); color: var(--muted); }
.reference-source dd { margin: 3px 0 14px; }
.reference-page .motion-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.reference-page .motion-card video {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: 540px;
  object-fit: contain;
  background: white;
}
.reference-page .phase-button img { aspect-ratio: auto; height: auto; max-height: 180px; object-fit: contain; }
.reference-page .phase-strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.reference-page .motion-card { scroll-margin-top: 24px; }
.reference-links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; list-style: none; }
.reference-window { font: 12px/1.7 var(--mono); color: var(--muted); }
.reference-page .video-note p:last-child { margin-bottom: 0; }
@media (max-width: 680px) {
  .reference-source { grid-template-columns: 1fr; gap: 8px; }
  .reference-page .phase-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .reference-page *, .reference-page *::before, .reference-page *::after {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}