/* ==========================================================================
   QUIET LUXURY — "Viewing Distance". Loaded on a/quiet-luxury.html only.

   Every value here is this exhibit's art direction, not Quiet Luxury canon:
   the record establishes no palette, typeface, sizes, spacing, radius or
   motion values, and the downloads say so (claim-register.ts guards them).
   Colours and timings come from QL_EXHIBIT in render/exhibits/quiet-luxury.ts,
   written into the page as --ql-* custom properties.

   Breakpoints are container widths of the page column (container `room`),
   not the viewport: desktop >= 1000px, tablet 640-999px (the 834 board),
   phone < 640px (the four 390 boards). The live shell keeps its own.
   ========================================================================== */

@font-face { font-family: "QL Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "QL Newsreader"; src: url("fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "QL Hanken"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "QL Cormorant"; src: url("fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "QL Cormorant"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

.ql-page main {
  --ql-f-nr: "QL Newsreader", Georgia, "Times New Roman", serif;
  --ql-f-hk: "QL Hanken", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ql-f-cg: "QL Cormorant", "Cormorant Garamond", Georgia, serif;
  --ql-f-geo: Georgia, "Times New Roman", serif;
  --ql-f-sys: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ql-f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ql-pale: #6F6354;
  --gut: 64px; --lab: 240px; --col: 56px; --sp: 150px;
  padding-inline: 0 !important;
  padding-block-end: 0 !important;
  background: var(--ql-ground);
  color: var(--ql-ink);
  font-family: var(--ql-f-hk);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.ql-page main *, .ql-page main *::before, .ql-page main *::after { box-sizing: border-box; }
:where(.ql-hero, .ql-rec) :is(p, h1, h2, h3, dl, dd, dt, figure, ul, ol, table, caption) { margin: 0; }
:where(.ql-hero, .ql-rec) :is(ul, ol) { padding: 0; list-style: none; }
:where(.ql-hero, .ql-rec) :is(h1, h2, h3) { font-weight: 400; }
:where(.ql-hero, .ql-rec) a { color: var(--ql-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:where(.ql-hero, .ql-rec) a:hover { color: var(--ql-ink2); }
:where(.ql-hero, .ql-rec) button { font: inherit; color: inherit; cursor: pointer; }
.ql-page main :is(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--ql-ink); outline-offset: 3px; }
.ql-mat :is(a, button, [tabindex]):focus-visible { outline-color: var(--ql-deep-ink); }
.ql-page main .topbar { position: relative; z-index: 5; margin: 0; padding-inline: 32px; background: var(--ql-ground); }

.ql-hero, .ql-rec { container: room / inline-size; }
:where(.ql-hero, .ql-rec) figcaption { font-size: 12px; line-height: 1.45; }
.ql-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root:not(.ql-js) .ql-jsonly { display: none !important; }
.ql-ink { color: var(--ql-ink); }
.ql-ink2 { color: var(--ql-ink2); }
.ql-debt { color: var(--ql-debt); }
.ql-mono { font-family: var(--ql-f-mono); font-size: 13px; }

/* Type roles */
.ql-lb { font: 500 13px/1.45 var(--ql-f-hk); letter-spacing: .01em; color: var(--ql-ink2); font-variant-numeric: tabular-nums; }
.ql-ev { font: 500 12px/1.5 var(--ql-f-hk); letter-spacing: .01em; color: var(--ql-mute); }
.ql-h1 { font: 400 64px/1 var(--ql-f-nr); letter-spacing: -0.015em; }
.ql-h2 { font: 400 40px/1.1 var(--ql-f-nr); letter-spacing: -0.01em; }
.ql-h2--xl { font-size: 64px; line-height: 1.08; }
.ql-sub { font-size: 17px; line-height: 1.6; color: var(--ql-ink2); max-width: 60ch; }
.ql-sub--s { font-size: 15px; }
.ql-body { font-size: 17px; line-height: 1.6; color: var(--ql-ink2); }
.ql-statement { font: 400 26px/1.3 var(--ql-f-nr); }
.ql-note { margin-inline-start: calc(var(--lab) + var(--col)) !important; margin-top: 24px !important; font-size: 15px; line-height: 1.6; color: var(--ql-ink2); max-width: 62ch; }

/* Why we say this: 12px dotted marker, 44px hit area; the panel opens inline below its block. */
.ql-mk {
  position: relative; display: inline; margin-inline-start: 8px; padding: 0;
  font: 500 12px/1.4 var(--ql-f-hk); font-style: normal; letter-spacing: .01em;
  color: var(--ql-mute) !important; text-decoration: underline dotted !important; text-underline-offset: 3px; white-space: nowrap; vertical-align: baseline;
}
.ql-mk::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.ql-mk:hover, .ql-mk[aria-expanded="true"] { text-decoration-style: solid !important; color: var(--ql-ink) !important; }
.ql-mat .ql-mk { color: var(--ql-deep-mute) !important; }
.ql-mat .ql-mk:hover, .ql-mat .ql-mk[aria-expanded="true"] { color: var(--ql-deep-ink) !important; }
.ql-why {
  display: none; margin-block: 16px 8px; max-width: 760px; padding: 18px 22px;
  background: var(--ql-paper); border: 1px solid var(--ql-rule); color: var(--ql-ink);
  font-size: 14px; line-height: 1.5; text-align: left; font-style: normal; letter-spacing: 0;
}
.ql-why:target, .ql-why.is-open { display: block; }
.ql-js .ql-why:not(.is-open) { display: none; }
.ql-sec > .ql-why, .ql-head + .ql-why, .ql-why + .ql-why { margin-inline-start: calc(var(--lab) + var(--col)); }
.ql-why__h { font: 500 12px/1.4 var(--ql-f-hk); color: var(--ql-mute); margin-bottom: 10px !important; }
.ql-why__dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 20px; }
.ql-why__dl dt { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink2); }
.ql-why__dl dd { font-family: var(--ql-f-hk); font-size: 14px; }
.ql-why__sep { border-top: 1px solid var(--ql-rule); margin-block: 4px; }
.ql-why__src { display: block; }
.ql-why__x { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font: 500 13px/1 var(--ql-f-hk); }

/* Found in research (Design Completion Campaign, 2026-09-29): brand prominence, beside the signals. */
.ql-found { margin-top: 32px; }
.ql-found__l { display: grid; gap: 0; max-width: 62ch; border-top: 1px solid var(--ql-ink); }
.ql-found__l li { padding: 12px 0; border-bottom: 1px solid var(--ql-rule); font-size: 15px; line-height: 1.55; color: var(--ql-ink2); }

/* Shared layout: the 240px label column and the content column */
.ql-sec { position: relative; padding: var(--sp) var(--gut) 0; }
.ql-head, .ql-grid { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: var(--col); }
.ql-lab { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink2); }
.ql-headc { display: flex; flex-direction: column; gap: 16px; }
.ql-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  font: 600 14px/1.2 var(--ql-f-hk) !important; background: transparent; color: var(--ql-ink); border: 1px solid var(--ql-ink); border-radius: 0;
  transition: background-color var(--ql-t-state) linear, color var(--ql-t-state) linear;
}
.ql-btn--solid, .ql-btn[aria-pressed="true"] { background: var(--ql-ink); color: var(--ql-ground); }
.ql-btn--l { min-height: 52px; padding: 0 28px; font-size: 15px !important; }
.ql-seg { display: inline-flex; border: 1px solid var(--ql-ink); }
.ql-seg button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--ql-ink); font: 600 14px/1.2 var(--ql-f-hk); transition: background-color var(--ql-t-state) linear, color var(--ql-t-state) linear; }
.ql-seg button + button { border-inline-start: 1px solid var(--ql-ink); }
.ql-seg button[aria-pressed="true"] { background: var(--ql-ink); color: var(--ql-ground); }
.ql-band { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); column-gap: var(--col); margin-top: 36px; padding: 26px 32px; background: var(--ql-field); }
.ql-band p { font-size: 16px; line-height: 1.6; }

/* ---------------------------------------------------------------- HERO */
.ql-hero { background: var(--ql-ground); }
.ql-hero__in { display: grid; grid-template-columns: 520fr 680fr; min-height: 820px; }
.ql-hero__text { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 56px 56px 64px 64px; }
.ql-hero__main { display: flex; flex-direction: column; gap: 22px; }
.ql-hero__tag { font: italic 400 25px/1.25 var(--ql-f-nr); }
.ql-hero__def { font-size: 16px; line-height: 1.62; color: var(--ql-ink2); max-width: 38ch; }
.ql-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding-top: 12px; border-top: 1px solid var(--ql-rule); }
.ql-hero__meta div { display: flex; flex-direction: column; gap: 3px; }
.ql-hero__meta dt { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-mute); }
.ql-hero__meta dd { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink); }
.ql-hero__ev { grid-column: 1 / -1; }
.ql-hero__fig { display: flex; flex-direction: column; gap: 12px; }
.ql-hero__cap { display: flex; justify-content: space-between; gap: 16px; padding-inline-end: 32px; }

