/* Figure 5. Break it: make the line a size. Every class is prefixed qw5- and every token is scoped to the figure. */
.qw5 {
  --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: qw5 / inline-size;
}
@media (prefers-color-scheme: dark) {
  .qw5 { --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); }
}
.qw5 *, .qw5 *::before, .qw5 *::after { box-sizing: border-box; }
.qw5-label { margin: 0; font: 700 .7rem/1.3 var(--qw-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--qw-soft); }
.qw5-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); }
.qw5-svg { display: block; width: 100%; height: auto; overflow: visible; }
.qw5-t { font-family: var(--qw-mono); fill: var(--qw-soft); }
.qw5-tl { font-weight: 700; letter-spacing: .12em; fill: var(--qw-soft); }
.qw5-ts { font-weight: 700; letter-spacing: .08em; font-size: 9px; }
.qw5-tn { font-family: var(--qw-text); font-size: 11.5px; fill: var(--qw-soft); }
.qw5-axis { stroke: var(--qw-ink); stroke-width: 1; }
.qw5-arc { fill: none; stroke: var(--qw-hair); stroke-width: 1; stroke-dasharray: 2 3; }
.qw5-arrow { stroke: var(--qw-magenta); stroke-width: 2; }
.qw5-head-m { fill: var(--qw-magenta); }
.qw5-angle { fill: none; stroke: var(--qw-magenta); stroke-width: 1; }
.qw5-ghost { fill: none; stroke: var(--qw-hair); stroke-width: 1; }
.qw5-profile { fill: none; stroke: var(--qw-ink); stroke-width: 1.6; }
.qw5-drop { stroke: var(--qw-hair); stroke-width: 1; stroke-dasharray: 2 2; }
.qw5-dot { fill: var(--qw-ink); }
.qw5-ctl { margin-top: .6rem; }
.qw5-ctl label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .5rem; align-items: baseline; }
.qw5-val { font: 700 .78rem/1.3 var(--qw-mono); letter-spacing: .04em; color: var(--qw-magenta-text); font-variant-numeric: tabular-nums; }
.qw5-range { display: block; width: 100%; margin: .3rem 0 0; height: 1.6rem; accent-color: var(--qw-magenta); cursor: pointer; touch-action: pan-y; }
.qw5-range:focus-visible { outline: 2px solid var(--qw-ink); outline-offset: 3px; }
.qw5-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; }
.qw5-readout b { font-weight: 700; font-variant-numeric: tabular-nums; }
.qw5-frame { fill: none; stroke: var(--qw-ink); stroke-width: 1; }
.qw5-dots { fill: var(--qw-ink); opacity: .85; }
.qw5-hit { fill: var(--qw-magenta); opacity: .7; }
.qw5-big { font-family: var(--qw-display); font-weight: 820; font-size: 22px; fill: var(--qw-ink); letter-spacing: -.03em; }
.qw5-rec { fill: none; stroke: var(--qw-ink); stroke-width: 1.8; }
.qw5-size { fill: none; stroke: var(--qw-ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.qw5-now { stroke: var(--qw-hair); stroke-width: 1; stroke-dasharray: 2 2; }
.qw5-dot-rec { fill: var(--qw-ink); }
.qw5-dot-size { fill: var(--qw-paper); stroke: var(--qw-ink); stroke-width: 1.5; }
.qw5-tk { font-weight: 700; letter-spacing: .08em; font-size: 9px; fill: var(--qw-ink); }
.qw5-tm { font-family: var(--qw-text); fill: var(--qw-ink); letter-spacing: 0; font-weight: 420; }
.qw5-tm tspan.qw5-strong { font-weight: 700; }
.qw5-caption { margin: .45rem 0 0; font-size: .82rem; color: var(--qw-soft); }
@container qw5 (max-width: 560px) { .qw5-readout { font-size: .92rem; } .qw5-label { font-size: .64rem; letter-spacing: .1em; } }
@media (forced-colors: active) {
  .qw5 { --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; }
  .qw5-range { accent-color: auto; }
  .qw5-hit { opacity: 1; }
  .qw5-hit--x { fill: none; stroke: var(--qw-magenta); stroke-width: .9; }
  .qw5-hit--key { stroke-width: 1.6; }
  .qw5-dots { opacity: 1; }
}
@media print { .qw5 { break-inside: avoid; } }