/* The square. Every class is prefixed cx1-. The figure takes the page's tokens (--cx-paper, --cx-ink, --cx-ok, ...)
   when the page defines them, and the design stack's values when it does not.
   Paper: "The Five Postulates of Quantum Mechanics on the Record: Theorems, Premises, and What Is Owed" (preprint, posted 14 November 2026, not peer reviewed). */
.cx1 {
  --f-paper: var(--cx-paper, #faf8f3); --f-ink: var(--cx-ink, #1d1d1b); --f-body: var(--cx-body, #2a2926);
  --f-soft: var(--cx-soft, #3c3a36); --f-hair: var(--cx-hair, #8a8a8a);
  --f-rule: color-mix(in srgb, var(--f-ink) 16%, var(--f-paper));
  --f-faint: color-mix(in srgb, var(--f-ink) 7%, var(--f-paper));
  --f-ok: var(--cx-ok, #0b7a3e); --f-on-ok: var(--cx-on-ok, #faf8f3); --f-no: var(--cx-no, #c8401f);
  --f-c: var(--cx-cyan, #009fe3); --f-c-text: var(--cx-cyan-text, #0072b5);
  --f-text: var(--cx-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --f-display: var(--cx-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --f-mono: var(--cx-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0; color: var(--f-body); font-family: var(--f-text); font-weight: 420; line-height: 1.42; font-optical-sizing: auto;
  box-sizing: border-box; position: relative; container: cx1 / inline-size;
}
@media screen and (prefers-color-scheme: dark) {
  .cx1 { --f-paper: var(--cx-paper, #141413); --f-ink: var(--cx-ink, #faf8f3); --f-body: var(--cx-body, #e9e6df);
    --f-soft: var(--cx-soft, #c9c5bc); --f-ok: var(--cx-ok, #45c27a); --f-on-ok: var(--cx-on-ok, #141413); --f-no: var(--cx-no, #ff6a3d);
    --f-c: var(--cx-cyan, #2bb3f0); --f-c-text: var(--cx-cyan-text, #2bb3f0); }
}
.cx1 *, .cx1 *::before, .cx1 *::after { box-sizing: border-box; }
.cx1-label { margin: 0; font: 700 .72rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-soft); }
.cx1-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px solid var(--f-rule); }
.cx1-head .cx1-live { color: var(--f-ink); }
.cx1-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--f-ok); vertical-align: .05rem; }
.cx1-live[data-mode="table"]::before { background: var(--f-ink); }
.cx1-grid { display: flex; flex-direction: column; gap: .9rem; }
.cx1-compact { display: none; margin: 0 0 .6rem; align-items: flex-end; gap: .2rem .7rem; flex-wrap: wrap; }
.cx1-compact span { display: inline-flex; flex-direction: column; }
.cx1-compact b { font: 860 1.9rem/.9 var(--f-display); letter-spacing: -.04em; color: var(--f-ink); font-variant-numeric: tabular-nums; }
.cx1-compact .cx1-cm b { font-size: 1.15rem; letter-spacing: -.02em; padding-bottom: .12rem; }
.cx1-compact i { font: 700 .56rem/1.2 var(--f-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--f-soft); margin-top: .15rem; }
.cx1-compact .cx1-ctest { flex-basis: 100%; font: 700 .56rem/1.2 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--f-soft); }
.cx1-compact .cx1-nw { display: inline; white-space: nowrap; }   /* the source stays on one line */
.cx1-compact .cx1-cv { font: 700 .6rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-soft); padding-bottom: 1.05rem; }
@container cx1 (max-width: 439px) {
  .cx1-compact { display: flex; }
  .cx1-nums, .cx1-testcap, .cx1-read .cx1-meas { display: none; }
}
.cx1-stage { min-width: 0; }

/* the square: three rows of three cells, a box at the end of every row and under every column */
.cx1-sq { --cell: min(78px, 23cqw); --lamp: min(66px, 18cqw); --gap: min(7px, 1.6cqw);
  display: grid; grid-template-columns: repeat(3, var(--cell)) var(--lamp); grid-template-rows: repeat(3, var(--cell)) calc(var(--lamp) * .74);
  gap: var(--gap); justify-content: center; margin: 0 auto; }
.cx1-cell { appearance: none; position: relative; margin: 0; padding: 0; border: 1.5px solid var(--f-ink); border-radius: 0;
  background: var(--f-paper); color: var(--f-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font: 820 calc(var(--cell) * .5)/1 var(--f-display); letter-spacing: -.02em; touch-action: manipulation; }
.cx1-cell:hover { background: var(--f-faint); }
.cx1-cell:focus-visible { outline: 3px solid var(--f-ink); outline-offset: 2px; z-index: 1; }
.cx1-cell .cx1-act { position: absolute; left: .3rem; top: .26rem; font: 700 max(.6rem, calc(var(--cell) * .12))/1 var(--f-mono); letter-spacing: .02em;
  color: var(--f-soft); text-transform: none; }
.cx1-cell .cx1-sign { display: block; margin-top: calc(var(--cell) * .08); font-variant-numeric: tabular-nums; }
.cx1-cell[data-state="unread"] .cx1-sign { color: var(--f-hair); font-weight: 400; }
.cx1-cell[data-state="dim"] { border-color: var(--f-hair); }
.cx1-cell[data-state="dim"] .cx1-sign { color: var(--f-hair); font-weight: 400; }
.cx1-cell[data-state="read"] { border-width: 3px; }
.cx1-lamp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; border: 1.5px dashed var(--f-no);
  background: var(--f-paper); color: var(--f-ink); text-align: center; padding: .1rem; min-width: 0; overflow: hidden; }
.cx1-lamp .cx1-lk { font: 700 max(.54rem, calc(var(--lamp) * .12))/1.1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--f-soft); white-space: nowrap; }
.cx1-lamp .cx1-lt { font: 820 calc(var(--lamp) * .3)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cx1-lamp .cx1-ls { font: 700 max(.54rem, calc(var(--lamp) * .12))/1.1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--f-no); white-space: nowrap; }
.cx1-lamp[data-signs="1"] .cx1-ls { font: 800 max(.74rem, calc(var(--lamp) * .17))/1 var(--f-mono); letter-spacing: .02em; }   /* the last read's three signs */
.cx1-lamp[data-lit="idle"] { border: 1.5px dotted var(--f-hair); }
.cx1-lamp[data-lit="idle"] .cx1-ls { color: var(--f-soft); }
.cx1-lamp[data-lit="on"] { background: var(--f-ok); border: 1.5px solid var(--f-ok); color: var(--f-on-ok); }
.cx1-lamp[data-cur="1"] { outline: 3px solid var(--f-ink); outline-offset: 2px; }
.cx1-lamp[data-lit="on"] .cx1-lk, .cx1-lamp[data-lit="on"] .cx1-ls { color: var(--f-on-ok); }
.cx1-lamp.cx1-flash { animation: cx1-flash .5s ease-out; }
@keyframes cx1-flash { from { outline: 4px solid var(--f-ok); outline-offset: 4px; } to { outline: 4px solid transparent; outline-offset: 0; } }
.cx1-corner { display: flex; align-items: center; justify-content: center; text-align: center; font: 700 max(.54rem, calc(var(--lamp) * .12))/1.25 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--f-soft); }

/* the panel: the one number, the axis, the words */
.cx1-panel { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.cx1-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.cx1-big { display: flex; align-items: flex-end; gap: .2rem .7rem; }
.cx1-num { font-family: var(--f-display); font-weight: 860; font-size: clamp(2.6rem, 13cqw, 3.4rem); line-height: .86; letter-spacing: -.05em;
  color: var(--f-ink); font-variant-numeric: tabular-nums lining-nums; }
.cx1-against { font: 700 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-soft); padding-bottom: .4rem; }
.cx1-cap { margin: 0; font: 700 .6rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--f-soft); }
.cx1-testcap { position: relative; z-index: 1; font-size: .66rem; letter-spacing: .12em; color: var(--f-ink); }   /* names the test the 6 and the 4 are scores on */
.cx1-read .cx1-meas { grid-column: 1 / -1; margin: 0; }
.cx1-meas { margin: .45rem 0 0; font-size: .92rem; line-height: 1.3; color: var(--f-ink); }
.cx1-meas b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cx1-bigcaps { display: grid; grid-template-columns: 1fr 1.25fr; gap: .2rem .7rem; margin-top: .35rem; max-width: 16rem; }
.cx1-meter { display: block; width: 100%; height: auto; overflow: visible; }
.cx1-meter text { font-family: var(--f-mono); fill: var(--f-soft); }
.cx1-words { margin: 0; font-size: .93rem; line-height: 1.36; color: var(--f-ink); font-variant-numeric: tabular-nums; min-height: 2.72em; }
.cx1-why { margin: .5rem 0 0; font-size: .86rem; line-height: 1.4; color: var(--f-body); }
.cx1-more { border-top: 1px solid var(--f-rule); padding-top: .45rem; }
.cx1-more summary { cursor: pointer; font: 700 .64rem/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--f-soft); }
@container cx1 (max-width: 439px) { .cx1-more summary { padding: .25rem 0; } }   /* at least 24 px tall for a finger */
.cx1-more summary:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.cx1-count { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .12rem;
  font: 400 .78rem/1.45 var(--f-mono); color: var(--f-ink); font-variant-numeric: tabular-nums; }
.cx1-count li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; }
.cx1-count .k { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-soft); font-size: .7rem; }
.cx1-count .v { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cx1-count .r { font-weight: 700; white-space: nowrap; }
.cx1-count .r[data-ok="1"] { color: var(--f-ok); }
.cx1-count .r[data-ok="0"] { color: var(--f-no); }
.cx1-count .r[data-ok=""] { color: var(--f-soft); font-weight: 400; }
.cx1-ctl { display: flex; flex-wrap: wrap; gap: .45rem; }
.cx1-ctl button { appearance: none; border: 1px solid var(--f-ink); border-radius: 0; background: transparent; color: var(--f-ink); cursor: pointer;
  font: 700 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .55rem .65rem; min-height: 36px; }
.cx1-ctl button:hover { background: var(--f-faint); }
.cx1-ctl button:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.cx1-ctl button[hidden] { display: none; }
.cx1-ctl .cx1-primary { background: var(--f-ink); color: var(--f-paper); }
.cx1-ctl .cx1-primary:hover { background: var(--f-ink); color: var(--f-paper); text-decoration: underline; }
.cx1-caption { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--f-rule); font-size: .95rem; color: var(--f-body); max-width: 50rem; }
.cx1-caption b { color: var(--f-ink); font-weight: 650; }
.cx1-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx1-gk { text-transform: none; }

