.mx {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px;
  padding: 12px; max-width: 1600px; margin: 0 auto; align-items: start;
}
.stage { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: sticky; top: 56px; }
.view-wrap { width: 100%; margin: 0 auto; background: #000; border-radius: var(--radius); overflow: hidden; position: relative; }
.view-wrap canvas { width: 100%; height: 100%; cursor: crosshair; }
.view-wrap canvas.grab { cursor: grab; }
.view-wrap canvas.grabbing { cursor: grabbing; }
/* Every value in a slot of fixed width, so that nothing moves as the numbers change. */
.readouts { display: flex; flex-wrap: wrap; gap: 2px 18px; color: var(--ink-2); min-height: 1.5em; font-variant-numeric: tabular-nums; }
.readouts .ro { white-space: nowrap; }
.readouts .slot { color: var(--ink); font-weight: 600; }
.readouts .lab { margin-right: 0.5ch; }
.readouts .slot + .lab, .readouts .slot + .slot, .readouts .unit { margin-left: 1ch; }
.slot { display: inline-block; text-align: right; white-space: pre; font-variant-numeric: tabular-nums; vertical-align: bottom; }
.slot.left { text-align: left; }
.warnings { color: var(--warn); }
.warnings:empty { display: none; }
.notes { color: var(--ink-2); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.notes b { color: var(--ink); }
.trace-wrap { height: 130px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.trace-wrap canvas { width: 100%; height: 100%; }
.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; }
.button-grid.three button { padding: 3px 2px; font-size: 12px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); }
details.panel summary { cursor: pointer; }
/* A short explanation under a control (the hint under the picture is lib's .hint). */
.note { color: var(--ink-3); font-size: 12px; }
.note sub { font-size: 0.8em; }
#more-box > .label { margin-top: 6px; }
#more-box > .label:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .mx { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
}