/* Figure 4. The heaviest superpositions in these sources. Every class is prefixed qw4- and every token is scoped to the figure. */
.qw4 {
  --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: qw4 / inline-size;
}
@media (prefers-color-scheme: dark) {
  .qw4 { --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); }
}
.qw4 *, .qw4 *::before, .qw4 *::after { box-sizing: border-box; }
.qw4-label { margin: 0; font: 700 .7rem/1.3 var(--qw-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--qw-soft); }
.qw4-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); }
.qw4-svg { display: block; width: 100%; height: auto; overflow: visible; }
.qw4-t { font-family: var(--qw-mono); fill: var(--qw-soft); }
.qw4-tl { font-weight: 700; letter-spacing: .12em; fill: var(--qw-soft); }
.qw4-ts { font-weight: 700; letter-spacing: .08em; font-size: 9px; }
.qw4-tm { font-weight: 700; letter-spacing: .08em; fill: var(--qw-magenta-text); font-size: 9.5px; }
.qw4-tn { font-family: var(--qw-text); font-size: 11.5px; fill: var(--qw-soft); }
.qw4-axis { stroke: var(--qw-ink); stroke-width: 1; }
.qw4-arc { fill: none; stroke: var(--qw-hair); stroke-width: 1; stroke-dasharray: 2 3; }
.qw4-arrow { stroke: var(--qw-magenta); stroke-width: 2; }
.qw4-head-m { fill: var(--qw-magenta); }
.qw4-angle { fill: none; stroke: var(--qw-magenta); stroke-width: 1; }
.qw4-ghost { fill: none; stroke: var(--qw-hair); stroke-width: 1; }
.qw4-profile { fill: none; stroke: var(--qw-ink); stroke-width: 1.6; }
.qw4-drop { stroke: var(--qw-hair); stroke-width: 1; stroke-dasharray: 2 2; }
.qw4-dot { fill: var(--qw-ink); }
.qw4-ctl { margin-top: .6rem; }
.qw4-ctl label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .5rem; align-items: baseline; }
.qw4-val { font: 700 .78rem/1.3 var(--qw-mono); letter-spacing: .04em; color: var(--qw-magenta-text); font-variant-numeric: tabular-nums; }
.qw4-range { display: block; width: 100%; margin: .3rem 0 0; height: 1.6rem; accent-color: var(--qw-magenta); cursor: pointer; touch-action: pan-y; }
.qw4-range:focus-visible { outline: 2px solid var(--qw-ink); outline-offset: 3px; }
.qw4-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); min-height: 2.7em; }
.qw4-readout b { font-weight: 700; font-variant-numeric: tabular-nums; }
.qw4-mark { fill: var(--qw-ink); stroke: var(--qw-ink); stroke-width: 1.5; }
.qw4-mark--scale { fill: var(--qw-paper); }
.qw4-mark--held { fill: var(--qw-cyan); stroke: var(--qw-ink); }
.qw4-sel { stroke: var(--qw-magenta); stroke-width: 3; }
.qw4-stem { stroke: var(--qw-hair); stroke-width: 1; }
.qw4-stem--sel { stroke: var(--qw-ink); }
.qw4-tsel { fill: var(--qw-ink); }
.qw4-caption { margin: .45rem 0 0; font-size: .82rem; color: var(--qw-soft); }
@container qw4 (max-width: 560px) { .qw4-readout { font-size: .92rem; } .qw4-label { font-size: .64rem; letter-spacing: .1em; } }
@media (forced-colors: active) {
  .qw4 { --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; }
  .qw4-range { accent-color: auto; }
}
@media print { .qw4 { break-inside: avoid; } }