/* Shared styles for the High Yield Imaging simulators, in the site's design system (DESIGN.md, "The film on the viewing box").
   Film for the image and the numbers read off it; paper and grey plates for the controls, as on the calculator pages.
   Paths are relative to this file. */
@font-face{font-family:"Chivo";src:url("fonts/chivo-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/chivo-mono-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Piazzolla";src:url("fonts/piazzolla-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --w0:#050506;--w1:#101113;--w2:#1a1b1e;--w3:#26272b;--w4:#35363b;--w5:#4a4b51;
  --w6:#66676d;--w7:#8b8c92;--w8:#b3b4b9;--w9:#dcdcdf;--w10:#f6f6f4;
  --paper:var(--w10);--ink:var(--w1);--plate:var(--w9);--mark:#d8402c;--focus:var(--w10);
  --hl:#f9e361;--hl-line:#a18500;--hl-wash:#f7f0c5;
  --warn-wash:#fbeedb;--warn-rule:#b36b12;--warn-ink:#6e3f0c;
  --sans:"Chivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Chivo Mono",Menlo,"Courier New",monospace;
  --serif:"Piazzolla",Georgia,serif;
  --gut:clamp(16px,2vw,28px);
  --ctl:44px;
  --rail:clamp(320px,27vw,400px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--w1);color:var(--w9);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;color-scheme:dark}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border-radius:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--hl);color:var(--w1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* masthead: the site's film band and handwritten wordmark */
.band{background:var(--w1);border-bottom:1px solid var(--w3)}
.bandrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;min-height:64px;padding:6px var(--gut)}
.wordmark{display:inline-flex;align-items:flex-end;min-height:44px;color:var(--w10);text-decoration:none;white-space:nowrap}
.wordmark svg{display:none}
.wordmark span{display:inline-block;min-height:44px;padding:5px 0 0;font-family:"Caveat",cursive;font-weight:700;font-size:30px;line-height:1;letter-spacing:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%2096%20680%2052%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M10.12%2C141.75%20C11.60%2C141.63%2015.88%2C141.03%2018.98%2C141.06%20C22.08%2C141.10%2025.70%2C141.93%2028.73%2C141.96%20C31.77%2C141.99%2034.36%2C141.23%2037.20%2C141.26%20C40.04%2C141.28%2042.87%2C142.14%2045.79%2C142.12%20C48.71%2C142.09%2051.52%2C141.11%2054.71%2C141.08%20C57.90%2C141.06%2061.69%2C141.66%2064.93%2C141.95%20C68.18%2C142.24%2071.30%2C142.76%2074.18%2C142.84%20C77.07%2C142.91%2079.39%2C142.50%2082.23%2C142.42%20C85.07%2C142.34%2088.12%2C142.33%2091.22%2C142.38%20C94.32%2C142.43%2097.71%2C142.97%20100.83%2C142.73%20C103.95%2C142.49%20106.78%2C141.12%20109.93%2C140.93%20C113.09%2C140.73%20116.58%2C141.31%20119.75%2C141.58%20C122.92%2C141.86%20126.10%2C142.44%20128.96%2C142.59%20C131.82%2C142.74%20134.16%2C142.62%20136.90%2C142.47%20C139.64%2C142.33%20142.26%2C141.97%20145.39%2C141.71%20C148.53%2C141.45%20152.75%2C140.86%20155.72%2C140.90%20C158.69%2C140.94%20160.15%2C141.73%20163.23%2C141.95%20C166.30%2C142.17%20170.91%2C142.11%20174.18%2C142.23%20C177.46%2C142.34%20179.94%2C142.64%20182.86%2C142.63%20C185.79%2C142.62%20188.92%2C142.33%20191.72%2C142.18%20C194.53%2C142.03%20196.67%2C141.62%20199.67%2C141.72%20C202.68%2C141.81%20206.61%2C142.71%20209.76%2C142.74%20C212.91%2C142.78%20215.56%2C142.02%20218.58%2C141.92%20C221.59%2C141.82%20224.68%2C142.01%20227.84%2C142.16%20C231.00%2C142.30%20234.49%2C142.82%20237.53%2C142.78%20C240.57%2C142.74%20243.61%2C142.65%20246.09%2C141.93%20C248.57%2C141.21%20250.43%2C139.72%20252.42%2C138.44%20C254.40%2C137.16%20255.35%2C133.65%20257.98%2C134.26%20C260.61%2C134.88%20265.81%2C141.87%20268.21%2C142.12%20C270.61%2C142.36%20270.99%2C138.34%20272.39%2C135.75%20C273.79%2C133.15%20275.47%2C129.09%20276.58%2C126.53%20C277.69%2C123.96%20277.78%2C122.60%20279.05%2C120.33%20C280.32%2C118.06%20282.69%2C113.01%20284.20%2C112.91%20C285.71%2C112.82%20286.80%2C117.34%20288.09%2C119.79%20C289.37%2C122.24%20290.57%2C125.16%20291.92%2C127.61%20C293.27%2C130.07%20294.80%2C132.14%20296.17%2C134.51%20C297.54%2C136.88%20297.79%2C141.89%20300.14%2C141.82%20C302.49%2C141.75%20307.51%2C134.62%20310.25%2C134.08%20C312.98%2C133.54%20314.63%2C137.28%20316.55%2C138.59%20C318.47%2C139.91%20319.48%2C141.31%20321.76%2C141.95%20C324.04%2C142.59%20327.10%2C142.37%20330.24%2C142.42%20C333.38%2C142.47%20337.30%2C142.16%20340.60%2C142.27%20C343.91%2C142.38%20346.99%2C143.09%20350.07%2C143.08%20C353.15%2C143.06%20356.09%2C142.20%20359.06%2C142.18%20C362.02%2C142.17%20364.91%2C143.09%20367.85%2C142.99%20C370.79%2C142.89%20373.79%2C141.60%20376.69%2C141.60%20C379.59%2C141.59%20382.43%2C142.87%20385.28%2C142.98%20C388.12%2C143.08%20390.94%2C142.33%20393.76%2C142.22%20C396.58%2C142.10%20399.15%2C142.41%20402.21%2C142.29%20C405.27%2C142.16%20408.83%2C141.68%20412.10%2C141.46%20C415.38%2C141.25%20418.73%2C141.07%20421.84%2C141.01%20C424.95%2C140.95%20427.93%2C140.79%20430.77%2C141.09%20C433.60%2C141.40%20436.13%2C142.64%20438.83%2C142.86%20C441.53%2C143.07%20444.08%2C142.60%20446.96%2C142.37%20C449.85%2C142.15%20452.77%2C141.59%20456.13%2C141.53%20C459.48%2C141.48%20464.06%2C142.16%20467.09%2C142.05%20C470.11%2C141.95%20471.60%2C140.87%20474.30%2C140.91%20C476.99%2C140.96%20480.08%2C142.03%20483.25%2C142.33%20C486.41%2C142.63%20490.09%2C142.66%20493.29%2C142.72%20C496.48%2C142.78%20499.60%2C142.91%20502.42%2C142.68%20C505.23%2C142.44%20507.38%2C141.40%20510.18%2C141.32%20C512.97%2C141.25%20515.98%2C142.10%20519.18%2C142.24%20C522.38%2C142.38%20526.17%2C142.28%20529.39%2C142.17%20C532.61%2C142.06%20535.40%2C141.78%20538.50%2C141.60%20C541.60%2C141.42%20544.90%2C141.15%20547.99%2C141.11%20C551.08%2C141.06%20554.23%2C141.18%20557.02%2C141.33%20C559.81%2C141.48%20561.94%2C141.86%20564.74%2C141.99%20C567.55%2C142.13%20570.90%2C142.05%20573.86%2C142.11%20C576.82%2C142.18%20579.67%2C142.41%20582.51%2C142.38%20C585.36%2C142.34%20587.74%2C142.04%20590.93%2C141.92%20C594.11%2C141.80%20598.45%2C141.68%20601.61%2C141.64%20C604.77%2C141.61%20606.81%2C141.81%20609.89%2C141.71%20C612.97%2C141.62%20617.20%2C141.14%20620.08%2C141.07%20C622.95%2C141.01%20624.44%2C141.02%20627.13%2C141.31%20C629.81%2C141.60%20632.93%2C142.57%20636.18%2C142.81%20C639.42%2C143.05%20643.50%2C143.04%20646.60%2C142.75%20C649.69%2C142.45%20651.85%2C141.17%20654.75%2C141.04%20C657.65%2C140.92%20662.46%2C141.84%20664.00%2C142.00%22%20fill%3D%22none%22%20stroke%3D%22%23f3f3ef%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") left bottom/100% 11px no-repeat}
.wordmark:hover span{opacity:.92}
.ttl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0}
.ttl h1{font-size:20px;line-height:1.2;color:var(--w10)}
.ann{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--w9)}
.ann .dim{color:var(--w8)}
.provisional{padding:10px var(--gut);background:var(--warn-wash);color:var(--warn-ink);font-size:15px;font-weight:700}

