/* Quantum contextuality: the page for one paradox of quantum mechanics. The institute's screen style: warm paper and ink, Inter
   at two sizes, small mono labels. Colour: in the drawings and matrices cyan is +1 and magenta −1; green marks a line met and the
   acts' 6; ink is a measured value. */
body.cx-body[data-rpi-page="paper-page"] {
  --cx-paper: #faf8f3; --cx-ink: #1d1d1b; --cx-body: #2a2926; --cx-soft: #3c3a36; --cx-hair: #8a8a8a;
  --cx-cyan: #009fe3; --cx-magenta: #e6007e; --cx-cyan-text: #0072b5; --cx-magenta-text: #c4006b;
  --cx-proved: #0b7a3e; --cx-open: #c8401f;
  --cx-rule: color-mix(in srgb, var(--cx-ink) 16%, var(--cx-paper));
  --cx-tint: color-mix(in srgb, var(--cx-ink) 4%, var(--cx-paper));
  --cx-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cx-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cx-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--cx-paper); color: var(--cx-body);
}
@media screen and (prefers-color-scheme: dark) {
  body.cx-body[data-rpi-page="paper-page"] {
    --cx-paper: #141413; --cx-ink: #faf8f3; --cx-body: #e9e6df; --cx-soft: #c9c5bc;
    --cx-cyan: #2bb3f0; --cx-magenta: #ff3d9e; --cx-cyan-text: #2bb3f0; --cx-magenta-text: #ff5aae;
    --cx-proved: #3fb871; --cx-open: #ff6a3d;
  }
}

.cx-page { width: min(calc(100% - 4rem), 75rem); margin: 0 auto; padding: 0 0 5rem;
  font-family: var(--cx-text); font-weight: 420; line-height: 1.42; font-optical-sizing: auto; }
