/* Cap the viewer at the image's natural height so it has no horizontal
   letterboxing. On shorter screens it can shrink to keep controls visible.
   fitScene() preserves the image and overlays at their native 8:5 ratio. */
@media (min-width:1000px){
  .app-shell{height:100dvh;min-height:0}
  .animation-column{grid-template-rows:48px minmax(0,max-content) minmax(min-content,1fr);align-content:stretch}
  .viewer{height:auto;aspect-ratio:8/5;min-height:0;max-height:100%}
}
/* The four playback controls fit in one row at these widths. Reclaim the
   second scrubber row for the image without reducing text or button sizes. */
@media (min-width:1200px){
  .controls{grid-template-columns:140px 110px minmax(40px,1fr) 155px;gap:8px}
  .scrubber-wrap{grid-column:auto;grid-row:auto;margin-top:0;min-width:0}
  .speed-control{grid-column:auto;grid-row:auto;min-width:0}
}
/* Compact the north/scale card without scaling the geographic distance bar. */
.map-reference{width:100px;padding:4px 7px;gap:2px;border-radius:9px}
.map-reference .north-arrow{width:24px;height:36px}