/* ---------------------------------------------------------------- THESIS, LEARN */
.ql-thesis { padding-top: 200px; }
.ql-thesis__c { gap: 26px; max-width: 62ch; }
.ql-learn .ql-head { margin-bottom: 48px; }
.ql-absence { margin-top: 48px; }
.ql-absence__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 1px solid var(--ql-ink); padding-top: 28px; }
.ql-absence__c > .ql-why { grid-column: 1 / -1; }
.ql-absence__h { grid-column: 1 / -1; font: 400 34px/1.2 var(--ql-f-nr); max-width: 22ch; }
.ql-absence__pair { display: contents; }
.ql-absence__pair p { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; }
.ql-absence__t { font-size: 17px; }

/* ---------------------------------------------------------------- COSTUME TEST */
.ql-costume .ql-head { margin-bottom: 28px; }
.ql-costume__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--ql-ink); padding-top: 18px; margin-bottom: 28px; }
.ql-costume__bar .ql-btn { padding: 0 22px; font-size: 15px !important; }
.ql-costume__ab { display: none; }
.ql-costume__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-costume__fig { display: flex; flex-direction: column; gap: 12px; }
.ql-costume__fig figcaption { display: flex; flex-direction: column; gap: 4px; }
.ql-costume__cap { font-size: 15px; line-height: 1.5; color: var(--ql-ink2); }
.ql-costume__frame { height: 540px; }
.ql-cA, .ql-cB { height: 100%; }
.ql-cA { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ql-cA--on { background: #EADFCF; padding: 60px 56px; gap: 22px; }
.ql-cA--on .ql-cA__img { background: #DDD0BC; }
.ql-cA--off { background: var(--ql-paper); padding: 28px; gap: 10px; font-family: var(--ql-f-sys); font-size: 13px; color: #555555; }
.ql-cA--off .ql-cA__img { background: #E4E4E4; }
.ql-cA__img { width: min(280px, 100%); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.ql-vase { width: 90px; height: 140px; max-height: 66%; }
.ql-cA--on .ql-cA__brand { font: 300 13px/1 var(--ql-f-cg); letter-spacing: .34em; color: #9B8D7A; }
.ql-cA--on .ql-cA__line { font: italic 300 32px/1.15 var(--ql-f-cg); color: #6F6354; }
.ql-cA--on .ql-cA__btn { font: 400 12px/1 var(--ql-f-cg); letter-spacing: .3em; color: #9B8D7A; border: 1px solid #C9BBA6; padding: 10px 26px; }
.ql-cA--off .ql-cA__line { font-size: 22px; color: #222222; }
.ql-cA--off .ql-cA__btn { font-size: 13px; color: #222222; border: 1px solid #BBBBBB; padding: 8px 16px; }
.ql-cB { display: grid; align-content: end; }
.ql-cB--on { background: var(--ql-card); padding: 56px; gap: 18px; }
.ql-cB--off { background: var(--ql-paper); padding: 28px; gap: 10px; font-family: var(--ql-f-sys); }
.ql-cB__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--ql-rule); padding-top: 14px; }
.ql-cB--on .ql-cB__name { font: 400 24px/1.2 var(--ql-f-nr); }
.ql-cB--on .ql-cB__row a { font-size: 14px; font-weight: 500; }
.ql-cB--on .ql-cB__desc { font-size: 14px; color: var(--ql-ink2); }
.ql-cB--off .ql-cB__name { font-size: 20px; color: #222222; }
.ql-cB--off .ql-cB__desc { font-size: 13px; color: #444444; }
.ql-cB--off .ql-cB__desc a { color: #444444; }
.ql-cA--off, .ql-cB--off { display: none; }
.ql-costume[data-costume="off"] :is(.ql-cA--on, .ql-cB--on) { display: none; }
.ql-costume[data-costume="off"] .ql-cA--off { display: flex; }
.ql-costume[data-costume="off"] .ql-cB--off { display: grid; }
.ql-test { padding-top: 48px; }
.ql-test__q { font: 400 24px/1.4 var(--ql-f-nr); max-width: 46ch; }

/* ---------------------------------------------------------------- SIGNALS */
.ql-signals .ql-head { margin-bottom: 36px; }
.ql-sig { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); background: var(--ql-field); }
.ql-sig__case { padding: 72px 40px 36px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ql-sig__case .ex-slot { width: min(280px, 100%); }
.ql-sig__case figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ql-sig__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 48px 0; }
.ql-sig__lists ul { margin-top: 10px; }
.ql-sig__lists li { border-top: 1px solid #A9A69F; padding: 12px 0; font-size: 14px; letter-spacing: .04em; color: var(--ql-ink2); }
.ql-sig__lists li.ql-sig__q { font-weight: 600; color: var(--ql-ink); }
.ql-sig__lists figcaption { grid-column: 1 / -1; padding-top: 10px; }

/* ---------------------------------------------------------------- BRANDING, TONE */
.ql-branding .ql-head { margin-bottom: 32px; }
.ql-carriers__l { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ql-ink); }
.ql-carriers__l li { padding: 14px 10px 14px 0; font-size: 15px; border-right: 1px solid var(--ql-rule); }
.ql-tone { padding-top: 56px; }
.ql-tone__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-tone__c > figure { background: var(--ql-paper); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ql-tone__announce { font: italic 300 26px/1.25 var(--ql-f-cg); color: #6F6354; }
.ql-tone__describe { font: 400 26px/1.15 var(--ql-f-nr); }
.ql-tone__c > .ql-note, .ql-tone__c > .ql-why { grid-column: 1 / -1; margin-inline-start: 0 !important; }
.ql-tone__n { margin-top: 0 !important; }

/* ---------------------------------------------------------------- COMPOSITION */
.ql-comp .ql-head { margin-bottom: 32px; }
.ql-comp__g { display: grid; grid-template-columns: var(--lab) 380px minmax(0, 1fr); column-gap: var(--col); }
.ql-comp__q li { display: grid; grid-template-columns: 36px minmax(0, 1fr); border-top: 1px solid var(--ql-rule); padding: 18px 0; align-items: baseline; }
.ql-comp__qt { font: 400 22px/1.3 var(--ql-f-nr); }
.ql-comp__tier { display: flex !important; flex-direction: column; gap: 6px; padding-top: 16px !important; }
.ql-comp__fig { display: flex; flex-direction: column; gap: 12px; }
.ql-comp__card { position: relative; background: var(--ql-paper); min-height: 480px; padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; }
.ql-comp__name { font: 400 30px/1.1 var(--ql-f-nr); margin-top: 40px; }
.ql-comp__desc { font-size: 14px; color: var(--ql-ink2); }
.ql-comp__n { position: absolute; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--ql-ink); color: var(--ql-ground); font: 600 12px/1 var(--ql-f-hk); }
.ql-comp__n--1 { left: 14px; top: 44px; }
.ql-comp__n--3 { left: 14px; bottom: 120px; }
.ql-comp__n--4 { right: 14px; top: 250px; }
.ql-comp__removed { position: absolute; right: 14px; bottom: 18px; font-size: 12px; color: var(--ql-ink2); }

/* ---------------------------------------------------------------- LADDER */
.ql-lad { padding-bottom: 120px; }
.ql-lad .ql-head { margin-bottom: 28px; }
.ql-lad__row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) 220px; column-gap: var(--col); border-top: 1px solid var(--ql-rule); padding: 20px 0; }
.ql-lad__row:first-child { border-top-color: var(--ql-ink); }
.ql-lad__t { font-size: 17px; line-height: 1.45; }
.ql-lad__row--necessary .ql-lad__t { font: 400 26px/1.45 var(--ql-f-nr); }
.ql-lad__row--strong .ql-lad__t { font-size: 19px; }
.ql-lad__row--untiered { grid-template-columns: var(--lab) minmax(0, 1fr); }
.ql-lad__u { font-size: 15px; line-height: 1.6; color: var(--ql-ink2); }

/* ---------------------------------------------------------------- MATERIAL (deep field) */
.ql-mat { margin-top: 30px; padding-block: 120px; background: var(--ql-deep); color: var(--ql-deep-ink); }
.ql-mat .ql-lab, .ql-mat .ql-lb { color: var(--ql-deep-mute); }
.ql-mat .ql-ink { color: var(--ql-deep-ink); }
.ql-mat .ql-sub { color: var(--ql-deep-ink2); }
.ql-mat .ql-ev { color: var(--ql-deep-mute); }
.ql-mat .ql-h2 { font-size: 44px; line-height: 1.08; }
.ql-mat .ql-why { color: var(--ql-ink); }
.ql-mat .ql-why .ql-ev, .ql-mat .ql-why .ql-lb { color: var(--ql-mute); }
.ql-mag { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; margin-top: 44px; }
.ql-mag__fig { display: flex; flex-direction: column; gap: 12px; }
.ql-mag__frame { position: relative; background: #D8D6D0; overflow: hidden; }
.ql-js .ql-mag__frame { aspect-ratio: 760 / 640; }
.ql-js .ql-mag__lv { position: absolute; inset: 0; }
.ql-js .ql-mag__lv[data-off] { visibility: hidden; }
:root:not(.ql-js) .ql-mag__lv { position: relative; }
:root:not(.ql-js) .ql-mag__frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ql-mag__tag { position: absolute; left: 20px; top: 18px; background: var(--ql-deep); color: var(--ql-deep-ink) !important; padding: 6px 10px; }
.ql-js .ql-mag__lv.is-in .ex-slot { animation: ql-magnify var(--ql-t-magnify) cubic-bezier(.2, 0, 0, 1); transform-origin: var(--fx-d) var(--fy-d); }
@keyframes ql-magnify { from { transform: scale(.55); opacity: .35; } to { transform: none; opacity: 1; } }
.ql-mag__fc { display: flex; flex-direction: column; gap: 4px; }
.ql-mag__cap { font-size: 16px; line-height: 1.55; color: var(--ql-deep-ink2); max-width: 60ch; }
.ql-mag__side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ql-mag__ctl { display: flex; flex-direction: column; gap: 10px; }
.ql-mag__b {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; text-align: left;
  background: transparent; color: var(--ql-deep-ink); border: 1px solid var(--ql-deep-line);
  transition: background-color var(--ql-t-state) linear, color var(--ql-t-state) linear;
}
.ql-mag__b[aria-pressed="true"] { background: var(--ql-deep-ink); color: var(--ql-deep); border-color: var(--ql-deep-ink); }
.ql-mag__m { width: 52px; font-size: 22px; font-variant-numeric: tabular-nums; }
.ql-mag__nm { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ql-mag__nm b { font-size: 15px; font-weight: 600; }
.ql-mag__step { display: none; min-height: 48px; min-width: 48px; background: transparent; color: var(--ql-deep-ink); border: 1px solid var(--ql-deep-line); font-size: 20px; }
.ql-mag__step:disabled { opacity: .45; cursor: default; }
.ql-mag__motto { display: flex; flex-direction: column; gap: 8px; }
.ql-mag__motto > span:first-child { font: 600 13px/1.8 var(--ql-f-hk); letter-spacing: .14em; }

/* ---------------------------------------------------------------- FORM, IMAGERY */
.ql-form .ql-head, .ql-img .ql-head, .ql-col .ql-head { margin-bottom: 32px; }
.ql-form { padding-top: 140px; }
.ql-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-form__fig { display: flex; flex-direction: column; gap: 12px; }
.ql-form__fig figcaption { display: flex; flex-direction: column; gap: 4px; }
.ql-form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; background: var(--ql-paper); }
.ql-form__two > div { display: flex; flex-direction: column; gap: 6px; }
.ql-img { padding-top: 140px; }
.ql-img__g { display: grid; grid-template-columns: 640fr 416fr; gap: var(--col); }
.ql-img__fig { display: flex; flex-direction: column; gap: 10px; }
.ql-img__fig figcaption { display: flex; flex-direction: column; gap: 4px; }
.ql-img__over { position: relative; }
.ql-img__box { position: absolute; border: 1px solid #F2F1EE; }
.ql-img__box--construction { border-width: 1.5px; }
.ql-img__box--surface { border-width: 2px; }
.ql-img__box b { position: absolute; left: 8px; top: 6px; font: 600 13px/1 var(--ql-f-hk); color: #F2F1EE; white-space: nowrap; }
.ql-img__chooser { display: none; flex-direction: column; gap: 12px; }
.ql-img__chooser .ex-slot > img { transition: width var(--ql-t-magnify) cubic-bezier(.2, 0, 0, 1), left var(--ql-t-magnify) cubic-bezier(.2, 0, 0, 1), top var(--ql-t-magnify) cubic-bezier(.2, 0, 0, 1); }
.ql-img__chooser .ql-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ql-img__notes { display: flex; flex-direction: column; gap: 28px; }
.ql-img__n { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ql-rule); padding-top: 16px; }
.ql-img__n:first-child { border-top-color: var(--ql-ink); }
.ql-img__n p { font-size: 17px; line-height: 1.6; }
.ql-img__n .ql-why { margin-inline-start: 0; }
.ql-stock { display: flex; flex-direction: column; gap: 8px; }
.ql-stock__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ql-stock__g span { height: 104px; background: #DCDAD4; display: flex; align-items: flex-end; padding: 10px; font-size: 13px; line-height: 1.3; color: var(--ql-ink2); }
.ql-img__n > p.ql-ink2 { font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- COLOUR WORLDS */
.ql-col { padding-top: 160px; padding-bottom: 120px; }
.ql-col__sw { display: none; }
.ql-col__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ql-col__f { display: flex; flex-direction: column; gap: 10px; }
.ql-col__p { min-height: 420px; padding: 20px; display: flex; flex-direction: column; gap: 10px; border: 1px solid; }
.ql-col__name { font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.ql-col__t { font: 400 24px/1.15 var(--ql-f-nr); }
.ql-col__d { font-size: 14px; line-height: 1.5; }
.ql-col__a, .ql-col__a:hover { color: inherit !important; font-size: 14px; font-weight: 600; }
.ql-col__k { margin-top: 36px; }
.ql-col__kc { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--ql-ink2); }

/* ---------------------------------------------------------------- TYPOGRAPHY */
.ql-ty { padding-top: 120px; }
.ql-ty .ql-head { margin-bottom: 36px; }
.ql-ty__own { font-size: 13px; max-width: 70ch; }
.ql-ty__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ql-ink); padding-top: 18px; margin-bottom: 36px; background: var(--ql-ground); }
.ql-ty__fig { display: flex; flex-direction: column; gap: 36px; margin-bottom: 36px; }
.ql-ty__stage { display: flex; flex-direction: column; gap: 14px; }
.ql-ty__stage > p { background: var(--ql-paper); }
.ql-ty__sh { padding: 64px 64px 10px; line-height: 1.05; }
.ql-ty__sb { padding: 10px 64px 64px; margin-top: -14px !important; line-height: 1.55; }
.ql-ty__sb { max-width: none; }
.ql-ty__stage[style*="--al: center"] .ql-ty__sb { text-align-last: auto; }
:is(.ql-ty__sh, .ql-ty__sb, .ql-ty__s) {
  font-family: var(--f); font-size: max(12px, calc(var(--s) * var(--k, 1))); font-weight: var(--w); letter-spacing: var(--tr);
  color: var(--c); text-align: var(--al); font-style: var(--st, normal); font-synthesis: none;
}
.ql-ty__sb { color: var(--ql-ink2); }
.ql-ty__stage .ql-ty__sb { padding-inline: max(64px, calc((100% - var(--measure)) / 2)); }
.ql-ty__stage[style*="--al: left"] .ql-ty__sb { padding-inline: 64px max(64px, calc(100% - var(--measure) - 64px)); }
.ql-ty__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; }
.ql-ty__i { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ql-rule); padding-top: 14px; }
.ql-ty__v { display: flex; flex-direction: column; gap: 12px; }
.ql-ty__v + .ql-ty__v { border-top: 1px dashed var(--ql-rule); padding-top: 12px; }
.ql-js .ql-ty__v + .ql-ty__v { border-top: 0; padding-top: 0; }
.ql-ty__i > h3 { display: flex; }
.ql-ty__metric { align-self: flex-end; margin-top: -32px; }
.ql-ty__box { height: 200px; background: var(--ql-paper); display: flex; align-items: center; justify-content: var(--j); padding: 0 24px; overflow: hidden; }
.ql-ty__box .ql-ty__s { line-height: 1.15; }
.ql-ty__lines { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ql-ty__lines .ql-ty__s { display: block; }
.ql-caps { text-transform: uppercase; }
.ql-ty__verdict { font-size: 15px; line-height: 1.5; color: var(--ql-ink2); }
.ql-js .ql-ty [data-mode][data-off] { display: none; }
.ql-ty__close { margin-top: 44px !important; font: italic 400 28px/1.3 var(--ql-f-nr); }

/* ---------------------------------------------------------------- DETAIL: the cost of mistakes */
.ql-det { padding-top: 200px; padding-bottom: 120px; }
.ql-det .ql-head { margin-bottom: 32px; }
.ql-det__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 32px; }
.ql-det__errs { display: contents; }
.ql-det__errs button { min-height: 44px; padding: 0 14px; font: 400 14px/1.2 var(--ql-f-hk); background: transparent; color: var(--ql-ink); border: 1px solid var(--ql-ink); transition: background-color var(--ql-t-state) linear, color var(--ql-t-state) linear; }
.ql-det__errs button[aria-pressed="true"] { background: var(--ql-ink); color: var(--ql-ground); }
.ql-det__short { display: none; }
.ql-det__all { display: contents; }
.ql-det__all .ql-btn { padding: 0 16px; }
.ql-det__all .ql-lb { padding-inline-start: 8px; }
.ql-det__view { display: none; }
.ql-det__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-det__f { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ql-det__f figcaption { display: flex; flex-direction: column; gap: 4px; }
.ql-sparse { background: var(--ql-paper); min-height: 700px; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* The module: native size, never scaled. Error magnitudes are absolute pixels. */
.ql-mod { display: flex; flex-direction: column; width: 440px; flex: none; }
.ql-mod__img { overflow: hidden; }
.ql-mod__img .ex-slot > img { transform-origin: 50% 50%; }
.ql-mod__cap { margin-top: 12px; font: 400 13px/1.4 var(--ql-f-hk); color: var(--ql-ink2); }
.ql-mod__h { margin-top: 28px; font: 400 30px/1.1 var(--ql-f-nr); }
.ql-mod__rule { display: block; height: 1px; background: var(--ql-rule); margin-top: 18px; }
.ql-mod__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.ql-mod__d { font-size: 15px; color: var(--ql-ink2); }
.ql-mod__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1px solid var(--ql-ink); background: var(--ql-ink); color: var(--ql-ground); font: 600 15px/1 var(--ql-f-hk); white-space: nowrap; }
.ql-det[data-e-spacing] .ql-mod__cap { margin-top: var(--e-capgap); }
.ql-det[data-e-crop] .ql-mod__img .ex-slot > img { transform: var(--e-crop); }
.ql-det[data-e-axis] .ql-mod__h { margin-left: var(--e-axis); }
.ql-det[data-e-rule] .ql-mod__rule { height: var(--e-rule); background: var(--ql-ink); }
.ql-det[data-e-face] .ql-mod__cap { font-family: var(--e-face); }
.ql-det[data-e-button] .ql-mod__btn { min-height: var(--e-btn-h); font-size: var(--e-btn-fs); padding: 0 var(--e-btn-p); }
.ql-dense { background: var(--ql-paper); height: 700px; overflow: auto; font-family: var(--ql-f-sys); }
.ql-dense__in { min-width: max-content; }
.ql-dense__promo { background: #7A2A22; color: #FFFFFF; font-size: 12px; padding: 6px 12px; text-align: center; }
.ql-dense__nav { display: flex; gap: 14px; padding: 10px 12px; font-size: 12px; border-bottom: 1px solid #DDDDDD; flex-wrap: wrap; color: #333333; }
.ql-dense__g { display: grid; grid-template-columns: 56px auto; gap: 8px; padding: 8px; }
.ql-dense__side { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.3; color: #444444; }
.ql-dense__side i { display: block; background: #EEEEEE; height: 60px; }
.ql-dense__side i.ql-dense__tall { height: 90px; }
.ql-dense__stars { background: #F4E3C6; padding: 4px; font-size: 11px; }
.ql-dense__main { display: flex; flex-direction: column; gap: 10px; }
.ql-dense__badges { display: flex; gap: 6px; }
.ql-dense__badges span { background: #141517; color: #FFFFFF; font-size: 11px; padding: 3px 6px; }
.ql-dense__badges .ql-dense__red { background: #7A2A22; }
.ql-dense__badges .ql-dense__grey { background: #EEEEEE; color: #141517; }
.ql-dense__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ql-dense__more i { display: block; background: #EEEEEE; height: 70px; }
.ql-dense__also { font-size: 11px; color: #555555; }

/* ---------------------------------------------------------------- DISTINCTIONS */
.ql-org { padding-top: 120px; }
.ql-org .ql-head, .ql-her .ql-head, .ql-min .ql-head { margin-bottom: 36px; }
.ql-org__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.ql-org__c { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ql-rule); padding-top: 16px; }
.ql-org__c--now { border-top: 2px solid var(--ql-ink); padding-top: 15px; }
.ql-org__c p { font-size: 16px; line-height: 1.6; color: var(--ql-ink2); }
.ql-org__c--now p { color: var(--ql-ink); }
.ql-org__g > .ql-why { grid-column: 1 / -1; margin-inline-start: 0; }
.ql-band h3 { align-self: start; }

.ql-fe { padding-top: 160px; }
.ql-fe__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.ql-fe__top > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.ql-fe__fig { display: flex; flex-direction: column; gap: 10px; }
.ql-fe__frame { position: relative; }
.ql-fe__v { position: relative; }
.ql-js .ql-fe__v[data-off] { display: none; }
:root:not(.ql-js) .ql-fe__v + .ql-fe__v { margin-top: 8px; }
.ql-fe__over { position: absolute; inset: 0; pointer-events: none; }
.ql-fe__v--ql .ql-fe__over { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 32px 40px; }
.ql-fe__name { font: 400 24px/1.2 var(--ql-f-nr); }
.ql-fe__time { position: absolute; left: 40px; top: 36px; font: italic 400 17px/1.3 var(--ql-f-cg); color: #2E3538; }
.ql-fe__thrown { position: absolute; right: 40px; bottom: 32px; font: 600 13px/1 var(--ql-f-hk); letter-spacing: .08em; }
.ql-fe__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 28px; }
.ql-fe__two > div { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ql-ink); padding-top: 14px; }
.ql-fe__two p { font-size: 17px; line-height: 1.6; }
.ql-fe__two > .ql-why { grid-column: 1 / -1; border-top: 1px solid var(--ql-rule); margin-inline-start: 0; }
.ql-fe__b { margin-top: 28px; }
.ql-fe__bc { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--ql-ink2); max-width: 66ch; }

.ql-min { padding-top: 160px; }
.ql-min__sw { display: none; }
.ql-min__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-min__f { display: flex; flex-direction: column; gap: 10px; }
.ql-min__f figcaption { display: flex; flex-direction: column; gap: 4px; }
.ql-min__a { min-height: 440px; background: var(--ql-paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ql-min__a .ex-slot { width: min(300px, 80%); }
.ql-min__no { font-size: 12px; letter-spacing: .1em; }
.ql-min__b { min-height: 440px; background: var(--ql-ground); outline: 1px solid var(--ql-rule); outline-offset: -1px; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.ql-min__b .ex-slot { width: min(440px, 100%); }
.ql-min__name { font: 400 24px/1.2 var(--ql-f-nr); }
.ql-min__d { font-size: 14px; color: var(--ql-ink2); }

.ql-her { padding-top: 160px; }
.ql-her__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.ql-her__g > .ql-why { grid-column: 1 / -1; margin-inline-start: 0; }
.ql-her__c { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ql-ink); padding-top: 14px; }
.ql-her__c figure { display: flex; flex-direction: column; gap: 8px; }
.ql-her__c p { font-size: 15px; line-height: 1.6; }
.ql-her__sw { width: 120px; height: 56px; }
.ql-her__sw--om { background: repeating-linear-gradient(90deg, #1F2A44 0 14px, #EFE9DC 14px 20px, #6B1F24 20px 30px, #EFE9DC 30px 36px); }
.ql-her__sw--h { background: #14213A; display: flex; align-items: center; justify-content: center; font: 400 11px/1 var(--ql-f-geo); letter-spacing: .2em; color: #EFE8D8; }

.ql-not { padding-top: 160px; }
.ql-not__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.ql-not__l li { font: 400 26px/1.5 var(--ql-f-nr); }
.ql-ref { padding-top: 120px; padding-bottom: 120px; }
.ql-ref .ql-head { margin-bottom: 24px; }
.ql-ref__l { margin-inline-start: calc(var(--lab) + var(--col)) !important; }
.ql-ref__l div { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 32px; border-top: 1px solid var(--ql-rule); padding: 16px 0; }
.ql-ref__l dt { font: 400 19px/1.4 var(--ql-f-nr); }
.ql-ref__l dd { font-size: 15px; line-height: 1.6; color: var(--ql-ink2); }

/* ---------------------------------------------------------------- BUILD */
.ql-build { padding-top: 120px; }
.ql-build .ql-head { margin-bottom: 36px; }
.ql-ax { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-bottom: 56px; }
.ql-ax__c { border-top: 1px solid var(--ql-ink); padding-top: 12px; }
.ql-ax__c summary { list-style: none; padding-bottom: 8px; cursor: default; }
.ql-ax__c summary::-webkit-details-marker { display: none; }
.ql-ax__c dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--ql-rule); padding: 9px 0; font-size: 14px; }
.ql-ax__c dt { font-weight: 600; }
.ql-ax__c dd { color: var(--ql-ink2); }
.ql-areas { display: flex; flex-direction: column; }
.ql-areas__t { width: 100%; border-collapse: collapse; }
.ql-areas__t caption { text-align: left; padding-bottom: 12px; }
.ql-areas__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ql-areas__t tr { border-top: 1px solid var(--ql-rule); }
.ql-areas__t :is(th, td) { vertical-align: top; text-align: left; padding: 16px 24px 16px 0; font-weight: 400; }
.ql-areas__t tbody th { width: 150px; font: 400 22px/1.2 var(--ql-f-nr); }
.ql-areas__t tbody td:nth-of-type(1) { width: 224px; }
.ql-areas__t td .ql-ev { display: block; line-height: 1.5; }
.ql-areas__t tbody td:nth-of-type(1) b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ql-areas__t td.ql-areas__mr { width: 254px; padding-right: 0; }
.ql-areas__t td.ql-areas__mr p { font-size: 13px; line-height: 1.5; color: var(--ql-ink2); margin-top: 4px; }
.ql-areas__md { display: none; }
.ql-area__rules li { font-size: 15px; line-height: 1.5; padding: 3px 0; }
.ql-area__rules .ql-why { margin-inline-start: 0; }
.ql-area__none { font-size: 15px; color: var(--ql-mute); }
.ql-area__sub { margin-top: 10px !important; font: 500 12px/1.4 var(--ql-f-hk); color: var(--ql-mute); }
.ql-area__rules--tr li { color: var(--ql-ink2); }
.ql-areas__acc { display: none; }
.ql-areas > figcaption { padding-top: 10px; }

.ql-val { padding-top: 140px; }
.ql-val .ql-head, .ql-if .ql-head, .ql-mo .ql-head, .ql-a11y .ql-head, .ql-dl .ql-head { margin-bottom: 28px; }
.ql-val__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.ql-val__g > div { border-top: 1px solid var(--ql-ink); display: flex; flex-direction: column; }
.ql-val__sws li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ql-rule); font-size: 15px; }
.ql-val__sw { width: 40px; height: 26px; border: 1px solid var(--ql-rule); }
.ql-val__tys li { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ql-rule); }
.ql-val__ty { line-height: 1.1; }
.ql-val__ty--display { font: 400 56px/1.1 var(--ql-f-nr); }
.ql-val__ty--section { font: 400 40px/1.1 var(--ql-f-nr); }
.ql-val__ty--statement { font: 400 24px/1.1 var(--ql-f-nr); }
.ql-val__ty--body { font-size: 17px; }
.ql-val__ty--label { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink2); }
.ql-val__g .ql-ev { padding-top: 8px; }

.ql-if { padding-top: 140px; }
.ql-if__card { background: var(--ql-paper); padding: 0 48px 44px; display: flex; flex-direction: column; gap: 36px; }
.ql-if__nav { display: flex; gap: 36px; height: 64px; border-bottom: 1px solid var(--ql-rule); }
.ql-if__nav a { display: flex; align-items: center; font-size: 15px; text-decoration: none; color: var(--ql-ink2); }
.ql-if__nav a[aria-current="page"] { font-weight: 600; color: var(--ql-ink); border-bottom: 2px solid var(--ql-ink); margin-bottom: -1px; }
.ql-if__g { display: grid; grid-template-columns: 520fr 400fr; gap: var(--col); }
.ql-if__media { display: flex; flex-direction: column; gap: 12px; }
.ql-if__frames { position: relative; }
.ql-if__frame { transition: opacity var(--ql-t-image) linear; }
.ql-js .ql-if__frame[data-off] { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ql-if__frame .ex-slot { aspect-ratio: 520 / 390; }
.ql-if__ctl { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ql-if__thumbs { display: flex; gap: 8px; }
.ql-if__th { width: 64px; height: 48px; border: 1px solid var(--ql-rule); padding: 0; }
.ql-if__th[aria-current="true"] { border: 2px solid var(--ql-ink); }
.ql-if__th--0 { background: #3A4940; }
.ql-if__th--1 { background: #9EA098; }
.ql-if__th--2 { background: #6F7870; }
.ql-if__pg { display: flex; align-items: center; gap: 4px; }
.ql-if__pg button { width: 44px; height: 44px; background: transparent; border: 1px solid var(--ql-mute); }
.ql-if__pg .ql-lb { padding: 0 10px; white-space: nowrap; }
.ql-if__text { display: flex; flex-direction: column; gap: 18px; }
.ql-if__h { font: 400 40px/1.1 var(--ql-f-nr); }
.ql-if__text p { font-size: 16px; line-height: 1.6; max-width: 42ch; }
.ql-if__acts { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ql-if__acts a { font-size: 15px; text-underline-offset: 5px; }
.ql-if__notify { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ql-rule); }
.ql-if__notify > div { display: flex; gap: 8px; }
.ql-if__notify input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--ql-mute); border-radius: 0; font: 400 15px/1 var(--ql-f-hk); background: var(--ql-paper); color: var(--ql-ink); }
.ql-if__notify input::placeholder { color: var(--ql-mute); }
.ql-if__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 28px; font-size: 14px; line-height: 1.55; color: var(--ql-ink2); }
.ql-if__notes > div { border-top: 1px solid var(--ql-ink); padding-top: 12px; }
.ql-if__notes p { margin-top: 8px !important; }
.ql-if__notes > .ql-why { grid-column: 1 / -1; border-top: 1px solid var(--ql-rule); margin-inline-start: 0; }

.ql-mo { padding-top: 140px; }
.ql-mo__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-mo__c { display: flex; flex-direction: column; gap: 12px; }
.ql-mo__box { height: 180px; background: var(--ql-field); position: relative; }
.ql-mo__img { position: absolute; inset: 24px; background: var(--ql-deep); opacity: 0; }
.ql-mo__img.is-on { opacity: 1; }
.ql-mo__img--slow { transition: opacity var(--ql-t-slow) ease-in-out; }
.ql-mo__img--fast { transition: opacity var(--ql-t-image) cubic-bezier(.2, 0, 0, 1); }
.ql-mo__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ql-mo__vals { margin-top: 28px; }
.ql-mo__vals h3 { padding-bottom: 8px; }
.ql-mo__vals dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); padding: 11px 0; border-top: 1px solid var(--ql-rule); font-size: 15px; }
.ql-mo__vals dt { font-weight: 600; }

.ql-a11y { padding-top: 140px; }
.ql-a11y__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ql-a11y__c { padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.ql-a11y__c--ok { outline: 1px solid var(--ql-rule); outline-offset: -1px; }
.ql-a11y__s { font: 400 16px/1.4 var(--ql-f-geo); }
.ql-a11y__c--ok .ql-a11y__s { font-family: var(--ql-f-hk); }
.ql-a11y__t { margin-top: 24px !important; max-width: 76ch; line-height: 1.7; }

.ql-dl { padding-top: 140px; padding-bottom: 120px; }
.ql-dl__f { margin-inline-start: calc(var(--lab) + var(--col)); display: flex; flex-direction: column; gap: 12px; }
.ql-dl__l div { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 24px; border-top: 1px solid var(--ql-rule); padding: 12px 0; font-size: 15px; }
.ql-dl__l dt { font-weight: 600; }

/* ---------------------------------------------------------------- COUNTEREXAMPLE */
.ql-cx { padding-top: 140px; }
.ql-cx .ql-head { margin-bottom: 32px; }
.ql-cx__status { display: none; }
.ql-cx__g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.ql-cx__fig { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* THE CONTROLLED VARIABLES: ground, face, centred axis and pill shape are set here once and no step changes them. */
.ql-cx__stage {
  --g1: 9px; --g2: 27px; --g3: 23px; --cxp: #A89A86;
  min-height: 720px; background: var(--cx-ground); padding: 56px 72px; display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--ql-f-cg);
}
.ql-cx__img { position: relative; width: min(560px, 100%); aspect-ratio: 560 / 320; background: #E2D6C3; }
.ql-cx__im { position: absolute; inset: 0; display: none; }
.ql-cx__im .ex-slot { width: 100%; }
.ql-cx__im--generic { display: block; }
.ql-cx[data-f0] .ql-cx__im--generic { display: none; }
.ql-cx[data-f0]:not([data-f1]) .ql-cx__im--loose { display: block; }
.ql-cx[data-f1] .ql-cx__im--committed { display: block; }
.ql-cx__cap { width: min(560px, 100%); margin-top: var(--g1); text-align: right; font: 300 12px/1.3 var(--ql-f-cg); letter-spacing: .3em; color: var(--cxp); }
.ql-cx__c1 { display: none; }
.ql-cx__h { margin-top: var(--g2); font: italic 300 40px/1.1 var(--ql-f-cg); letter-spacing: .06em; color: #8C7E6B; }
.ql-cx__b { margin-top: var(--g3); max-width: 40ch; font: 300 15px/1.5 var(--ql-f-cg); color: var(--cxp); }
.ql-cx__rule { display: block; margin-top: var(--g2); width: min(360px, 100%); height: 2px; background: #CDBFAA; }
.ql-cx__row { margin-top: var(--g3); width: min(560px, 100%); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ql-cx__price { font: 300 15px/1.5 var(--ql-f-cg); color: var(--cxp); }
.ql-cx__btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 26px; border-radius: 24px; cursor: default;
  font: 300 12px/1 var(--ql-f-cg); letter-spacing: .28em; border: 1px solid #C9BBA6; background: #F3ECE2; color: #9B8D7A;
  box-shadow: 0 4px 10px rgba(120, 100, 70, .25);
}
.ql-cx__b1 { display: none; }
.ql-cx[data-f2] .ql-cx__stage { --g1: 16px; --g2: 36px; --g3: 16px; }
.ql-cx[data-f3] .ql-cx__stage { --cxp: #4A4036; }
.ql-cx[data-f3] .ql-cx__cap { font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.ql-cx[data-f3] .ql-cx__h { font-size: 46px; font-weight: 500; font-style: normal; letter-spacing: -.005em; color: #2E2820; }
.ql-cx[data-f3] :is(.ql-cx__b, .ql-cx__price) { font-size: 19px; font-weight: 500; }
.ql-cx[data-f4] .ql-cx__cap { text-align: center; }
.ql-cx[data-f4] .ql-cx__row { align-items: center; }
.ql-cx[data-f5] .ql-cx__btn { min-height: 48px; font-size: 17px; font-weight: 500; letter-spacing: .04em; border-color: #2E2820; background: #2E2820; color: #F3ECE2; box-shadow: none; }
.ql-cx[data-f5] .ql-cx__b0 { display: none; }
.ql-cx[data-f5] .ql-cx__b1 { display: inline; }
.ql-cx[data-f6] .ql-cx__btn { outline: 2px solid #2E2820; outline-offset: 3px; }
.ql-cx[data-f7] .ql-cx__rule { height: 1px; background: #B8AC99; }
.ql-cx[data-f7] .ql-cx__c0 { display: none; }
.ql-cx[data-f7] .ql-cx__c1 { display: inline; }
.ql-cx__side { display: flex; flex-direction: column; gap: 18px; }
.ql-cx__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; min-height: 44px; border-top: 1px solid var(--ql-rule); font-size: 15px; color: var(--ql-mute); }
.ql-cx__steps li .ql-lb { color: inherit; }
.ql-cx__steps li[data-reached] { color: var(--ql-ink); }
.ql-cx__steps li[data-current] { font-weight: 600; }
.ql-cx__steps li[data-done] .ql-cx__tick::before { content: "✓"; }
.ql-cx__bar { display: flex; gap: 8px; }
.ql-cx__bar .ql-btn:first-child { flex: 1 1 0; }
.ql-cx__bar .ql-btn:last-child { flex: 2 1 0; }
.ql-cx__meter { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ql-ink); padding-top: 14px; }
.ql-cx__note { font-size: 14px; line-height: 1.55; color: var(--ql-ink2); }
.ql-cx__end { min-height: 240px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ql-js .ql-cx:not([data-done]) .ql-cx__end > * { visibility: hidden; }
.ql-cx__big { font: 400 56px/1.08 var(--ql-f-nr); letter-spacing: -.01em; }
.ql-cx__end .ql-ink2 { font-size: 16px; }

/* ---------------------------------------------------------------- SOURCES */
.ql-src { padding-top: 160px; padding-bottom: 80px; }
.ql-src .ql-head { margin-bottom: 28px; }
.ql-src__c { margin-inline-start: calc(var(--lab) + var(--col)); display: flex; flex-direction: column; gap: 20px; }
.ql-src__t { width: 100%; border-collapse: collapse; }
.ql-src__t caption { text-align: left; padding-bottom: 8px; }
/* Documented claims research added after the register: closed by default, one tap away (Fidelity/QA S4). */
.ql-src__more > summary { cursor: pointer; min-height: 24px; padding: 8px 0; border-top: 1px solid var(--ql-rule); text-decoration: underline; text-underline-offset: 3px; }
.ql-src__more[open] > summary { margin-bottom: 8px; }
.ql-src__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ql-src__t :is(td, th) { border-top: 1px solid var(--ql-rule); padding: 11px 20px 11px 0; font-size: 15px; vertical-align: top; text-align: left; font-weight: 400; }
.ql-src__claims td:nth-child(2) { width: 200px; }
.ql-src__claims td:nth-child(3) { width: 170px; padding-right: 0; }
.ql-src__t td .ql-why { margin-inline-start: 0; }
.ql-src__n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--ql-ink); padding-top: 16px; }
.ql-src__n div { display: flex; flex-direction: column; gap: 4px; }
.ql-src__n dt { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink2); }
.ql-src__n dd { font: 500 13px/1.45 var(--ql-f-hk); color: var(--ql-ink); font-variant-numeric: tabular-nums; }
.ql-src__debt ul { margin-top: 8px; }
.ql-src__debt li { font-size: 15px; line-height: 1.6; color: var(--ql-ink2); padding: 4px 0; }
.ql-end { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 12px; }
.ql-end__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ql-end__r { display: flex; gap: 6px; font: 500 12px/1.5 var(--ql-f-hk); color: var(--ql-mute); }
.ql-end__r dt::after { content: ":"; }
.ql-end__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* ==========================================================================
   TABLET (column 640–999): the 834 board. Image-led hero, magnifier with a
   row of distances, side-by-sides that keep 2-up; the error specimen and the
   counterexample become one frame; the ten areas a three-column table.
   ========================================================================== */
@container room (max-width: 999px) {
  .ql-hero__in, .ql-sec { --gut: 32px; --lab: 160px; --col: 32px; --sp: 96px; }
  .ql-hero__in { display: flex; flex-direction: column; min-height: 0; }
  .ql-hero__fig { order: -1; }
  .ql-hero__cap { padding-inline: 32px; }
  .ql-hero__text { padding: 40px 32px 0; gap: 32px; }
  .ql-hero__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; }
  .ql-h1 { font-size: 56px; grid-column: 1; grid-row: 1 / span 2; }
  .ql-hero__tag { grid-column: 2; grid-row: 1; font-size: 22px; }
  .ql-hero__def { grid-column: 2; grid-row: 2; }
  .ql-hero__main > .ql-why { grid-column: 1 / -1; }
  .ql-hero__meta { grid-column: 1 / -1; }
  .ql-thesis { padding-top: 120px; }
  .ql-h2--xl { font-size: 52px; }
  .ql-sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-sig__lists { grid-column: 1 / -1; grid-row: 2; padding: 0 32px 32px; }
  .ql-sig__case { padding: 48px 24px 24px; }
  .ql-carriers__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ql-comp__g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ql-comp__g > .ql-lab { display: none; }
  .ql-lad__row { grid-template-columns: var(--lab) minmax(0, 1fr); }
  .ql-lad__row > .ql-ev { grid-column: 2; padding-top: 6px; }
  .ql-mat { padding-block: 96px; }
  .ql-mag { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ql-mag__ctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ql-mag__b { min-height: 56px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; }
  .ql-mag__m { width: auto; font-size: 18px; }
  .ql-mag__nm span { display: none; }
  .ql-mag__side { gap: 20px; }
  .ql-js .ql-mag__frame { aspect-ratio: 760 / 520; }
  .ql-js .ql-mag__lv.is-in .ex-slot { transform-origin: var(--fx-t) var(--fy-t); }
  .ql-img__g { grid-template-columns: minmax(0, 1fr); }
  .ql-col__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-col__p { min-height: 340px; }
  .ql-ty__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-ty__bar { position: sticky; top: 0; z-index: 3; padding-bottom: 12px; }
  .ql-ty__sh { padding: 40px 32px 8px; }
  .ql-ty__sb, .ql-ty__stage .ql-ty__sb, .ql-ty__stage[style*="--al: left"] .ql-ty__sb { padding: 8px 32px 40px; }
  .ql-ty__stage { --k: .82; }
  .ql-det__view { display: inline-flex; }
  .ql-det__pair { grid-template-columns: minmax(0, 1fr); }
  .ql-det[data-view="sparse"] .ql-det__f--dense, .ql-det[data-view="dense"] .ql-det__f--sparse { display: none; }
  :root:not(.ql-js) .ql-det__f { display: flex !important; }
  .ql-dense__g { grid-template-columns: 120px auto; gap: 12px; padding: 12px; }
  .ql-dense__side { display: flex; }
  .ql-org__g { column-gap: 24px; }
  .ql-fe__top { flex-direction: column; align-items: flex-start; }
  .ql-her__g { column-gap: 24px; }
  .ql-not__l li { font-size: 22px; }
  .ql-ref__l, .ql-dl__f, .ql-src__c { margin-inline-start: 0 !important; }
  .ql-ref__l div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ql-ax { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ql-areas__t .ql-areas__mr { display: none; }
  .ql-areas__md { display: block; margin-top: 10px; }
  .ql-areas__md summary { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1 var(--ql-f-hk); color: var(--ql-ink2); cursor: pointer; }
  .ql-areas__md p { font-size: 13px; line-height: 1.5; color: var(--ql-ink2); }
  .ql-areas__t tbody th { width: 120px; font-size: 19px; }
  .ql-areas__t tbody td:nth-of-type(1) { width: 190px; }
  .ql-val__g { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ql-if__card { padding: 0 24px 32px; }
  .ql-if__g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ql-if__notes { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ql-cx__g { grid-template-columns: minmax(0, 1fr); }
  .ql-cx__stage { padding: 40px 32px; min-height: 0; }
  .ql-cx__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .ql-cx__steps { grid-row: span 3; }
  .ql-cx__bar { align-self: start; }
  .ql-cx__big { font-size: 44px; }
  .ql-src__claims td:nth-child(2) { width: 140px; }
  .ql-src__claims td:nth-child(3) { width: 130px; }
  .ql-note { margin-inline-start: 0 !important; }
  .ql-sec > .ql-why, .ql-head + .ql-why, .ql-why + .ql-why { margin-inline-start: 0; }
  .ql-head, .ql-grid, .ql-band, .ql-lad__row { column-gap: var(--col); }
}

/* ==========================================================================
   PHONE (column < 640): the four 390 boards. Not a stacked desktop: inline
   disclosures, a segmented costume chooser, the magnifier with steppers,
   a crop chooser, one-panel colour worlds, a native-scale error specimen with
   a sparse/dense switch, section-scoped counterexample controls, and the ten
   areas as an accordion. Nothing here scales the error magnitudes.
   ========================================================================== */
@container room (max-width: 639px) {
  .ql-found__l { grid-template-columns: 1fr; }
  .ql-hero__in, .ql-sec { --gut: 16px; --sp: 72px; }
  .ql-head, .ql-grid, .ql-band { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .ql-headc { gap: 12px; }
  .ql-h1 { font-size: 46px; }
  .ql-h2, .ql-mat .ql-h2 { font-size: 30px; line-height: 1.12; }
  .ql-h2--xl { font-size: 40px; }
  .ql-sub, .ql-body { font-size: 15px; }
  .ql-statement { font-size: 22px; }
  .ql-why { padding: 14px; }
  .ql-mk { white-space: normal; }
  .ql-why__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ql-why__dl dd { margin-bottom: 8px; }
  .ql-hero__main { display: flex; flex-direction: column; gap: 14px; }
  .ql-hero__text { padding: 48px 16px 0; }
  .ql-hero__kick { order: -1; }
  .ql-hero__tag { font-size: 21px; }
  .ql-hero__def { font-size: 16px; }
  .ql-hero__meta { gap: 10px; }
  .ql-hero__cap { padding-inline: 16px; }
  .ql-thesis { padding-top: 120px; }
  .ql-absence__c { grid-template-columns: minmax(0, 1fr); }
  .ql-absence__h { font-size: 26px; }
  .ql-absence__pair p { padding-top: 20px; }
  /* Costume: one frame, two independent controls, all four states reachable */
  .ql-costume__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .ql-costume__ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-costume__bar .ql-btn { width: 100%; }
  .ql-costume__pair { grid-template-columns: minmax(0, 1fr); }
  .ql-costume[data-show="a"] .ql-costume__fig--b, .ql-costume[data-show="b"] .ql-costume__fig--a { display: none; }
  :root:not(.ql-js) .ql-costume__fig { display: flex !important; }
  .ql-costume__frame { height: 400px; }
  .ql-cA--on { padding: 24px 16px; gap: 14px; }
  .ql-cA__img { width: 220px; }
  .ql-cA--on .ql-cA__line { font-size: 24px; }
  .ql-cB--on { padding: 20px 16px; }
  .ql-cB--off { padding: 16px; }
  .ql-test { padding-top: 20px; }
  .ql-test__q { font-size: 19px; }
  /* Signals: the cases 2-up, the lists beneath in two columns */
  .ql-sig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: transparent; }
  .ql-sig__case { padding: 0; gap: 8px; align-items: stretch; }
  .ql-sig__case .ex-slot { width: 100%; }
  .ql-sig__case figcaption { align-items: flex-start; text-align: left; }
  .ql-sig__lists { grid-column: 1 / -1; grid-row: 2; padding: 12px 0 0; column-gap: 8px; }
  .ql-sig__lists li { padding: 8px 0; font-size: 13px; }
  /* Branding: the seven carriers as one wrapped line with slashes */
  .ql-carriers { row-gap: 8px; }
  .ql-carriers__l { display: block; border-top: 0; font-size: 15px; line-height: 1.8; }
  .ql-carriers__l li { display: inline; border: 0; padding: 0; }
  .ql-carriers__l li + li::before { content: " / "; color: var(--ql-mute); }
  .ql-tone { padding-top: 32px; }
  .ql-tone__c { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Composition: specimen first, then the questions; the numbers move onto the list */
  .ql-comp__g { display: flex; flex-direction: column; gap: 12px; }
  .ql-comp__fig { order: -1; }
  .ql-comp__card { min-height: 0; padding: 18px; }
  .ql-comp__name { font-size: 24px; margin-top: 24px; }
  .ql-comp__n, .ql-comp__removed { display: none; }
  .ql-comp__qt { font-size: 18px; }
  .ql-comp__q li { padding: 10px 0; }
  /* Ladder: label above text, basis below */
  .ql-lad { padding-bottom: 60px; }
  .ql-lad__row, .ql-lad__row--untiered { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 0; }
  .ql-lad__row > .ql-ev { grid-column: 1; padding: 0; }
  .ql-lad__t, .ql-lad__row--strong .ql-lad__t { font-size: 15px; }
  .ql-lad__row--necessary .ql-lad__t { font-size: 21px; }
  /* Magnifier: full-bleed square frame; four distances with − and + steppers, each ≥ 48px */
  .ql-mat { padding-block: 56px 40px; margin-top: 16px; }
  .ql-mag { margin-top: 20px; gap: 12px; }
  .ql-mag__fig { margin-inline: calc(-1 * var(--gut)); }
  .ql-mag__fc { padding-inline: var(--gut); }
  .ql-mag__ctl { grid-template-columns: 48px repeat(4, minmax(0, 1fr)) 48px; gap: 6px; }
  .ql-mag__step { display: inline-flex; align-items: center; justify-content: center; }
  .ql-mag__b { min-height: 48px; padding: 0; align-items: center; justify-content: center; }
  .ql-mag__m { font-size: 15px; }
  .ql-mag__nm { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ql-mag__tag { left: 12px; top: 12px; }
  .ql-js .ql-mag__frame { aspect-ratio: 1 / 1; }
  .ql-js .ql-mag__lv.is-in .ex-slot { transform-origin: var(--fx-m) var(--fy-m); }
  /* Form: pairs 2-up, captions beneath */
  .ql-form { padding-top: 72px; }
  .ql-form__pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ql-form__two { padding: 8px; }
  /* Imagery: one frame and a three-way crop control */
  .ql-img { padding-top: 72px; }
  .ql-img__over { display: none; }
  .ql-img__chooser { display: flex; }
  :root:not(.ql-js) .ql-img__over { display: block; }
  :root:not(.ql-js) .ql-img__chooser { display: none; }
  .ql-img__n p { font-size: 15px; }
  .ql-stock__g span { height: 80px; font-size: 12px; }
  /* Colour: a four-way ground switch over one panel */
  .ql-col { padding-top: 72px; padding-bottom: 40px; }
  .ql-col__sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
  .ql-col__g { grid-template-columns: minmax(0, 1fr); }
  .ql-js .ql-col__f { display: none; }
  .ql-js .ql-col[data-world="warm"] .ql-col__f[data-w="warm"], .ql-js .ql-col[data-world="dark"] .ql-col__f[data-w="dark"],
  .ql-js .ql-col[data-world="deep"] .ql-col__f[data-w="deep"], .ql-js .ql-col[data-world="light"] .ql-col__f[data-w="light"] { display: flex; }
  .ql-col__p { min-height: 380px; padding: 18px; }
  /* Typography: the setting control sticks while the six inspections scroll */
  .ql-ty { padding-top: 72px; }
  .ql-ty__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .ql-ty__bar .ql-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ql-ty__bar .ql-seg button { padding: 0 6px; font-size: 13px; }
  .ql-ty__g { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ql-ty__stage { --k: .56; }
  .ql-ty__sh { padding: 28px 16px 6px; }
  .ql-ty__sb, .ql-ty__stage .ql-ty__sb, .ql-ty__stage[style*="--al: left"] .ql-ty__sb { padding: 6px 16px 28px; }
  .ql-ty__box { height: 150px; padding: 0 16px; }
  .ql-ty__i { --k: .74; }
  .ql-ty__i:first-child .ql-ty__s { font-size: max(100px, calc(var(--s) * .74)); }
  .ql-ty__close { font-size: 22px; }
  /* Detail: native-size module (326px image), a 2×3 grid of toggles, one frame with a switch */
  .ql-det { padding-top: 96px; padding-bottom: 60px; }
  .ql-det__ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ql-det__errs button { text-align: left; padding: 0 10px; font-size: 13px; }
  .ql-det__long { display: none; }
  .ql-det__short { display: inline; }
  .ql-det__all { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; align-items: center; }
  .ql-det__all .ql-btn { flex: 1 1 0; }
  .ql-det__all .ql-lb { flex-basis: 100%; padding: 4px 0 0; }
  .ql-det__view { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-mod { width: 326px; }
  .ql-sparse { min-height: 0; padding: 16px; overflow-x: auto; justify-content: safe center; }
  .ql-dense { height: auto; max-height: 640px; }
  .ql-mod__h { font-size: 26px; margin-top: 22px; }
  /* Distinctions */
  .ql-org { padding-top: 72px; }
  .ql-org__g { display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--ql-ink); padding-left: 14px; }
  .ql-org__c, .ql-org__c--now { border-top: 0; padding-top: 0; }
  .ql-org__c p { font-size: 15px; }
  .ql-band { padding: 18px 16px; margin-top: 24px; }
  .ql-fe { padding-top: 72px; }
  .ql-fe__seg { display: flex; flex-direction: column; width: 100%; }
  .ql-fe__seg button + button { border-inline-start: 0; border-top: 1px solid var(--ql-ink); }
  .ql-fe__seg button { text-align: left; }
  .ql-fe__fig { margin-inline: 0; }
  .ql-fe__v--ql .ql-fe__over { padding: 16px; }
  .ql-fe__name { font-size: 20px; }
  .ql-fe__time { left: 16px; top: 16px; font-size: 15px; }
  .ql-fe__thrown { right: 16px; bottom: 16px; }
  .ql-fe__two { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ql-fe__two p, .ql-fe__bc { font-size: 15px; }
  .ql-min { padding-top: 72px; }
  .ql-min__sw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
  .ql-min__pair { grid-template-columns: minmax(0, 1fr); }
  .ql-js .ql-min[data-min="austere"] .ql-min__f[data-v="less"], .ql-js .ql-min[data-min="less"] .ql-min__f[data-v="austere"] { display: none; }
  .ql-min__a, .ql-min__b { min-height: 300px; }
  .ql-min__b { padding: 20px; }
  .ql-her { padding-top: 72px; }
  .ql-her__g { display: flex; flex-direction: column; }
  .ql-her__c { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; border-top: 1px solid var(--ql-rule); padding: 12px 0; }
  .ql-her__c > h3 { grid-column: 2; grid-row: 1; }
  .ql-her__c > figure { grid-column: 1; grid-row: 1 / span 4; }
  .ql-her__c > p { grid-column: 2; font-size: 14px; }
  .ql-her__c .ql-her__sw, .ql-her__c .ex-slot { width: 64px; height: 40px; }
  .ql-her__c figure .ql-ev { display: none; }
  .ql-her__sw--h span { font-size: 7px; letter-spacing: .12em; }
  .ql-not { padding-top: 72px; }
  .ql-not__l { grid-template-columns: minmax(0, 1fr); }
  .ql-not__l li { font-size: 21px; line-height: 1.45; }
  .ql-ref { padding-top: 72px; padding-bottom: 60px; }
  .ql-ref__l div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .ql-ref__l dt { font-size: 17px; }
  /* Build: the axes as three disclosures; the ten areas an accordion */
  .ql-build { padding-top: 72px; }
  .ql-ax { margin-bottom: 32px; row-gap: 0; }
  .ql-ax__c { padding-top: 0; }
  .ql-ax__c summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0; cursor: pointer; }
  .ql-ax__c summary::after { content: "+"; font-size: 18px; }
  .ql-ax__c[open] summary::after { content: "−"; }
  .ql-ax__c dl div { grid-template-columns: 120px minmax(0, 1fr); }
  .ql-areas__t { display: none; }
  .ql-areas__acc { display: block; }
  .ql-areas__acc li { border-top: 1px solid var(--ql-rule); }
  .ql-areas__acc h3 { font: inherit; }
  .ql-areas__acc button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0; border: 0; background: transparent; text-align: left; }
  .ql-areas__n { font: 400 19px/1.2 var(--ql-f-nr); }
  .ql-areas__p { font-size: 12px; font-weight: 600; }
  .ql-areas__body { padding: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
  .ql-js .ql-areas__body[data-closed] { display: none; }
  .ql-areas__miss { font-size: 13px; color: var(--ql-ink2); }
  .ql-val { padding-top: 72px; }
  .ql-val__ty--display { font-size: 40px; }
  .ql-val__ty--section { font-size: 30px; }
  .ql-val__tys li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .ql-val__sws li { font-size: 14px; }
  .ql-if { padding-top: 72px; }
  .ql-if__card { padding: 0 16px 24px; gap: 20px; }
  .ql-if__nav { gap: 18px; overflow-x: auto; }
  .ql-if__ctl { flex-wrap: wrap; gap: 6px; }
  .ql-if__thumbs { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .ql-if__th { flex: 0 1 64px; min-width: 40px; }
  .ql-if__pg { gap: 2px; }
  .ql-if__pg .ql-lb { padding: 0 2px; }
  .ql-if__pg .ql-lb { padding: 0 4px; }
  .ql-if__h { font-size: 30px; }
  .ql-if__notify > div { flex-direction: column; }
  .ql-mo { padding-top: 72px; }
  .ql-mo__pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ql-mo__box { height: 120px; }
  .ql-mo__vals dl div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ql-a11y { padding-top: 72px; }
  .ql-a11y__pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ql-a11y__c { padding: 20px; }
  .ql-dl { padding-top: 72px; padding-bottom: 60px; }
  .ql-dl__l div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  /* Counterexample: re-set for 390, not scaled; step list becomes a status line; Back/Refine stick only while the section is on screen */
  .ql-cx { padding-top: 72px; }
  .ql-cx__status { display: block; margin-bottom: 10px; }
  .ql-cx__g { display: flex; flex-direction: column; gap: 10px; }
  .ql-cx__side { display: contents; }
  .ql-cx__steps, .ql-cx__meter { display: none; }
  .ql-cx__stage { padding: 24px 16px 32px; }
  .ql-cx__img { width: 100%; }
  .ql-cx__cap, .ql-cx__row { width: 100%; }
  .ql-cx__h { font-size: 32px; }
  .ql-cx[data-f3] .ql-cx__h { font-size: 36px; }
  .ql-cx[data-f3] :is(.ql-cx__b, .ql-cx__price) { font-size: 17px; }
  .ql-cx__bar { align-self: stretch; position: sticky; bottom: 56px; z-index: 4; order: 5; margin-inline: calc(-1 * var(--gut)); padding: 12px var(--gut); background: var(--ql-ground); border-top: 1px solid var(--ql-ink); }
  .ql-cx__bar .ql-btn:first-child { flex: 0 0 48px; font-size: 0 !important; }
  .ql-cx__bar .ql-btn:first-child::before { content: "←"; font-size: 16px; }
  .ql-cx__note { order: 4; }
  .ql-cx__end { min-height: 0; padding-block: 24px; }
  .ql-cx__big { font-size: 34px; }
  /* Sources: claim rows stack; the research debt never collapses */
  .ql-src { padding-top: 72px; }
  .ql-src__t, .ql-src__t tbody, .ql-src__t tr, .ql-src__t td, .ql-src__t caption { display: block; width: auto !important; }
  .ql-src__t tr { border-top: 1px solid var(--ql-rule); padding: 10px 0; }
  .ql-src__t td { border: 0; padding: 2px 0; font-size: 14px; }
  .ql-src__n { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-end { padding-bottom: 64px; }
}

/* Reduced motion: every change is instant; the magnifier swaps frames. */
@media (prefers-reduced-motion: reduce) {
  .ql-page main *, .ql-page main *::before, .ql-page main *::after { transition-duration: 0s !important; animation: none !important; }
}