/* Tsirelson's bound: 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 carries one meaning everywhere on the page: cyan is an act that only reads and the
   ceiling 2; magenta is one state with acts that commute and squared weights, and the ceiling 2√2; grey is the ceiling 4 of a
   table that only forbids signals; ink is a measured value. */
body.tb-body[data-rpi-page] {
  --tb-paper: #faf8f3; --tb-ink: #1d1d1b; --tb-body: #2a2926; --tb-soft: #3c3a36; --tb-hair: #8a8a8a;
  --tb-cyan: #009fe3; --tb-magenta: #e6007e; --tb-cyan-text: #0072b5; --tb-magenta-text: #c4006b;
  --tb-rule: color-mix(in srgb, var(--tb-ink) 16%, var(--tb-paper));
  --tb-tint: color-mix(in srgb, var(--tb-ink) 4%, var(--tb-paper));
  --tb-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tb-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--tb-paper); color: var(--tb-body);
}
@media screen and (prefers-color-scheme: dark) {
  body.tb-body[data-rpi-page] {
    --tb-paper: #141413; --tb-ink: #faf8f3; --tb-body: #e9e6df; --tb-soft: #c9c5bc;
    --tb-cyan: #2bb3f0; --tb-magenta: #ff3d9e; --tb-cyan-text: #2bb3f0; --tb-magenta-text: #ff5aae;
  }
}

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

/* Opening: the name, the one sentence, the one number, and the picture */
.tb-opening { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.25rem, 2.5vw, 2rem); }
.tb-opening > .tb-label { margin-bottom: .6rem; }
.tb-opening-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
body.tb-body .tb-opening h1 { margin: 0 0 .9rem; font-family: var(--tb-display); font-weight: 820;
  font-size: clamp(2.6rem, 5.6vw, 5.1rem); line-height: .94; letter-spacing: -.042em; color: var(--tb-ink); text-wrap: balance;
  text-shadow: 0 0 .5px color-mix(in srgb, var(--tb-ink) 55%, transparent); }
.tb-lede { max-width: 48rem; margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.32rem); font-weight: 450; line-height: 1.32;
  letter-spacing: -.008em; color: var(--tb-ink); }
.tb-status { max-width: 48rem; margin: .75rem 0 0; padding-left: .8rem; border-left: 3px solid var(--tb-magenta);
  font-size: .92rem; line-height: 1.42; color: var(--tb-soft); }
.tb-number { margin: 0; padding: .9rem 0 0; border-top: 3px solid var(--tb-magenta); }
.tb-number .tb-label { margin-bottom: .45rem; }
.tb-num { margin: 0; font-family: var(--tb-display); font-weight: 860; font-size: clamp(2.4rem, 3.7vw, 3.5rem); white-space: nowrap; line-height: .86;
  letter-spacing: -.05em; color: var(--tb-magenta-text); font-variant-numeric: tabular-nums lining-nums; }
.tb-num output { font: inherit; color: inherit; }
.tb-num-cap { margin: .6rem 0 0; font-size: .95rem; line-height: 1.38; color: var(--tb-body); }
.tb-num-cap b { font-variant-numeric: tabular-nums; }

.tb-hero { grid-column: 1 / -1; margin: clamp(.2rem, 1vw, .6rem) 0 0; min-width: 0; }
.tb-hero figcaption { max-width: 52rem; margin-top: .6rem; font-size: .9rem; line-height: 1.4; color: var(--tb-soft); }
.tb-still-wrap { padding: clamp(.9rem, 1.8vw, 1.3rem); border: 1px solid var(--tb-ink); }
.tb-still-cap { max-width: 52rem; margin: .7rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--tb-soft); }
.tb-hero-slot:empty, .tb-fig-slot:empty { display: none; }

