/* Figure 1. Contacts, not size: the interferometer running. Every class is prefixed qw1- and every token is scoped to the figure. */
.qw1 {
  --qw-paper: var(--wq-paper, #faf8f3); --qw-ink: var(--wq-ink, #1d1d1b); --qw-body: var(--wq-body, #2a2926); --qw-soft: var(--wq-soft, #3c3a36); --qw-hair: var(--wq-hair, #8a8a8a);
  --qw-rule: color-mix(in srgb, var(--qw-ink) 16%, var(--qw-paper));
  --qw-cyan: var(--wq-cyan, #009fe3); --qw-magenta: var(--wq-magenta, #e6007e); --qw-cyan-text: var(--wq-cyan-text, #0072b5); --qw-magenta-text: var(--wq-magenta-text, #c4006b);
  --qw-text: var(--wq-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --qw-display: var(--wq-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --qw-mono: var(--wq-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0; padding: clamp(.75rem, 2vw, 1.25rem); background: var(--qw-paper); color: var(--qw-body);
  border: 1px solid var(--qw-ink); font-family: var(--qw-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box; container: qw1 / inline-size;
}
@media (prefers-color-scheme: dark) {
  .qw1 { --qw-paper: var(--wq-paper, #141413); --qw-ink: var(--wq-ink, #faf8f3); --qw-body: var(--wq-body, #e9e6df); --qw-soft: var(--wq-soft, #c9c5bc);
    --qw-cyan: var(--wq-cyan, #2bb3f0); --qw-magenta: var(--wq-magenta, #ff3d9e); --qw-cyan-text: var(--wq-cyan-text, #2bb3f0); --qw-magenta-text: var(--wq-magenta-text, #ff6fb6); }
}
.qw1 *, .qw1 *::before, .qw1 *::after { box-sizing: border-box; }
.qw1-label { margin: 0; font: 700 .7rem/1.3 var(--qw-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--qw-soft); }
.qw1-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--qw-rule); }
.qw1-live { color: var(--qw-ink); }
.qw1-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--qw-magenta); vertical-align: .05rem; }
.qw1-stage { position: relative; }
.qw1-canvas { display: block; width: 100%; height: auto; }
.qw1-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; margin-top: .55rem; }
.qw1-ctl { min-width: 0; }
.qw1-ctl label { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.qw1-val { font: 700 .78rem/1.3 var(--qw-mono); letter-spacing: .04em; color: var(--qw-ink); text-align: right; font-variant-numeric: tabular-nums; }
.qw1-ctl--contacts .qw1-val { color: var(--qw-magenta-text); }
.qw1-ctl--size .qw1-val { font: 860 1.45rem/1 var(--qw-display); letter-spacing: -.035em; text-transform: none; }
.qw1-runs { margin-top: .5rem; }
.qw1-runlist { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .35rem .9rem; }
.qw1-run { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.qw1-runcv { flex: none; width: 48px; height: 20px; border-bottom: 1px solid var(--qw-rule); }
.qw1-runtx { font: 400 .68rem/1.3 var(--qw-mono); color: var(--qw-soft); }
.qw1-range { display: block; width: 100%; margin: .3rem 0 0; height: 1.6rem; background: transparent; accent-color: var(--qw-ink); cursor: pointer; touch-action: pan-y; }
.qw1-ctl--contacts .qw1-range { accent-color: var(--qw-magenta); }
.qw1-range:focus-visible { outline: 2px solid var(--qw-ink); outline-offset: 3px; }
.qw1-note { margin: .1rem 0 0; font: 400 .7rem/1.35 var(--qw-mono); color: var(--qw-soft); min-height: 1.9em; }
.qw1-readout { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--qw-rule); font-size: 1rem; font-weight: 450; line-height: 1.32; color: var(--qw-ink); }
.qw1-readout b { font-weight: 700; font-variant-numeric: tabular-nums; }
.qw1-caption { margin: .45rem 0 0; font-size: .82rem; color: var(--qw-soft); }
@container qw1 (max-width: 560px) {
  .qw1-controls { gap: .2rem .9rem; margin-top: .35rem; }
  .qw1-ctl label { display: block; }
  .qw1-val { display: block; text-align: left; font-size: .72rem; }
  .qw1-ctl--size .qw1-val { font-size: .92rem; white-space: nowrap; }
  .qw1-runlist { grid-template-columns: minmax(0, 1fr); }
  .qw1-label { font-size: .64rem; letter-spacing: .1em; }
  .qw1-range { height: 1.4rem; margin-top: .1rem; }
  .qw1-note { font-size: .64rem; min-height: 0; }
  .qw1-note--contacts { display: none; }
  .qw1-note--size { grid-column: 1 / -1; }
  .qw1-wideonly { display: none; }
  .qw1-readout { font-size: .9rem; margin-top: .35rem; padding-top: .35rem; }
  .qw1-caption { font-size: .76rem; }
}
@media (forced-colors: active) {
  .qw1 { --qw-paper: Canvas; --qw-ink: CanvasText; --qw-body: CanvasText; --qw-soft: CanvasText; --qw-hair: CanvasText;
    --qw-rule: CanvasText; --qw-cyan: LinkText; --qw-magenta: Highlight; --qw-cyan-text: LinkText; --qw-magenta-text: CanvasText; }
  .qw1-live::before { forced-color-adjust: none; background: CanvasText; }
  .qw1-range { accent-color: auto; }
}
@media print {
  .qw1 { break-inside: avoid; }
}