/* COLDGATE motion pictograms (Docs + How a reading is made) */
.cgp{margin:22px 0 22px;border:1px solid var(--t-line2,#d9d6e8);background:#f3f0fd;overflow:hidden}
.cgp .doc-flow{margin:0;border:0}
.cgp-stage svg{display:block;width:100%;height:auto;touch-action:pan-y}
.cgp text{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:#93a6bd}
.cgp .cgp-k{fill:#7f97ad}
.cgp .cgp-s{font-size:9px}
.cgp .light{fill:#dcefff}
.cgp .dim,.cgp .dimv{fill:#5f7a92}
.cgp .warm{fill:var(--amber)}
.cgp .cgp-pk{fill:#06121e;font-size:9px}
.cgp .cgp-pk.light{fill:var(--ice)}
.cgp .cgp-code{font-size:12px;letter-spacing:.02em;fill:#c9dcea}
.cgp .cgp-state{font-size:13px;letter-spacing:.12em;fill:var(--ice)}
.cgp .cgp-big{font-family:var(--display);font-size:30px;letter-spacing:0;fill:#e8f7ff}
.cgp .cgp-big.sm{font-size:24px}
.cgp .cgp-op{font-size:26px;fill:var(--ice)}
.cgp .cgp-val{font-size:11px;font-weight:700;fill:#06121e}
.cgp-lamp .core{fill:#0c1824;stroke:#4d6b86;stroke-width:1.2;transition:fill .3s,stroke .3s}
.cgp-lamp .halo{transition:opacity .3s}
.cgp-lamp.on .core{fill:#7dcaff;stroke:#bfe9ff}
.cgp-lamp.on .halo{fill:#7dcaff;opacity:.22}
.cgp-lamp.off .core{fill:#e8f7ff;stroke:#efb57c;stroke-width:2}
.cgp-lamp.off .halo{fill:#efb57c;opacity:.2}
.cgp-lamp.none .core{fill:none;stroke:#93a6bd;stroke-dasharray:2 2}
.cgp .cgp-crystal{fill:#e8f7ff;opacity:.85}
.cgp [data-hover]{cursor:pointer}
.cgp-lane .lane-path{transition:stroke .3s}
.cgp-lane.sel .lane-path{stroke:#12304a}
.cgp-lane.sel .lane-glow{opacity:1}
.cgp .row rect{transition:fill .2s,stroke .2s}
.cgp .row{transition:opacity .2s}
.cgp .row.hit rect{fill:#12304a;stroke:var(--ice)}
.cgp .row.miss{opacity:.45}
.cgp .lk>rect:first-child{transition:stroke .2s}
.cgp .lk.sel>rect:first-child{stroke:var(--ice)}
.cgp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--t-line,#d9d6e8);background:#f3f0fd}
.cgp-btn{font:11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#252668;background:transparent;border:1px solid var(--t-line2,#d9d6e8);min-height:40px;padding:0 14px;cursor:pointer;transition:background .2s,color .2s}
.cgp-btn:hover{background:#f3f0fd}
.cgp-btn[aria-pressed=true]{background:var(--ice);color:#252668;border-color:var(--ice)}
.cgp-btn:focus-visible,.cgp-range input:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.cgp-range{display:flex;align-items:center;gap:12px;flex:1 1 260px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#252668}
.cgp-range input{flex:1;min-width:0;min-height:40px;accent-color:#bfe9ff;cursor:pointer}
.cgp-range output{min-width:9ch;white-space:nowrap;color:#252668;text-transform:none;letter-spacing:.02em}
.cgp figcaption{padding:12px 14px 14px;font-size:13px;line-height:1.55;color:#252668;border-top:1px solid var(--t-line,#d9d6e8);min-height:4.9em}
.cgp figcaption b{color:#252668;font-weight:700}
.cgp-sm{margin:16px 0 0}
.cgp-sm .cgp-s{font-size:9.5px}
.cgp-sm .cgp-bar{padding:8px 10px;gap:6px}
.cgp-sm .cgp-btn{font-size:10px;padding:0 10px;min-height:38px}
.cgp-sm figcaption{font-size:12px;min-height:7.2em}
.page-graphic .doc-line.js{animation:none}
@media(max-width:1180px){
 .relay{grid-template-columns:1fr}
 .relay-step{border-right:0}
 .relay-step>.cgp{max-width:560px}
 .cgp-sm figcaption{min-height:0}
}
@media(max-width:700px){
 .cgp figcaption{font-size:12.5px;min-height:6.4em}
 .cgp-btn{flex:1 1 auto}
}