/* Keep the CAMS / Nerfies template; adapt local media and mobile sizing. */
video { display: block; width: 100%; height: auto; background: #000; }
video + p { margin-top: .5rem; }
#video video { width: 80%; margin: 0 auto; }
main img { display: block; width: 80%; max-width: 760px; height: auto; margin: 0 auto; }
#results img { width: 40%; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.demo-grid { width: 80%; margin-left: auto; margin-right: auto; }
#comparison .columns { width: 80%; margin-left: auto; margin-right: auto; }
#comparison .column { padding: 0; }
.demo-grid video { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.long-horizon-grid { grid-template-columns: minmax(0, 160fr) minmax(0, 213fr); }
.long-horizon-grid video { height: auto; aspect-ratio: 4 / 3; }
.long-horizon-grid video:nth-child(even) { aspect-ratio: 71 / 40; }
.knot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-intro { margin-top: 1.5rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media screen and (max-width: 768px) {
  .publication-title { font-size: 2rem !important; }
}
@media screen and (max-width: 540px) {
  .demo-grid { grid-template-columns: 1fr; }
}

.slogan { color: #bd542c; font-weight: 700; }