.cx-page a { color: var(--cx-ink); text-decoration-color: var(--cx-cyan); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.cx-page a:hover { color: var(--cx-cyan-text); }
.cx-page i { font-style: italic; }
.cx-page sub, .cx-page sup { font-size: .72em; line-height: 0; }
.cx-page b { color: var(--cx-ink); font-weight: 650; }
.cx-label { margin: 0 0 1rem; font: 700 .75rem/1.3 var(--cx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cx-soft); }
.cx-nw { white-space: nowrap; }
.cx-page :focus-visible { outline: 3px solid var(--cx-cyan-text); outline-offset: 3px; }
.cx-skip { position: absolute; left: -9999px; top: 0; }
.cx-skip:focus { left: 1rem; top: 1rem; z-index: 50; padding: .5rem .8rem; background: var(--cx-paper); color: var(--cx-ink); outline: 3px solid var(--cx-cyan-text); }
html:has(> body.cx-body[data-rpi-page="paper-page"]) { scroll-padding-top: 6rem; }
.cx-acts-c { color: var(--cx-magenta-text); font-weight: 650; }
.cx-table-c { color: var(--cx-cyan-text); font-weight: 650; }
.cx-ref { font-size: .86em; color: var(--cx-soft); }

/* Opening: the name, the one sentence, the one number, and the picture */
.cx-opening { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.cx-opening > .cx-label { margin-bottom: .6rem; }
.cx-opening-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31.25rem);
  grid-template-areas: "text hero"; gap: 1.4rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cx-opening-text { grid-area: text; }
.cx-hero { grid-area: hero; margin: 0; align-self: center; }
body.cx-body .cx-opening h1 { margin: 0 0 .9rem; font-family: var(--cx-display); font-weight: 820;
  font-size: clamp(2.6rem, 5.2vw, 4.7rem); line-height: .94; letter-spacing: -.042em; color: var(--cx-ink); text-wrap: balance;
  text-shadow: 0 0 .5px color-mix(in srgb, var(--cx-ink) 55%, transparent); }
.cx-lede { margin: 0; font-size: clamp(1.1rem, 1.45vw, 1.3rem); font-weight: 450; line-height: 1.32;
  letter-spacing: -.008em; color: var(--cx-ink); }
.cx-status { margin: .8rem 0 0; font-size: .9rem; line-height: 1.42; color: var(--cx-soft); }


/* The squares, drawn */
.cx-square { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; overflow: visible; color: var(--cx-ink); font-family: var(--cx-text); }
.cx-square .cell { fill: none; stroke: var(--cx-ink); stroke-width: 1.5; }
.cx-square .act { font: 500 13px/1 var(--cx-mono); fill: var(--cx-soft); }
.cx-square .act-big { font: 600 25px/1 var(--cx-text); fill: var(--cx-ink); letter-spacing: -.01em; }
.cx-square .sign { font: 800 46px/1 var(--cx-display); fill: var(--cx-ink); }
.cx-square .link { stroke: var(--cx-hair); stroke-width: 1; }
.cx-square .lit { fill: var(--cx-cyan-text); stroke: var(--cx-cyan-text); stroke-width: 2; }
.cx-square .lit-t { font: 700 17px/1 var(--cx-mono); fill: var(--cx-paper); }
.cx-square .dark { fill: var(--cx-paper); stroke: var(--cx-soft); stroke-width: 2; stroke-dasharray: 4 4; }
.cx-square .dark-t { font: 700 17px/1 var(--cx-mono); fill: var(--cx-soft); }
.cx-square .need { font: 700 13px/1 var(--cx-mono); letter-spacing: .06em; fill: var(--cx-magenta-text); }
.cx-square .tally { font: 700 12px/1.2 var(--cx-mono); letter-spacing: .12em; fill: var(--cx-soft); }
.cx-square .p-plus { fill: var(--cx-paper); stroke: var(--cx-ink); stroke-width: 2; }
.cx-square .p-plus-t { font: 700 17px/1 var(--cx-mono); fill: var(--cx-ink); }
.cx-square .p-minus { fill: var(--cx-magenta-text); stroke: var(--cx-magenta-text); stroke-width: 2; }
.cx-square .p-minus-t { font: 700 17px/1 var(--cx-mono); fill: var(--cx-paper); }
.cx-hero figcaption, .cx-still figcaption { max-width: 34rem; margin: .7rem auto 0; font-size: .88rem; line-height: 1.4; color: var(--cx-soft); }
.cx-still { margin: 1.4rem 0 1.4rem; max-width: 38rem; }
.cx-still figcaption { margin-left: 0; }

/* Live figures: the page writes each heading and a note on how to use it */
.cx-noscript-note { margin: 1rem 0 0; padding: .6rem .8rem; border: 1px solid var(--cx-rule); font-size: .9rem; color: var(--cx-soft); }
.cx-noscript-num { margin: .8rem 0 0; font-size: .95rem; color: var(--cx-body); }
.cx-hero figcaption { max-width: none; margin: .7rem 0 0; }
.cx-fignum { display: block; margin-bottom: .35rem; font: 700 .72rem/1.3 var(--cx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cx-soft); }
.cx-inline-fig { max-width: 38rem; margin: 1.6rem 0 1.8rem; }
body.cx-body .cx-inline-fig h3, body.cx-body .cx-figure-head h3 { margin: 0; text-wrap: balance; font-family: var(--cx-display); font-weight: 780;
  font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -.018em; color: var(--cx-ink); }
.cx-figure-note { max-width: 46rem; margin: .55rem 0 1rem; font-size: .95rem; line-height: 1.42; color: var(--cx-soft); }
.cx-figure { margin: 0; padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--cx-rule); }
.cx-figure-head { max-width: 46rem; }

