/* Two results. Light: grey paper, black ink; dark: black paper, grey ink. The system's choice, or ?theme=light|dark. */
:root {
  color-scheme: light;
  --bg:#8c8c8c; --fg:#000; --fg2:#282828; --fg3:#4a4a4a; --rule:#3a3a3a; --rule2:#7f7f7f; --panel:#858585;
  --sans: "Die Grotesk", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --mono: "Berkeley Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --dash: 1px dashed var(--fg3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#000; --fg:#bebebe; --fg2:#8c8c8c; --fg3:#5f5f5f; --rule:#4a4a4a; --rule2:#1b1b1b; --panel:#0b0b0b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#000; --fg:#bebebe; --fg2:#8c8c8c; --fg3:#5f5f5f; --rule:#4a4a4a; --rule2:#1b1b1b; --panel:#0b0b0b;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--fg2); font: 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased }
::selection { background: var(--fg2); color: var(--bg) }
a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere }
a:hover { text-decoration: none }
b { color: var(--fg) }
.pc { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px }
.pc p, .pc ul, .pc ol, .pc figure { max-width: 720px }
.pc-head { border-bottom: 1px solid var(--fg2); padding: 28px 0 18px }
.pc-kick { font: 12px/1.4 var(--mono); color: var(--fg2); margin: 0 0 6px }
h1 { font: 700 26px/1.25 var(--sans); color: var(--fg); margin: 0 0 12px }
h2 { font: 700 21px/1.3 var(--sans); color: var(--fg); margin: 0 0 6px }
h3 { font: 700 15px/1.35 var(--mono); color: var(--fg); margin: 28px 0 6px }
.pc-lede { margin: 0 0 12px }
.pc-nav { font: 13px/1.5 var(--mono); display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 10px }
.pc-nav a { color: var(--fg2); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px }
.pc-nav a::before { content: "[" } .pc-nav a::after { content: "]" }
.pc-nav a:hover { color: var(--fg) }
.pc-ver { font: 12px/1.5 var(--mono); color: var(--fg2); margin: 0 }
.pc-story { border-top: var(--dash); padding: 30px 0 10px; margin-top: 18px }
.pc-story:first-of-type { border-top: 0 }
.pc-small { font: 12px/1.5 var(--mono); color: var(--fg2) }
.pc-sub { font: 700 12px/1.4 var(--mono); color: var(--fg); margin: 14px 0 4px }

/* diagrams and the layer picture: inline SVG, one viewBox width, text never under 11 px at 390 */
.pc .pc-fig { margin: 8px 0 0; max-width: 480px }
.pc-fig figcaption { font: 12px/1.4 var(--mono); color: var(--fg2); margin-top: 6px }
.pc-svg { display: block; width: 100%; height: auto; overflow: visible }
.pc-t { font: 12px var(--mono); fill: var(--fg2) }
.pc-t.b, .pc-t.f { fill: var(--fg); font-weight: 700 }
.pc-box { fill: none; stroke: var(--fg); stroke-width: 1.2 }
.pc-box.k { stroke-dasharray: 4 3 }
.pc-arr { stroke: var(--fg); stroke-width: 1.2 } .pc-head { fill: var(--fg) }
.pc-bar { fill: var(--fg) }
.pc-ax { stroke: var(--fg); stroke-width: 1 } .pc-grd { stroke: var(--fg3); stroke-width: .6; stroke-dasharray: 2 3 }
.pc-med { stroke: var(--bg); stroke-width: 1.4; stroke-dasharray: 3 2 } .pc-med0 { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 2 }
.pc-cav1 { font: 13px/1.45 var(--mono); color: var(--fg); border-left: var(--dash); padding-left: 10px; margin: 10px 0 0 }

/* the pairs */
.pc-pair { margin: 18px 0 8px }
.pc-q { margin: 0 0 8px; font: 700 18px/1.35 var(--sans); color: var(--fg) }
.pc-q q { quotes: "“" "”" }
.pc-qs { display: block; font: 400 12px/1.4 var(--mono); color: var(--fg2); margin-top: 2px }
.pc-grid { display: grid; gap: 0 18px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1000px) { .pc-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)) } .pc-grid.seven { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.pc-rep { border-top: var(--dash); padding: 8px 0 12px; min-width: 0; overflow: hidden; contain: paint }
.pc-arm { font: 700 12px/1.4 var(--mono); color: var(--fg) }
.pc-arm span { font-weight: 400; color: var(--fg2) }
.pc-rt { font: 15.5px/1.45 var(--sans); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 2px; overflow: hidden }
.pc-rep.long .pc-rt { max-height: 10.2em; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) }
.pc-rep.long.open .pc-rt { max-height: none; -webkit-mask-image: none; mask-image: none }
.pc-end { font: 12px/1.4 var(--mono); color: var(--fg2) }
.pc-end.cap::before { content: "■ "; } .pc-end.ok::before { content: "□ " }
.pc-more { font: 12px var(--mono); color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--fg2); padding: 0; margin-top: 4px;
  min-height: 40px; cursor: pointer }
