.im-camera{min-width:0;padding:clamp(1rem,2vw,1.5rem)}.im-camera h3{margin-top:0}.im-camera p{max-width:none}.im-camera-instruction{border-inline-start:3px solid var(--accent);padding-inline-start:.8rem}.im-camera-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.5rem;padding-block:.6rem 1rem;display:grid}.im-camera-controls label{gap:.25rem;font-size:.85rem;display:grid}.im-camera-control-row{align-items:center;gap:.75rem;display:flex}.im-camera-control-row input{width:100%;min-width:0;min-height:2.75rem;accent-color:var(--accent)}.im-camera-control-row output{text-align:end;font-variant-numeric:tabular-nums;min-width:4ch}.im-camera-controls small{color:var(--muted)}.im-camera-optics-labels{grid-template-columns:1fr 1fr 1fr;gap:.4rem;font-size:.8rem;line-height:1.3;display:grid}.im-camera-optics-labels span:nth-child(2){text-align:center}.im-camera-optics-labels span:last-child{text-align:end}.im-camera svg{width:100%;height:auto;display:block;overflow:visible}.im-camera-optics{max-width:46rem;margin-inline:auto}.im-camera-axis{stroke:var(--muted);stroke-width:1px;stroke-dasharray:4 6}.im-camera-lens{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2px}.im-camera-aperture{stroke:var(--text);stroke-width:7px}.im-camera-focus-plane{stroke:var(--muted);stroke-dasharray:4 5;stroke-width:1.5px}.im-camera-sensor-plane{stroke:var(--blue);stroke-width:4px}.im-camera-ray{fill:none;stroke:var(--rust);stroke-width:2px;opacity:.8}.im-camera-ray-extension{stroke-dasharray:4 4;opacity:.45}.im-camera-hit-plane{stroke:var(--rust);stroke-width:7px;stroke-linecap:round}.im-camera-focus-point{fill:var(--text)}.im-camera-source[aria-disabled=false]{cursor:pointer}.im-camera-source>circle:not(.im-camera-hit){fill:var(--panel);stroke:var(--text);stroke-width:2px}.im-camera-source.is-selected>circle:not(.im-camera-hit){fill:var(--rust-soft);stroke:var(--rust);stroke-width:3px}.im-camera-hit{fill:#0000;stroke:none}.im-camera-source text,.im-camera-spot-number{fill:var(--text);-webkit-user-select:none;user-select:none;font-size:20px;font-weight:600}.im-camera-diagram-note{fill:var(--muted);font-size:16px}.im-camera-observation{background:var(--accent-soft);border:1px solid var(--edge);border-radius:.4rem;margin-block:.2rem 1rem;padding:.6rem .8rem;font-size:.85rem}.im-camera-readout{grid-template-columns:minmax(0,1fr) minmax(7rem,.75fr) minmax(0,1fr);align-items:center;gap:.75rem;max-width:44rem;margin-inline:auto;display:grid}.im-camera-readout figure{min-width:0;margin:0}.im-camera-readout figcaption{min-height:2.8em;margin-bottom:.5rem;font-size:.8rem;line-height:1.35}.im-camera-sensor-background{fill:#111}.im-camera-conversion{text-align:center;font-size:.78rem;line-height:1.5}.im-camera-conversion p{margin-block:.2rem .5rem}.im-camera-arrow{color:var(--accent);font-size:1.8rem}.im-camera-pixel{stroke:#777;stroke-width:.5px}.im-camera-grid [role=button][aria-disabled=false]{cursor:pointer}.im-camera-optical-footprint,.im-camera-contributor{fill:none;stroke:var(--rust);stroke-width:1.8px;pointer-events:none}.im-camera-cell-selection{fill:none;stroke:#65baff;stroke-width:3px;pointer-events:none}.im-camera-source:focus-visible,.im-camera-grid [role=button]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.im-camera-legend{color:var(--muted);flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.8rem;font-size:.75rem;display:flex}.im-camera-legend>span{align-items:center;gap:.4rem;display:inline-flex}.im-camera-legend i{border:2px solid;width:.7rem;height:.7rem}.im-camera-light-key{color:var(--rust)}.im-camera-cell-key{color:#65baff}.im-camera-signal{border:1px solid var(--control-edge);background:var(--panel);font-variant-numeric:tabular-nums;border-radius:.45rem;padding:.7rem .85rem;font-size:.85rem}.im-camera details{border-top:1px solid var(--edge);margin-top:1rem}.im-camera summary{cursor:pointer;min-height:2.75rem;color:var(--accent);padding-block:.65rem;font-weight:600}.im-camera details p{color:var(--muted);font-size:.85rem}@media (max-width:600px){.im-camera-controls{grid-template-columns:1fr}.im-camera-readout{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.im-camera-conversion{text-align:start;grid-area:2/1/auto/-1;align-items:center;gap:.6rem;display:flex}.im-camera-conversion strong{display:none}.im-camera-optics-labels,.im-camera-readout figcaption{font-size:.72rem}}.cs-story{--cs-check-a:#a6a6ad;--cs-check-b:#e3e3e7;min-width:0;padding:clamp(1rem,2vw,1.5rem)}.cs-story *{min-width:0}.cs-heading{align-items:center;gap:1rem;display:flex}.cs-heading h3{margin:0 0 .4rem}.cs-heading p{margin:0}.cs-selected{border:1px solid var(--edge);border-radius:.6rem;flex:0 0 3.5rem;height:3.5rem}.cs-presets{flex-wrap:wrap;gap:.5rem;margin:1rem 0;display:flex}.cs-story button{font:inherit;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.cs-preset{border:1px solid var(--control-edge);background:var(--panel);border-radius:.5rem;align-items:center;gap:.5rem;min-height:2.75rem;padding:.4rem .65rem;display:inline-flex}.cs-preset>span{border:1px solid var(--edge);border-radius:50%;width:1.2rem;height:1.2rem}.cs-story button:hover{border-color:var(--accent)}.cs-story :focus-visible{outline:2px solid var(--blue);outline-offset:3px}.cs-instruction,.cs-small{color:var(--muted);font-size:.84rem;line-height:1.5}.cs-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start;gap:1rem;display:grid}.cs-card{border:1px solid var(--edge);border-radius:.65rem;padding:.9rem}.cs-card-heading{grid-template-columns:1fr 7rem;align-items:center;gap:.5rem;display:grid}.cs-card h4{margin:0;font-size:1rem;line-height:1.4}.cs-card p{margin:.6rem 0;font-size:.87rem;line-height:1.55}.cs-shape{width:7rem;height:6rem;overflow:visible}.cs-shape path,.cs-shape ellipse{fill:none;stroke:var(--text);stroke-width:1.2px}.cs-shape .cs-shape-back{stroke:var(--muted);stroke-dasharray:3 3;opacity:.6}.cs-shape .cs-shape-slice{stroke:var(--accent);fill:var(--accent-soft);stroke-width:1.6px}.cs-shape circle{fill:var(--text);stroke:var(--panel);stroke-width:1.2px}.cs-shape text{fill:var(--muted);font-size:10px}.cs-coordinates{text-align:center;font-variant-numeric:tabular-nums;padding:.35rem 0;font:600 .9rem/1.5 ui-monospace,monospace;display:block}.cs-plane{touch-action:none;width:100%;max-height:19rem;display:block}.cs-plane-bg{fill:var(--cs-check-b)}.cs-plane text{fill:var(--muted);font:11px sans-serif}.cs-plane-axes{fill:none;stroke:var(--text);stroke-width:.8px}.cs-plane-marker{pointer-events:none}.cs-plane-marker circle:first-child{fill:none;stroke:#fff;stroke-width:3px}.cs-plane-marker circle:last-child{fill:none;stroke:#17171a;stroke-width:2px}.cs-plane [data-cs-hit]{cursor:crosshair}.cs-depth{margin:.5rem 0 0;display:block}.cs-depth>span{justify-content:space-between;gap:.5rem;font-size:.85rem;display:flex}.cs-depth output{font-variant-numeric:tabular-nums}.cs-depth input{width:100%;min-height:2.75rem;accent-color:var(--accent);margin:0}.cs-gamut{border-left:3px solid var(--accent);background:var(--accent-soft);padding:.65rem .9rem;font-size:.88rem}.cs-story[data-cs-in-gamut=false] .cs-gamut{border-left-style:dashed}.cs-observation{padding-top:.6rem}.cs-observation h4{margin:.5rem 0}.cs-comparison{flex-wrap:wrap;gap:.6rem;display:flex}.cs-reference{background:var(--panel);border:1px solid var(--control-edge);text-align:left;border-radius:.5rem;grid-template-rows:auto auto;grid-template-columns:2rem 1fr;column-gap:.65rem;padding:.6rem .8rem;display:grid}.cs-reference>span:first-child{border:1px solid var(--edge);border-radius:.35rem;grid-row:1/3;align-self:center;width:2rem;height:2rem}.cs-reference>span:last-child{color:var(--muted);font-size:.8rem}.cs-observation p,.cs-conversion p{font-size:.9rem;line-height:1.6}.cs-conversion{border:1px solid var(--edge);border-radius:.5rem;margin-top:1rem;padding:.8rem}.cs-conversion summary{cursor:pointer;min-height:1.5rem;font-weight:600}.cs-conversion-values{flex-wrap:wrap;gap:.75rem 1.5rem;padding-left:1.4rem;display:flex}.cs-conversion-values li{padding-left:.1rem;font-size:.85rem}.cs-conversion-values output{font:.85rem/1.8 ui-monospace,monospace;display:block}@media (max-width:500px){.cs-heading{align-items:flex-start;gap:.7rem}.cs-selected{flex-basis:2.75rem;height:2.75rem}.cs-card-heading{grid-template-columns:1fr 6rem}.cs-shape{width:6rem}}.cp-primer{color:var(--text);background:var(--panel);border:1px solid var(--edge);border-radius:.65rem;padding:1rem}.cp-primer section+section{border-top:1px solid var(--edge);margin-top:2.5rem;padding-top:1.5rem}.cp-primer h3,.cp-primer h4{margin:1.5rem 0 .6rem}.cp-primer p{line-height:1.6}.cp-primer figure{min-width:0;margin:0}.cp-primer figcaption{margin-bottom:.65rem;line-height:1.4}.cp-options{border:0;flex-wrap:wrap;gap:.5rem;min-width:0;margin:1rem 0;padding:0;display:flex}.cp-options legend{margin-bottom:.5rem;font-weight:650}.cp-primer button{font:inherit;border:1px solid var(--edge);background:var(--paper);min-height:44px;color:var(--text);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:.5rem;padding:.55rem .75rem}.cp-primer button:hover{border-color:var(--accent)}.cp-primer button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 -2px var(--accent)}.cp-primer button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.cp-primer button:disabled{cursor:default}.cp-rle-flow{grid-template-columns:1fr;align-items:center;gap:.7rem;display:grid}.cp-transform{text-align:center;color:var(--muted);font-size:1.5rem}.cp-byte-row{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;display:grid}.cp-byte-row>span{text-align:center;border:1px solid var(--edge);background:var(--paper);min-width:0;color:var(--text);border-top:9px solid rgb(var(--cp-value), var(--cp-value), var(--cp-value));padding:.65rem 0;font:.8rem ui-monospace,monospace}.cp-byte-row>span[data-selected=true]{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)}.cp-runs,.cp-tokens{flex-wrap:wrap;gap:.4rem;display:flex}.cp-runs button{align-items:center;gap:.4rem;display:flex}.cp-runs button strong{font-weight:650}.cp-conclusion{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 .3rem .3rem 0;padding:.55rem .8rem}.cp-predictors button{text-align:left;flex-direction:column;gap:.15rem;display:flex}.cp-predictors button span{color:var(--muted);font-size:.8rem}.cp-png-flow{grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:1.1rem;display:grid}.cp-primer .cp-image-input{border:1px solid var(--edge);background:0 0;border-radius:.3rem;width:100%;padding:0;display:block}.cp-image-input svg,.cp-decoded-grid{width:100%;height:auto;max-height:15rem;font:10px ui-monospace,monospace;display:block}.cp-primer svg text{text-anchor:middle;pointer-events:none}.cp-primer svg [data-neighbour=true] rect{stroke:var(--accent);stroke-width:2px;stroke-dasharray:4 2}.cp-primer svg [data-selected=true] rect{stroke:#d7693c;stroke-width:3px}.cp-help{color:var(--muted);font-size:.85rem;line-height:1.45!important}.cp-calculation{border:1px solid var(--edge);background:var(--paper);border-radius:.5rem;min-width:0;padding:.85rem}.cp-calculation p{margin:.55rem 0}.cp-neighbours{flex-wrap:wrap;gap:.4rem;font:.9rem ui-monospace,monospace;display:flex}.cp-neighbours span{border:1px dashed var(--accent);border-radius:.3rem;padding:.25rem .4rem}.cp-equation{overflow-wrap:anywhere;font:1rem ui-monospace,monospace}.cp-residuals{margin-top:1rem!important}.cp-residual-row{border:1px solid #0000;grid-template-columns:repeat(9,minmax(0,1fr));max-width:32rem;padding:.15rem;display:grid}.cp-residual-row[data-selected=true]{border-color:var(--edge);background:var(--paper);border-radius:.3rem}.cp-residual-row span{text-align:center;min-width:0;padding:.4rem .15rem;font:.85rem ui-monospace,monospace}.cp-residual-row span[data-filter=true]{border-right:2px solid var(--edge);color:var(--muted)}.cp-residual-row span[data-selected=true]{outline-offset:-2px;border-radius:.2rem;outline:2px solid #d7693c}.cp-residual-row span[data-token-current=true]{background:var(--accent-soft);box-shadow:inset 0 -2px var(--accent)}.cp-residual-row span[data-token-reference=true]{border-top:2px dashed var(--accent)}.cp-token-detail{background:var(--paper);border:1px solid var(--edge);border-radius:.5rem;margin-top:.8rem;padding:.7rem .85rem}.cp-token-detail p:first-child{overflow-wrap:anywhere;margin-top:0}.cp-token-detail code{overflow-wrap:anywhere;letter-spacing:.08em;font:1rem ui-monospace,monospace;display:block}.cp-primer details{border:1px solid var(--edge);background:var(--paper);border-radius:.5rem;margin:1rem 0}.cp-primer summary{cursor:pointer;padding:.8rem;font-weight:600}.cp-primer summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cp-file-parts{padding:0 .85rem .85rem}.cp-file-parts dl{margin:.3rem 0}.cp-file-parts dl div{border-bottom:1px solid var(--edge);justify-content:space-between;gap:.7rem;padding:.3rem 0;display:flex}.cp-file-parts dd{font-variant-numeric:tabular-nums;margin:0}.cp-jpeg-pipeline{padding-left:1.5rem}.cp-jpeg-pipeline li{margin-bottom:1.1rem;padding-left:.35rem;line-height:1.6}.cp-jpeg-pipeline li>strong,.cp-jpeg-pipeline li>span{display:block}.cp-ycc,.cp-quantize{flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.7rem;display:flex}.cp-ycc span,.cp-quantize span,.cp-quantize strong{border:1px solid var(--edge);border-radius:.35rem;padding:.45rem .65rem;font:.85rem ui-monospace,monospace}.cp-quantize strong{background:var(--accent-soft);font-weight:700}.cp-subsampling{align-items:center;gap:.6rem;margin-top:.7rem;display:flex}.cp-subsampling div{grid-template-columns:repeat(2,1fr);gap:2px;display:grid}.cp-subsampling i,.cp-subsampling b{border:1px solid var(--edge);background:var(--accent-soft);border-radius:.25rem;padding:.5rem;font:.85rem ui-monospace,monospace}@media (min-width:1150px){.cp-rle-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr) auto minmax(0,1fr)}.cp-png-flow{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr)}}@media (min-width:700px) and (max-width:1149px){.cp-png-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cp-png-flow>figure:last-child{grid-column:1}.cp-calculation{grid-area:1/2/span 2}}.im-conv-diagrams{gap:1rem;margin-block:1.2rem;display:grid}.im-conv-diagrams figure,figure.im-conv-offset-diagram{border:1px solid var(--edge);background:var(--panel);border-radius:.8rem;min-width:0;margin:0;padding:1rem}.im-conv-diagrams figcaption{margin-bottom:1rem;font-weight:650}.im-conv-diagrams p{margin:.8rem 0 0;font-size:.9rem}.im-conv-pixel-flow{grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;display:grid}.im-conv-pixel-stage{align-content:center;justify-items:center;gap:.4rem;width:100%;min-width:0;display:grid}.im-conv-stage-title,.im-conv-slice-title,.im-conv-stage-note{text-align:center;font-size:.8rem;display:block}.im-conv-stage-title{font-weight:600}.im-conv-slice-title{font-family:var(--font-mono,monospace);margin-bottom:.25rem}.im-conv-slices{justify-content:center;align-items:start;gap:.3rem;width:100%;min-width:0;display:flex}.im-conv-slices>div{flex:1 1 0;min-width:0}.im-conv-pixel-grid{--cell-size:2rem;grid-template-columns:repeat(var(--columns), minmax(0, 1fr));width:min(100%, calc(var(--columns) * var(--cell-size)));gap:1px;margin-inline:auto;display:grid}.im-conv-pixel{box-sizing:border-box;border:1px solid var(--edge);background:var(--shade);width:100%;min-width:0;min-height:0;color:var(--text);font:.7rem var(--font-mono,monospace);font-variant-numeric:tabular-nums;isolation:isolate;place-items:center;line-height:1;display:block;position:relative}.im-conv-pixel:before{content:"";background:var(--accent);width:100%;height:0;opacity:calc(var(--tone,0) * .3);padding-bottom:100%;display:block}.im-conv-value{place-items:center;display:grid;position:absolute;inset:0}.im-conv-sampled{border:2px solid var(--rust);z-index:1}.im-conv-result{border:2px solid var(--accent);font-weight:700}.im-conv-weight{background:var(--panel)}.im-conv-muted-pixel{opacity:.4}.im-conv-pixel-stage:last-child .im-conv-pixel-grid{--cell-size:2.1rem}.im-conv-arrow{font-size:1.1rem}.im-conv-offset-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.im-conv-offset-case h4{text-align:center;margin:0 0 .6rem;font-size:.9rem}.im-conv-offset-answer{font:.85rem var(--font-mono,monospace);justify-content:center;align-items:center;gap:.5rem;margin-top:.7rem;display:flex}.im-conv-offset-answer .im-conv-pixel{flex:0 0 2rem;width:2rem;font-size:.9rem}@media (max-width:680px){.im-conv-pixel-flow{grid-template-columns:1fr;gap:.5rem}.im-conv-pixel-flow>.im-conv-arrow{justify-self:center;transform:rotate(90deg)}.im-conv-slices{max-width:21rem}.im-conv-offset-cases{grid-template-columns:1fr;gap:1.2rem}}