/* The paradox in three lines */
.cx-three { margin: 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--cx-rule); }
body.cx-body .cx-three h2 { margin: 0 0 1.1rem; font-family: var(--cx-display); font-weight: 780; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--cx-ink); }
.cx-three ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); }
.cx-three li { margin: 0; padding: .9rem 0 0; border-top: 3px solid var(--cx-ink); }
.cx-three li:nth-child(2) { border-top-color: var(--cx-magenta); }
.cx-three li p { margin: 0 0 .7rem; font-size: 1.04rem; line-height: 1.42; }
.cx-three li p:last-child { margin-bottom: 0; }
.cx-three li .cx-label { margin-bottom: .55rem; font-size: .78rem; color: var(--cx-ink); }
.cx-toc { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.6rem 0 0; padding: 0; }
.cx-toc a { font: 700 .72rem/1.3 var(--cx-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important;
  color: var(--cx-ink); border-bottom: 2px solid var(--cx-cyan); padding-bottom: .15rem; }
.cx-toc a span { color: var(--cx-soft); margin-right: .45em; }

/* Text sections: heading left, copy right */
.cx-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; border-bottom: 1px solid var(--cx-rule); }
.cx-head { align-self: start; }
body.cx-body .cx-section h2 { margin: 0; max-width: 17ch; text-wrap: balance; font-family: var(--cx-display); font-weight: 780;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--cx-ink); }
.cx-copy > p, .cx-copy > ul, .cx-copy > ol { max-width: 38rem; margin: 0 0 1rem; font-size: 1.1rem; }
.cx-copy > p:last-child { margin-bottom: 0; }
.cx-copy h3 { max-width: 38rem; margin: 1.8rem 0 .6rem; font-family: var(--cx-display); font-weight: 760; font-size: 1.3rem; line-height: 1.15;
  letter-spacing: -.014em; color: var(--cx-ink); }
.cx-eq { max-width: 38rem; margin: 1.2rem 0 1.3rem !important; padding: .1rem 0 .15rem 1.1rem; border-left: 3px solid var(--cx-magenta);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem) !important; font-weight: 460; line-height: 1.5; color: var(--cx-ink);
  font-variant-numeric: lining-nums; overflow-x: auto; overflow-y: hidden; }
.cx-eq--table { border-left-color: var(--cx-cyan); }
.cx-eq span { white-space: nowrap; }
.cx-eq small { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; color: var(--cx-soft); white-space: normal; }
.cx-math { max-width: 38rem; margin: 1.2rem 0 0; border-top: 1px solid var(--cx-rule); border-bottom: 1px solid var(--cx-rule); }
.cx-math summary { cursor: pointer; padding: .7rem 0; font: 700 .74rem/1.3 var(--cx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cx-ink); }
.cx-math > p, .cx-math > ul { margin: 0 0 .9rem; font-size: 1rem; }
.cx-math > ul { padding-left: 1.2rem; }
.cx-math li { margin-bottom: .35rem; }
.cx-rests { padding-left: 1.2rem; }
.cx-rests li { margin-bottom: .55rem; }

/* What it means */
.cx-meaning { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 2px solid var(--cx-ink); border-bottom: 1px solid var(--cx-rule); }
.cx-meaning-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
body.cx-body .cx-meaning h2 { margin: 0; max-width: 17ch; text-wrap: balance; font-family: var(--cx-display); font-weight: 780;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; color: var(--cx-ink); }
.cx-meaning-head p { max-width: 38rem; margin: 0 0 1rem; font-size: 1.1rem; }
.cx-meaning-head p:last-child { margin-bottom: 0; }
.cx-meaning-head p.cx-label { margin: 0 0 1rem; font-size: .75rem; }
.cx-truths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); }
.cx-truth { padding: .9rem 0 0; border-top: 3px solid var(--cx-ink); }
.cx-truth .cx-truth-num { margin: 0 0 .5rem; font: 700 .74rem/1.3 var(--cx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cx-soft); }
.cx-tag { display: inline-block; margin-left: .5rem; padding: .05rem .4rem; border: 1.5px solid var(--cx-proved); color: var(--cx-proved); letter-spacing: .08em; }
.cx-tag--owed { border-color: var(--cx-open); color: var(--cx-open); border-style: dashed; }
body.cx-body .cx-truth h3 { margin: 0 0 .6rem; font-family: var(--cx-display); font-weight: 760; font-size: 1.28rem; line-height: 1.12; letter-spacing: -.014em; color: var(--cx-ink); }
.cx-truth p { margin: 0 0 .7rem; font-size: 1.02rem; }
.cx-truth p:last-child { margin-bottom: 0; }