.pc-pointer { font: 15px/1.5 var(--mono); color: var(--fg); border-top: 1px solid var(--fg2); border-bottom: 1px solid var(--fg2); padding: 10px 0; margin: 18px 0 }
.pc-scope { font: 14px/1.5 var(--mono); color: var(--fg); margin: 0 }

/* the owl's question picker */
.pc-tabs { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 6px 0 0 }
.pc-tab { font: 13px/1.3 var(--mono); color: var(--fg2); background: none; border: 0; padding: 6px 0; min-height: 40px; cursor: pointer; text-align: left }
.pc-tab::before { content: "["; color: transparent } .pc-tab::after { content: "]"; color: transparent }
.pc-tab[aria-selected="true"] { color: var(--fg); font-weight: 700 }
.pc-tab[aria-selected="true"]::before, .pc-tab[aria-selected="true"]::after { color: inherit }
.pc-tab:hover { color: var(--fg) }

/* caveats, claims */
.pc-cav { margin: 0; padding-left: 1.2em; font: 14px/1.5 var(--mono); color: var(--fg) }
.pc-fold { margin: 18px 0 0; max-width: 760px }
.pc-fold > summary { font: 13px/1.4 var(--mono); color: var(--fg); cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center;
  text-decoration: underline; text-underline-offset: 2px }
.pc-fold > summary::-webkit-details-marker { display: none }
.pc-fold > summary::before { content: "→"; display: inline-block; width: 1.4em; text-decoration: none; flex: none }
.pc-fold[open] > summary::before { content: "↓" }
.pc-claims { list-style: none; padding: 0; margin: 8px 0 0 }
.pc-claim { border-top: var(--dash); padding: 10px 0 10px 1.8em; position: relative }
.pc-n { position: absolute; left: 0; top: 10px; font: 13px var(--mono); color: var(--fg2) }
.pc-claimtext { font: 16px/1.45 var(--sans); color: var(--fg); margin: 0 }
.pc-claimtext::before { content: "“" } .pc-claimtext::after { content: "”" }
.pc-cv { font: 12.5px/1.5 var(--mono); color: var(--fg2); margin: 4px 0 0 }
.pc-lab { color: var(--fg); font-weight: 700 }

/* sources */
.pc-src { border-top: 1px solid var(--fg2); margin-top: 30px; padding-top: 16px }
.pc-src h2 { font-size: 18px }
.pc-src ul { font: 13px/1.55 var(--mono); color: var(--fg2); padding-left: 1.2em }
.pc-src li { margin: 4px 0 }
@media (max-width: 640px) { h1 { font-size: 23px } h2 { font-size: 19px } .pc-q { font-size: 17px } }
@media print { .pc-more, .pc-tabs { display: none } .pc-rep.long .pc-rt { max-height: none; mask-image: none; -webkit-mask-image: none } .pc-pair[hidden] { display: block } }

/* the copy page */
@media (min-width: 1000px) { .pc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.pc-note { font: 13px/1.5 var(--mono); color: var(--fg); border-left: var(--dash); padding-left: 10px; margin: 6px 0 0 }
.pc-nums { list-style: none; padding: 0; margin: 10px 0 0; max-width: 520px }
.pc-num { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em; align-items: center; gap: 10px; border-top: var(--dash); padding: 8px 0; font: 14px/1.4 var(--mono); color: var(--fg) }
.pc-num .bar { display: block; width: 100%; height: 10px }
.pc-num .v { text-align: right; font-weight: 700 }
.pc-soon { list-style: none; padding: 0; margin: 8px 0 0 }
.pc-soon li { border-top: var(--dash); padding: 10px 0; font: 15px/1.45 var(--sans); color: var(--fg) }
.pc-soon .tag { font: 12px var(--mono); color: var(--fg2); margin-left: 6px }