/* The still figure: the square and the three ceilings, drawn to scale */
.tb-still { display: block; width: 100%; height: auto; overflow: visible; color: var(--tb-ink); font-family: var(--tb-text); }
.tb-still--phone { display: none; }
.tb-still .band-read { fill: var(--tb-cyan); opacity: .10; }
.tb-still .band-write { fill: var(--tb-magenta); opacity: .12; }
.tb-still .band-ns { fill: url(#tb-hatch); }
.tb-still .band-ns-p { fill: url(#tb-hatch-p); }
.tb-still .hatch { stroke: var(--tb-hair); stroke-width: 1; opacity: .5; }
.tb-still .axis { stroke: var(--tb-ink); stroke-width: 1.5; }
.tb-still .tick { stroke: var(--tb-ink); stroke-width: 1; }
.tb-still .tick-l { font: 500 12.5px/1 var(--tb-mono); fill: var(--tb-soft); }
.tb-still .c-read { stroke: var(--tb-cyan); stroke-width: 3.5; }
.tb-still .c-write { stroke: var(--tb-magenta); stroke-width: 3.5; }
.tb-still .c-ns { stroke: var(--tb-hair); stroke-width: 2.5; stroke-dasharray: 6 5; }
.tb-still .big { font-family: var(--tb-display); font-weight: 860; letter-spacing: -.04em; }
.tb-still .big-read { fill: var(--tb-cyan-text); }
.tb-still .big-write { fill: var(--tb-magenta-text); }
.tb-still .big-ns { fill: var(--tb-soft); }
.tb-still .lab { font: 700 12px/1 var(--tb-mono); letter-spacing: .12em; fill: var(--tb-soft); }
.tb-still .lab-write { fill: var(--tb-magenta-text); }
.tb-still .pt { fill: var(--tb-ink); stroke: var(--tb-ink); stroke-width: 1.5; }
.tb-still .err { stroke: var(--tb-ink); stroke-width: 2; }
.tb-still .lead { stroke: var(--tb-hair); stroke-width: 1; stroke-dasharray: 2 3; }
.tb-still .mag { fill: var(--tb-paper); stroke: var(--tb-ink); stroke-width: 1; }
.tb-still .mag-src { fill: none; stroke: var(--tb-ink); stroke-width: 1; }
.tb-still .gap { fill: none; stroke: var(--tb-ink); stroke-width: 1.2; }
.tb-still .m-l { font: 500 13.5px/1 var(--tb-text); fill: var(--tb-ink); }
.tb-still .m-l tspan.m-v, .tb-still text.m-v { font-family: var(--tb-mono); font-weight: 500; font-size: 12.5px; }
.tb-still text.m-v.lab-write { fill: var(--tb-magenta-text); font-weight: 700; }
.tb-still .m-s { font: 450 12px/1 var(--tb-text); fill: var(--tb-soft); }
.tb-still .side { fill: none; stroke: var(--tb-hair); stroke-width: 1.2; stroke-dasharray: 4 4; }
.tb-still .arr { stroke: var(--tb-ink); stroke-width: 2.5; }
.tb-still .arrhead { fill: var(--tb-ink); }
.tb-still .diag { stroke: var(--tb-magenta); stroke-width: 3; }
.tb-still .diaghead { fill: var(--tb-magenta); }
.tb-still .rt { fill: none; stroke: var(--tb-ink); stroke-width: 1.2; }
.tb-still .d-l { font: 650 13px/1 var(--tb-text); fill: var(--tb-magenta-text); }
.tb-still .eq { font-family: var(--tb-display); font-weight: 820; font-size: 26px; letter-spacing: -.03em; fill: var(--tb-magenta-text); }

/* The paradox in three lines */
.tb-three { margin: 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--tb-rule); }
body.tb-body .tb-three h2 { margin: 0 0 1.1rem; font-family: var(--tb-display); font-weight: 780; font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.05; letter-spacing: -.02em; color: var(--tb-ink); }
.tb-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); }
.tb-three li { margin: 0; padding: .9rem 0 0; border-top: 3px solid var(--tb-ink); }
.tb-three li:nth-child(2) { border-top-color: var(--tb-magenta); }
.tb-three li p { margin: 0 0 .7rem; font-size: 1.04rem; line-height: 1.42; }
.tb-three li p:last-child { margin-bottom: 0; }
.tb-three li .tb-label { margin-bottom: .55rem; font-size: .78rem; color: var(--tb-ink); }

/* Contents */
.tb-toc { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--tb-rule); }
.tb-toc a { font: 700 .74rem/1.3 var(--tb-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--tb-ink); padding: .35rem 0; }
.tb-toc a span { color: var(--tb-soft); margin-right: .55rem; }
.tb-toc a:hover { color: var(--tb-cyan-text); }

/* Sections */
.tb-section { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.tb-head { max-width: 52rem; margin-bottom: 1.2rem; }
.tb-head .tb-label { margin-bottom: .5rem; }
body.tb-body .tb-section h2 { margin: 0; font-family: var(--tb-display); font-weight: 820; font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1; letter-spacing: -.035em; color: var(--tb-ink); text-wrap: balance; }
body.tb-body .tb-section h3 { margin: 2.2rem 0 .8rem; max-width: 52rem; font-family: var(--tb-display); font-weight: 780;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.1; letter-spacing: -.02em; color: var(--tb-ink); }
.tb-copy { max-width: 46rem; }
.tb-copy p { margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.5; }
.tb-fig { margin: 1.6rem 0 1.8rem; min-width: 0; }
.tb-fig figcaption { max-width: 52rem; margin-top: .6rem; font-size: .9rem; line-height: 1.4; color: var(--tb-soft); }

/* The history */
.tb-timeline { list-style: none; margin: 0; padding: 0; max-width: 54rem; }
.tb-timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.2rem; padding: .9rem 0; border-top: 1px solid var(--tb-rule); }
.tb-timeline li:last-child { border-bottom: 1px solid var(--tb-rule); }
.tb-timeline p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.tb-timeline .tb-year { font-family: var(--tb-display); font-weight: 820; font-size: 1.6rem; line-height: 1; letter-spacing: -.03em; color: var(--tb-ink); padding-top: .1rem; }

/* What it means */
.tb-meaning .tb-copy p:first-child { font-size: 1.16rem; color: var(--tb-ink); }