/* Hard questions and the limits */
.cx-qa { max-width: 38rem; margin: 0; }
.cx-qa dt { margin: 0 0 .35rem; font-family: var(--cx-display); font-weight: 760; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; color: var(--cx-ink); }
.cx-qa dd { margin: 0 0 1.4rem; font-size: 1.06rem; }
.cx-not { max-width: 38rem; margin: 0; padding-left: 1.2rem; }
.cx-not li { margin-bottom: .45rem; font-size: 1.02rem; }

/* Read it */
.cx-paper { max-width: 38rem; margin: 0 0 1.5rem; padding: 1rem 0 1rem 1.1rem; border-left: 3px solid var(--cx-ink); }
.cx-paper p { margin: 0 0 .4rem; }
.cx-paper-title { font-family: var(--cx-display); font-weight: 760; font-size: 1.2rem; line-height: 1.2; color: var(--cx-ink); }
.cx-paper-title cite { font-style: normal; }
.cx-vor { color: var(--cx-soft); font-size: .95rem; }
.cx-sources { max-width: 38rem; margin: 0; padding-left: 1.2rem; font-size: .92rem; line-height: 1.45; color: var(--cx-body); }
.cx-sources li { margin-bottom: .45rem; overflow-wrap: anywhere; }

/* The other eleven */
.cx-set { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.cx-set ol { margin: 0; padding: 0 0 0 1.6rem; columns: 3; column-gap: 2.5rem; font-size: .98rem; }
.cx-set li { margin: 0 0 .4rem; break-inside: avoid; }
.cx-set li > span { color: var(--cx-soft); }
.cx-set li[aria-current] > span:first-child { color: var(--cx-ink); font-weight: 650; }
.cx-set-here { margin-left: .4rem; font: 700 .66rem/1 var(--cx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cx-magenta-text) !important; }

/* Phone and narrow screens */
@media (max-width: 860px) {
  .cx-page { width: min(calc(100% - 2rem), 75rem); }
  .cx-opening-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "hero"; gap: 1rem; }
  .cx-hero .cx-square { max-width: 19.5rem; margin: 0; }
  .cx-hero figcaption { margin-left: 0; }
  .cx-status { font-size: .84rem; margin-top: .6rem; }
  .cx-three ol, .cx-truths { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .cx-section, .cx-meaning-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  body.cx-body .cx-section h2, body.cx-body .cx-meaning h2 { max-width: none; }
  .cx-set ol { columns: 1; }
  .cx-copy > p, .cx-copy > ul, .cx-copy > ol, .cx-meaning-head p { font-size: 1.04rem; }
}

@media (forced-colors: active) {
  .cx-square .lit { fill: Highlight; stroke: Highlight; }
  .cx-square .lit-t, .cx-square .p-minus-t { fill: HighlightText; }
  .cx-square .p-minus { fill: Highlight; stroke: Highlight; }
}

@media print {
  body.cx-body[data-rpi-page="paper-page"] { --cx-paper: #fff; --cx-ink: #000; --cx-body: #111; --cx-soft: #333; background: #fff; }
  .cx-page { width: 100%; }
  .cx-toc, .cx-skip { display: none; }
  .cx-opening-grid, .cx-section, .cx-meaning-head { display: block; }
  .cx-three ol, .cx-truths { display: block; }
  .cx-three li, .cx-truth { margin-bottom: 1rem; }
  .cx-hero, .cx-still, .cx-three li, .cx-truth { break-inside: avoid; }
  .cx-head { break-inside: avoid; }
  .cx-figure-head, .cx-inline-fig > h3, .cx-inline-fig > .cx-figure-note { break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .cx-label, .cx-head, .cx-page h2, .cx-page h3, .cx-qa dt, .cx-meaning-head > div:first-child, .cx-set > .cx-label { break-after: avoid; page-break-after: avoid; }
  .cx-hero, .cx-still, .cx-square * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}