/* Dynamic range lab: the picture and the ruler under it on the left, controls on the right */
.dr-lab{display:grid;gap:16px;padding-bottom:64px}
.dr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 32px}
.dr-head h2{margin:0}
.dr-head p{max-width:34em;margin:0;color:var(--muted)}
.dr-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px 32px;align-items:start}
.dr-view{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px}
.dr-view canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:10px}
.dr-view svg{display:block;width:100%;height:auto;touch-action:pan-y;cursor:ew-resize;font-family:var(--sans)}
.dr-view .dr-hi{color:#FF9A80}
.dr-view .dr-lo{color:#8FB0FF}

/* The ruler */
.dr-bar{fill:#E7E9E4;fill-opacity:.8}
.dr-bar-hi{fill:#FF7A5A;fill-opacity:.8}
.dr-bar-lo{fill:#4682FF;fill-opacity:.8}
.dr-axis{stroke:#8A9297;stroke-width:1.5}
.dr-tick{stroke:#8A9297}
.dr-mark{stroke:#A7ADB2;stroke-dasharray:3 4}
.dr-mark-label{fill:#E7E9E4;font-weight:600;text-anchor:middle}
.dr-end{fill:#A7ADB2}
.dr-window{fill:#F5A62314;stroke:#F5A623;stroke-width:2.5}
.dr-window-label{fill:#F5A623;font-weight:700;text-anchor:middle}
.dr-span{fill:none;stroke:#A7ADB2;stroke-width:1.5}
.dr-span-label{fill:#A7ADB2;font-weight:600;text-anchor:middle}

.dr-controls{border-top:1px solid var(--rule)}
.dr-controls .control{padding:14px 0 12px}
.dr-controls .chip-row{margin-top:10px}
.dr-cams{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}
.dr-cams button{display:grid;gap:1px;padding:7px 4px}
.dr-cams small{font-size:12px;font-weight:600;opacity:.75}
.dr-key{display:inline-block;width:10px;height:10px;margin:0 5px 0 0;border-radius:2px;vertical-align:-1px}
.dr-key-hi{background:#FF7A5A}
.dr-key-lo{background:#4682FF;margin-left:10px}
.dr-say{margin-top:14px;padding:12px 14px;border-left:3px solid var(--amber);background:var(--paper-2);border-radius:0 12px 12px 0;font-family:var(--sans);font-size:15px;line-height:1.45}

.dr-table{max-width:52em}
.dr-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dr-options article{padding:18px 20px;border:1.5px solid var(--rule);border-radius:16px;background:var(--paper-2)}
.dr-options h3{margin:0 0 6px}
.dr-options p{margin:0;font-size:17px;line-height:1.5}

@media (max-width:900px){
  .dr-grid,.dr-options{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dr-view{gap:8px;padding:10px}
  .dr-view .view-stats{--cols:2!important}
  .dr-view .view-stats>div:nth-child(3){padding-left:0;border-left:0}
}