.ar {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
  padding: 12px; max-width: 1500px; margin: 0 auto; align-items: start;
}
.stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.side-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 1.5em; }
.side-head h2 { font-size: 15px; margin: 0; }

/* The waves (big) and the polar pattern with its read-outs. */
.arrays-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.view { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sq { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; position: relative; }
.arrays-stage .view:first-child .sq { max-width: calc(100vh - 150px); margin: 0 auto; }
.arrays-stage .view:last-child .sq { max-width: calc(100vh - 290px); margin: 0 auto; }
.sq canvas { width: 100%; height: 100%; }
.sq.dark { background: #000; }
.sq.plot { background: var(--panel); border: 1px solid var(--line); }
#field { cursor: crosshair; }
.readouts {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
.readouts dt { color: var(--ink-2); }
.readouts dd { margin: 0; }
.readouts .warn { color: var(--warn); }
/* The one-line pointer to the radio-interferometer demo, under the read-outs. */
.see-also { text-align: center; color: var(--ink-2); }

.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.button-grid.three { grid-template-columns: repeat(3, 1fr); }
.button-grid button { padding: 3px 4px; font-size: 13px; }
.controls .note { color: var(--ink-3); font-size: 12px; }
.drawer .setup-alt { margin: 2px 4px 2px 0; font-size: 13px; }
/* The section on radio interferometers after the experiments, set off like one of them. */
.drawer .related { border-top: 1px solid var(--line); padding-top: 4px; }

@media (max-width: 900px) {
  .ar { grid-template-columns: minmax(0, 1fr); }
  .arrays-stage { grid-template-columns: minmax(0, 1fr); }
  .arrays-stage .view .sq { max-width: none; }
}