/* Hard questions and what is not claimed */
.tb-qa { margin: 0; max-width: 52rem; }
.tb-qa div { padding: 1rem 0; border-top: 1px solid var(--tb-rule); }
.tb-qa dt { font-family: var(--tb-display); font-weight: 780; font-size: 1.15rem; letter-spacing: -.015em; color: var(--tb-ink); margin-bottom: .35rem; }
.tb-qa dd { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.tb-not { max-width: 52rem; margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--tb-rule); }
body.tb-body .tb-not h3 { margin: 0 0 .5rem; font: 700 .75rem/1.3 var(--tb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tb-soft); }
.tb-not ul { margin: 0; padding-left: 1.1rem; }
.tb-not li { margin: .3rem 0; font-size: 1rem; }
.tb-not p { margin: 0; font-size: 1rem; max-width: 46rem; }

/* Read it */
.tb-paper { padding: 1rem 0 1.2rem; border-top: 3px solid var(--tb-ink); border-bottom: 1px solid var(--tb-rule); margin-bottom: 1rem; }
.tb-paper p { margin: 0 0 .35rem; font-size: 1rem; }
.tb-paper-title { font-family: var(--tb-display); font-weight: 780; font-size: 1.3rem !important; line-height: 1.15; letter-spacing: -.02em; color: var(--tb-ink); }
.tb-paper-title cite { font-style: normal; }
.tb-vor { color: var(--tb-soft); font-size: .95rem !important; }
.tb-sources { margin: 0; padding-left: 1.1rem; }
.tb-sources li { margin: .35rem 0; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }

/* The set */
.tb-set { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1rem; border-top: 3px solid var(--tb-ink); }
.tb-set .tb-label a { color: var(--tb-ink); text-decoration: underline; text-decoration-color: var(--tb-cyan); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.tb-set ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.5vw, 2rem); counter-reset: set; }
.tb-set li { counter-increment: set; margin: 0; padding: .6rem 0 .7rem; border-top: 1px solid var(--tb-rule); font-size: .98rem; line-height: 1.3; color: var(--tb-soft); }
.tb-set li::before { content: counter(set, decimal-leading-zero); display: block; margin-bottom: .25rem; font: 700 .7rem/1 var(--tb-mono); letter-spacing: .12em; color: var(--tb-soft); }
.tb-set li a { color: var(--tb-ink); font-weight: 560; }
.tb-set li[aria-current="page"] { border-top: 3px solid var(--tb-magenta); color: var(--tb-ink); font-weight: 650; }
.tb-set-here { display: block; margin-top: .2rem; font: 700 .68rem/1 var(--tb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-magenta-text); }

/* Narrow screens */
@media (max-width: 60em) {
  .tb-opening-grid { grid-template-columns: minmax(0, 1fr); }
  .tb-opening-text { order: 1; }
  .tb-hero { order: 2; }
  .tb-number { order: 3; }
  .tb-three ol { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .tb-set ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40em) {
  .tb-page { width: calc(100% - 2rem); }
  .tb-still--desk { display: none; }
  .tb-still--phone { display: block; }
  .tb-still-wrap { padding: .7rem; }
  .tb-status { font-size: .84rem; line-height: 1.38; }
  .tb-lede { font-size: 1.06rem; }
  .tb-number { padding-top: .7rem; }
  .tb-number .tb-label { margin-bottom: .3rem; }
  .tb-num { font-size: 2.6rem; }
  .tb-num-cap { margin-top: .4rem; font-size: .86rem; line-height: 1.34; }
  .tb-timeline li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* Forced colours and print */
@media (forced-colors: active) {
  .tb-still .band-read, .tb-still .band-write, .tb-still .mag-src, .tb-still .gap, .tb-still .side, .tb-still .rt { fill: none !important; }
  .tb-still .mag { fill: Canvas !important; stroke: CanvasText !important; }
  .tb-still line, .tb-still .gap, .tb-still .side, .tb-still .rt, .tb-still .mag-src, .tb-still .hatch { stroke: CanvasText !important; }
  .tb-still .diaghead, .tb-still .arrhead, .tb-still .pt { fill: CanvasText !important; stroke: CanvasText !important; }
  .tb-still text, .tb-still tspan { fill: CanvasText !important; }
  .tb-still .c-write, .tb-still .diag { stroke-width: 4.5; }
}
@media (prefers-reduced-motion: reduce) { .tb-page * { scroll-behavior: auto; } }
@media print {
  body.tb-body[data-rpi-page] { --tb-paper: #ffffff; background: #fff; }
  .tb-toc { display: none; }
  .tb-opening-text, .tb-number, .tb-hero { order: 0; }
  .tb-qa div, .tb-timeline li, .tb-three li, .tb-not, .tb-paper, .tb-number { break-inside: avoid; }
  .tb-qa dt { break-after: avoid; }
  .tb-head { break-inside: avoid; }
  .tb-head .tb-label { break-after: avoid; }
  .tb-section h2, .tb-section h3, .tb-head, .tb-three h2 { break-after: avoid; }
  .tb-set { break-inside: avoid; }
  .tb-still--desk { display: none; }
  .tb-still--phone { display: block; max-width: 27rem; }
}