@container cx1 (min-width: 440px) {
  .cx1-read { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: .3rem 1rem; align-items: end; }
  .cx1-axis { grid-column: 2; grid-row: 1 / span 2; }   /* beside the label and the numbers */
  .cx1-bigcaps { grid-template-columns: 1fr 1fr; max-width: none; }
  .cx1-num { font-size: 3rem; }
}
@container cx1 (min-width: 880px) {
  .cx1-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: start; }
  .cx1-sq { --cell: min(104px, 10cqw); --lamp: min(88px, 8.4cqw); }
  .cx1-read { grid-template-columns: minmax(0, 1fr); }
  .cx1-axis { grid-column: auto; grid-row: auto; }
  .cx1-num { font-size: 4.4rem; }
  .cx1-bigcaps { max-width: 22rem; }
}
@media (prefers-reduced-motion: reduce) { .cx1-lamp.cx1-flash { animation: none; } }
@media (forced-colors: active) {
  .cx1-lamp[data-lit="on"] { background: Highlight; color: HighlightText; border: 3px solid Highlight; forced-color-adjust: none; }
  .cx1-lamp[data-lit="on"] .cx1-lk, .cx1-lamp[data-lit="on"] .cx1-ls { color: HighlightText; }
  .cx1-lamp { border: 2px dashed CanvasText; }
  .cx1-cell[data-state="read"] { border: 4px solid Highlight; }
  .cx1-live::before { background: CanvasText; }
  .cx1-meter .cx1-m-ok { stroke: Highlight; fill: Highlight; }
}
@media print {
  /* a printed page breaks between a figure's blocks, never inside one (the whole figure can be taller than a page) */
  .cx1-sq, .cx1-read, .cx1-ctl { break-inside: avoid; }
  .cx1 { --f-paper: #ffffff; --f-ink: #1d1d1b; --f-body: #2a2926; --f-soft: #3c3a36; --f-ok: #0b7a3e; --f-on-ok: #ffffff; --f-no: #c8401f; }
  .cx1, .cx1 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cx1-ctl { display: none; }
}