/* switches: the site's audience switch. On film the current item is white with a 2px white rule; on paper, ink with an ink rule */
.seg{display:flex;flex-wrap:wrap;gap:0 18px;min-width:0}
.seg button{flex:0 0 auto;min-width:44px;min-height:var(--ctl);padding:0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--w8);font-weight:700;font-size:15px;white-space:nowrap}
.seg button:hover{color:var(--w10);border-bottom-color:var(--mark)}
.seg button[aria-pressed="true"]{color:var(--w10);border-bottom-color:var(--w10)}
.chips{display:flex;flex-wrap:wrap;gap:0 18px}
.chip{min-width:44px;min-height:var(--ctl);padding:0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--w8);font-size:15px;font-weight:700}
.chip:hover{color:var(--w10);border-bottom-color:var(--mark)}
.chip[aria-pressed="true"]{color:var(--w10);border-bottom-color:var(--w10)}
/* buttons: square, 48px, Chivo 700 16px. On paper, ink with paper text (hover steps to --w3); on film, paper with ink text */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:0;background:var(--w10);color:var(--w1);font-size:16px;font-weight:700;line-height:1.2;text-align:center}
.btn:hover{background:var(--w9)}
select{min-height:var(--ctl);width:100%;padding:10px 12px;border:1px solid var(--w6);border-radius:0;background:var(--w1);color:var(--w10);font-size:15px;line-height:1.3}
input[type=range]{flex:1 1 auto;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--w6)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border:2px solid var(--w1);border-radius:0;background:var(--w10)}
input[type=range]::-moz-range-track{height:2px;background:var(--w6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--w1);border-radius:0;background:var(--w10)}

/* layout */
.sim{border-bottom:6px solid var(--hl)}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:14px var(--gut) 22px}
.stagecol{display:flex;flex-direction:column;gap:10px;min-width:0}
.stagebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.stage{position:relative;width:100%;max-width:min(100%,calc(100vh - 150px));aspect-ratio:1;margin:0 auto;background:var(--w0);box-shadow:0 0 0 1px var(--w3)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
/* burned-in annotation: Chivo Mono, uppercase, with the burn-in shadow */
.ori{position:absolute;z-index:2;pointer-events:none;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--w10);text-shadow:0 0 6px rgba(0,0,0,.9)}
.ori.t{top:8px;left:50%;transform:translateX(-50%)}.ori.b{bottom:8px;left:50%;transform:translateX(-50%)}
.ori.l{left:8px;top:50%;transform:translateY(-50%)}.ori.r{right:8px;top:50%;transform:translateY(-50%)}
.tag{position:absolute;z-index:3;left:8px;top:8px;max-width:calc(50% - 22px);padding:4px 8px;background:rgba(5,5,6,.72);color:var(--w10);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.35;text-shadow:0 0 6px rgba(0,0,0,.9);pointer-events:none}
.tag.real{background:var(--hl);color:var(--w1);text-shadow:none}
.tag.tr{left:auto;right:8px}.tag.bl{top:auto;bottom:8px}.tag.br{left:auto;right:8px;top:auto;bottom:8px}
.loading{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:13px;color:var(--w7)}
.cap{color:var(--w8);text-align:center}
/* the site's warning plate: one amber everywhere, 1px border, no side stripe */
.warn{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--warn-rule);background:var(--warn-wash);color:var(--warn-ink);font-size:14px;font-weight:700;line-height:1.45}
.loaded{padding:14px 16px;background:#fff;color:var(--w1);font-size:14px;line-height:1.55}
.loaded b{color:var(--w1)}
.loaded ul{margin:6px 0 0;padding-left:18px}
.loaded a{color:var(--w1);text-decoration-color:var(--w7);text-underline-offset:4px}
.loaded a:hover{text-decoration-color:var(--mark)}

/* the controls: a paper sheet of grey plates, as on the calculator pages */
.rail{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;background:var(--paper);color:var(--w1);color-scheme:light;--focus:var(--mark)}
.box{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px;background:var(--plate)}
.boxlab{font-family:var(--sans);font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--w1)}
.row{display:flex;flex-direction:column;gap:2px;min-width:0}
.rlab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rlab label,.rlab .lab,.row>.lab,.row>label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--w5)}
.row>.lab,.row>label{display:block;margin:0 0 2px}
.rlab output{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--w1);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{font-family:var(--serif);font-size:14px;line-height:1.55;color:var(--w8)}
.rail .hint,.paper .hint{color:var(--w5)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.rail .seg button,.rail .chip{color:var(--w5)}
.rail .seg button:hover,.rail .chip:hover{color:var(--w1);border-bottom-color:var(--mark)}
.rail .seg button[aria-pressed="true"],.rail .chip[aria-pressed="true"]{color:var(--w1);border-bottom-color:var(--w1)}
.rail .btn{background:var(--w1);color:var(--w10)}
.rail .btn:hover{background:var(--w3)}
.rail select{border-color:var(--w8);background:#fff;color:var(--w1)}
.rail select:focus-visible{outline:2px solid var(--mark);outline-offset:2px;border-color:var(--mark)}
.rail input[type=range]::-webkit-slider-runnable-track{background:var(--w6)}
.rail input[type=range]::-webkit-slider-thumb{border-color:var(--w9);background:var(--w1)}
.rail input[type=range]::-moz-range-track{background:var(--w6)}
.rail input[type=range]::-moz-range-progress{height:2px;background:var(--w1)}
.rail input[type=range]::-moz-range-thumb{border-color:var(--w9);background:var(--w1)}
.rail input[type=range]:hover::-webkit-slider-thumb{background:var(--w3)}
.rail input[type=range]:hover::-moz-range-thumb{background:var(--w3)}
.rail .warn{font-size:14px}

/* readouts: facts read off the film */
.reads{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--w3);border-left:1px solid var(--w3)}
.rd{padding:10px 12px;background:var(--w1);min-width:0;border-right:1px solid var(--w3);border-bottom:1px solid var(--w3)}
.rd .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--w8)}
.rd .v{font-size:19px;font-weight:700;color:var(--w10);font-variant-numeric:tabular-nums;line-height:1.3}
.rd .s{font-size:13px;color:var(--w8);line-height:1.35}
/* comparison with a reference (build/COMPARE-SPEC.md) */
.cmp{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--w1);border:1px solid var(--w3)}
.cmp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.cmp-top .k{font-family:var(--sans);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--w10)}
.cmp-t{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cmp-t th,.cmp-t td{padding:6px 8px;border-top:1px solid var(--w3);text-align:left;vertical-align:top;color:var(--w9)}
.cmp-t thead th{border-top:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--w8)}
.cmp-t tbody th{font-weight:700;color:var(--w10)}
.cmp-t td.chg{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap;color:var(--w10)}
.cmp-last,.cmp-note{font-size:13px;line-height:1.45;color:var(--w8)}
.cmp-last b{color:var(--w10)}
.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.chart .ctitle{font-size:15px;font-weight:700;color:var(--w10);margin-bottom:6px}
.chart p.cn{font-family:var(--serif);font-size:14px;color:var(--w8);margin-top:4px}
.chart svg{display:block;width:100%;height:auto}
.panel{padding:16px var(--gut) 24px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--w3)}

/* paper: the report sheet */
.paper{padding:0 16px;background:var(--paper);color:var(--ink);color-scheme:light;--focus:var(--mark)}
.paper .in{max-width:1080px;margin:0 auto;padding:28px 0 40px;display:flex;flex-direction:column;gap:30px}
.paper h2{font-size:clamp(22px,2.4vw,30px);line-height:1.1;color:var(--w1)}
.paper h3{font-size:18px;line-height:1.25;color:var(--w1)}
.paper p,.paper li{font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--w2)}
.paper .lede{color:var(--w4)}
.paper a{color:var(--w1);text-decoration-color:var(--w7);text-underline-offset:4px}
.paper a:hover{text-decoration-color:var(--mark);text-decoration-thickness:2px}
.paper ol,.paper ul{margin:0;padding-left:22px}
.paper li+li{margin-top:6px}
.plist{display:flex;flex-direction:column;gap:18px}
.pgroup h3{display:flex;align-items:baseline;gap:10px}
.pgroup .pn{font-family:var(--serif);font-size:15px;color:var(--w5);margin:2px 0 8px}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{padding:8px 8px;border-bottom:1px solid var(--w8);text-align:left;vertical-align:top}
.ptable th{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--w1)}
.ptable td{font-family:var(--sans);color:var(--w2)}
.ptable td.num{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap}
.ptable .why{font-family:var(--serif);font-size:14px;color:var(--w5)}
.pbtn{min-height:44px;padding:0 16px;border:0;background:var(--w1);color:var(--w10);font-size:15px;font-weight:700;white-space:nowrap}
.pbtn:hover{background:var(--w3)}
.tablewrap{overflow-x:auto}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.src{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--w4)}
.src li{font-size:15px}
details.more{border-top:1px solid var(--w8);padding-top:10px}
details.more summary{cursor:pointer;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--w1);min-height:44px;display:flex;align-items:center}
.foot{background:var(--w1);color:var(--w8);border-top:1px solid var(--w3)}
.foot .in{max-width:1080px;margin:0 auto;padding:40px var(--gut) 48px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.foot p{font-family:var(--serif);font-size:14px;line-height:1.6;color:var(--w7);max-width:720px}

@media (min-width:1024px){
  .paper{padding:0 28px}
  .sgrid{grid-template-columns:minmax(0,1fr) var(--rail);column-gap:24px;align-items:start}
  .stagecol{position:sticky;top:10px}
  .charts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:1023.98px){
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .charts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699.98px){
  .ttl{width:100%}
  .cmp-t td.chg{white-space:normal}
  .ttl h1{font-size:19px}
  .rail{padding:12px}
  .box{padding:16px 14px 18px}
}
@media (max-width:600px){
  .wordmark span{font-size:26px;padding-top:8px}
}
@media (max-width:520px){
  .tag,.ori{font-size:11px}
}