.cam-figure{--cam-light:#f5a300;--cam-light-edge:#d98c00;--cam-die:#262b35;--cam-grid:#8a93a3;--cam-blade:#2b2f36;--cam-blade-edge:#5d6470;--cam-curtain:#23262c;--cam-slat:#4a4f58}.cam-figure .cam-svg{touch-action:pan-y}.cam-figure .cam-die{fill:var(--cam-die)}.cam-figure .cam-grid{fill:none;stroke:var(--cam-grid);stroke-opacity:.4;stroke-width:.35px}.cam-figure .cam-glass>.iso-fill{fill:#eef5fa;fill-opacity:.72}.cam-figure .cam-glass>.iso-shade,.cam-figure .cam-glass>.iso-top{fill-opacity:.72;stroke-opacity:.72}.cam-figure .cam-glass>.iso-top{fill:#f6fafd}.cam-figure .cam-glass>.iso-shade{fill:#e4eef5;stroke:#e4eef5}.cam-figure .cam-glass>.iso-shade[data-shade="3"]{fill:#eef5f9;stroke:#eef5f9}.cam-figure .cam-subject>.iso-fill{fill:#ffd23f}.cam-figure .cam-subject>.iso-top{fill:#ffe27a}.cam-figure .cam-subject>.iso-shade[data-shade="0"]{fill:#e8a800}.cam-figure .cam-subject>.iso-shade[data-shade="1"]{fill:#f0b400}.cam-figure .cam-subject>.iso-shade[data-shade="2"]{fill:#f7c21c}.cam-figure .cam-subject>.iso-shade[data-shade="3"]{fill:#ffcc2e}.cam-figure .cam-ray{fill:var(--cam-light);fill-opacity:.13;stroke:none}.cam-figure .cam-ray-edge{fill:none;stroke:var(--cam-light-edge);stroke-width:.6px;stroke-opacity:.6;vector-effect:non-scaling-stroke}.cam-figure .cam-blade{fill:var(--cam-blade);fill-rule:evenodd}.cam-figure .cam-blade-edge{fill:none;stroke:var(--cam-blade-edge);stroke-width:.5px;vector-effect:non-scaling-stroke}.cam-figure .cam-curtain{fill:var(--cam-curtain)}.cam-figure .cam-slat{fill:none;stroke:var(--cam-slat);stroke-width:.5px;vector-effect:non-scaling-stroke}.cam-figure .cam-data{fill:none;stroke:none}.cam-figure .cam-data[data-on]{stroke:var(--cam-light-edge);stroke-width:3px;stroke-linecap:round;stroke-dasharray:7 400;vector-effect:non-scaling-stroke}.cam-figure .cam-target{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:0;min-width:40px;min-height:40px;position:absolute;transform:translate(-50%,-50%)}.cam-figure .cam-target[data-kind=lens]{cursor:ew-resize;touch-action:none}.cam-figure .cam-target:hover,.cam-figure .cam-target:focus-visible{outline:1.5px dashed var(--anatomy-mid);outline-offset:2px}.cam-figure .cam-target:focus{outline-offset:2px}.cam-figure .cam-target:focus:not(:focus-visible):not(:hover){outline:none}.cam-figure .cam-stage{cursor:grab;position:relative;overflow:hidden}.cam-figure .cam-stage[data-dragging]{cursor:grabbing}.cam-figure .cam-stage[data-dragging] .cam-target{pointer-events:none}.cam-zoom{z-index:4;gap:6px;display:flex;position:absolute;top:10px;right:10px}.cam-zoom button{color:#44403c;min-width:32px;height:32px;font:500 18px/1 var(--font-sans), sans-serif;cursor:pointer;background:#ffffffeb;border:1px solid #e7e5e4;border-radius:0;place-items:center;padding:0 8px;transition:background .2s;display:grid}.cam-zoom button:hover{background:#f5f5f4}.cam-zoom .cam-zoom-reset{font-size:13px;display:none}.cam-stage[data-moved] .cam-zoom .cam-zoom-reset{display:grid}@media (max-width:560px){.cam-figure .iso-plate{overflow:hidden}.cam-figure .cam-stage{margin:0 -10%}}.cam-figure,.cam-part{--cam-focus:#1a1a1a}.cam-figure .iso-plate{box-shadow:none;--anatomy-paper:#fff;background:0 0;padding:8px 0 40px}.cam-figure .iso-plate-corners{height:14px;inset:auto 0 6px}.cam-close .iso-plate{padding:0}.cam-close .iso-plate-corners{z-index:3;inset:10px 4px auto}.cam-close .iso-plate-corner[data-corner=readout]{top:0;bottom:auto}.cam-close .cam-stage{margin:0;overflow:hidden}.cam-close .iso-svg{overflow:hidden}.cam-close .cam-stage:after{content:"";pointer-events:none;z-index:2;background:linear-gradient(90deg,#fff,#0000 9% 91%,#fff),linear-gradient(#fff,#0000 9% 91%,#fff);position:absolute;inset:0}.cam-part-title{color:#1a1a1a;letter-spacing:-.01em;margin:0 0 28px;font-size:24px;font-weight:700}.cam-part-title span{color:#78716c;letter-spacing:0;margin-left:6px;font-size:17px;font-weight:400}.cam-screen{z-index:3;pointer-events:none;justify-items:center;gap:4px;width:17%;min-width:72px;display:grid;position:absolute;bottom:8%;right:4%}.cam-screen svg{background:#000;border:3px solid #1f2125;border-radius:0;width:100%;height:auto;display:block}.cam-screen span{color:#78716c;font:500 10.5px/1 var(--font-sans), sans-serif}.cam-explain{max-width:700px;margin:28px auto 0}.cam-about{color:#44403c;font:400 17px/1.7 var(--font-sans), sans-serif;margin:0 0 14px}.cam-try{color:var(--cam-focus);font:500 14px/1.4 var(--font-sans), sans-serif;margin:4px 0 0}@media (max-width:560px){.cam-figure:not(.cam-close) .iso-plate{padding-bottom:54px}.cam-figure:not(.cam-close) .iso-plate-corners{height:34px}.cam-figure:not(.cam-close) .iso-plate-corner[data-corner=hint]{top:0;bottom:auto}.cam-part-title span{margin:2px 0 0;font-size:15px;display:block}.cam-about{font-size:15.5px}.cam-screen{width:24%}}.cam3d{--cam-focus:#1a1a1a}.cam3d-stage{position:relative}.cam3d-canvas,.cam3d-loading{height:clamp(320px,52vw,520px)}.cam3d-loading{background:radial-gradient(closest-side,#f3f4f6,#fff);border-radius:0}.cam3d-canvas canvas{cursor:grab}.cam3d-canvas canvas:active{cursor:grabbing}.cam3d-label{z-index:2;max-width:220px;font:400 13px/1.4 var(--font-sans), sans-serif;color:#57534e;opacity:0;pointer-events:none;background:#fff;border-radius:0;gap:2px;padding:8px 12px;transition:opacity .25s;display:grid;position:absolute;transform:translate(-50%,calc(-100% - 12px));box-shadow:0 8px 24px -8px #0003,0 0 0 1px #0000000d}.cam3d-label strong{color:var(--cam-focus);font-size:14px}.cam3d-label a{pointer-events:auto;color:var(--cam-focus);font-weight:600}.cam3d-controls{justify-items:center;gap:12px;margin-top:8px;display:grid}.cam3d-switches,.cam3d-parts{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.cam3d-controls button{color:#44403c;font:500 14px/1.2 var(--font-sans), sans-serif;cursor:pointer;background:#fff;border:1px solid #e7e5e4;border-radius:0;padding:7px 14px;transition:all .2s}.cam3d-controls button:hover{border-color:var(--cam-focus);color:#1a1a1a;border-color:#1a1a1a}.cam3d-controls button[aria-pressed=true]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}.cam3d-switches button{font-weight:600}.cam3d-fallback{text-align:center;color:#78716c;padding:24px}.lens-explorer .lens-stage{cursor:default;margin:0}.lens-screen{z-index:3;pointer-events:none;justify-items:center;gap:5px;width:34%;min-width:150px;display:grid;position:absolute;top:2%;right:1%}.lens-screen>div{aspect-ratio:3/2;background:#fff;border:4px solid #1f2125;border-radius:0;width:100%;overflow:hidden}.lens-screen span{color:#78716c;font:500 11px/1 var(--font-sans), sans-serif}.sc-svg{width:100%;height:100%;display:block}.sc-svg path,.sc-svg rect{vector-effect:non-scaling-stroke;stroke-width:.8px;stroke-linejoin:round}.sc-sky{fill:#f7f8f9;stroke:none}.sc-ground{fill:#fbfbfa;stroke:#b4b4b8}.sc-hill{fill:#f1f2f3;stroke:#b4b4b8}.sc-road{fill:#ededea;stroke:#b4b4b8}.sc-tree{fill:#fff;stroke:#8a8a8f}.sc-trunk,.sc-post{fill:#ededea;stroke:#8a8a8f}.sc-wall,.sc-lamp{fill:#fff;stroke:#6a6a6f}.sc-roof,.sc-stripe{fill:#dcdcd9;stroke:#6a6a6f}.sc-window{fill:#ededea;stroke:#8a8a8f}.sc-arrow{fill:#f2b600;stroke:#b88a00}@media (max-width:560px){.lens-screen{width:46%;top:0;right:0}}.lens-dial{max-width:760px;margin:6px auto 0;padding:0 14px}.lens-readout{justify-content:center;align-items:baseline;gap:12px;margin:0 0 14px;display:flex}.lens-readout strong{color:#1a1a1a;font:600 22px/1 var(--font-sans), sans-serif;font-variant-numeric:tabular-nums;text-align:right;min-width:4.2em}.lens-readout span{color:#78716c;font:400 15px/1 var(--anatomy-mono)}.lens-scale{cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;height:52px;position:relative}.lens-scale:focus-visible{border-radius:0;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #1a1a1a}.lens-scale-rule{border-top:1px solid #8a8a8f;height:14px;position:absolute;top:14px;left:0;right:0}.lens-scale-rule i,.lens-scale-rule b{width:1px;position:absolute;top:0;transform:translate(-.5px)}.lens-scale-rule i{background:#c9c9cc;height:5px}.lens-scale-rule b{background:#6a6a6f;height:10px}.lens-scale-index{pointer-events:none;background:#1a1a1a;width:2px;margin-left:-1px;transition:left 80ms linear;position:absolute;top:0;bottom:23px}.lens-scale-index:before{content:"";border:5px solid #0000;border-top:6px solid #1a1a1a;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.lens-scale-numbers{height:20px;position:absolute;top:30px;left:0;right:0}.lens-scale-numbers button{color:#8a8a8f;font:500 11.5px/1.2 var(--anatomy-mono);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:0;padding:2px 4px;position:absolute;transform:translate(-50%)}.lens-scale-numbers button:hover{color:#1a1a1a}.lens-scale-numbers button[aria-current]{color:#1a1a1a;font-weight:700}@media (max-width:560px){.lens-scale-numbers button[data-minor]{display:none}.lens-readout{flex-direction:column;align-items:center;gap:6px}.lens-readout strong{text-align:center;min-width:0}}.cam-model .cam-ghost>.iso-fill{fill:#fff;fill-opacity:.2}.cam-model .cam-ghost>.iso-shade,.cam-model .cam-ghost>.iso-top{fill-opacity:.2}.cam-model .cam-model-picture{fill:#e3b100}.cam-model [data-zone]{cursor:pointer;transition:opacity .25s}.cam-model [data-zone][data-dim]{opacity:.18}.cam-model .cam-stage{margin:0}@media (max-width:560px){.cam-model:not(.wf) .cam-stage{aspect-ratio:5/4}.cam-model:not(.wf) .cam-art,.cam-model:not(.wf) .cam-art svg{height:100%}}.cam-leader{z-index:2;pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .2s;position:absolute;inset:0;overflow:visible}.cam-leader line{stroke:#1a1a1a;stroke-width:1.5px;stroke-dasharray:2 4;stroke-linecap:round}.cam-leader circle{fill:#1a1a1a;stroke:#fff;stroke-width:2px}.cam3d-label.cam-model-label{box-shadow:none;border:1px solid #d6d3d1;transform:none}.cam3d-label.cam-model-label strong{color:#1a1a1a}.cam3d-label.cam-model-label a{color:#1a1a1a;text-underline-offset:3px;text-decoration:underline}.wf .wf-wire{fill:none;stroke:#6a6a6f;stroke-width:1.2px;stroke-linecap:round;stroke-linejoin:round}.wf .wf-pulse{fill:none;stroke:none}.wf .wf-pulse[data-on]{stroke:#f2b600;stroke-width:3px;stroke-linecap:round;stroke-dasharray:10 520;animation:1.6s linear infinite wf-flow}@keyframes wf-flow{0%{stroke-dashoffset:530px}to{stroke-dashoffset:0}}.wf .wf-screen{fill:#26292f}.wf .wf-sky{fill:#e9eef4}.wf .wf-ground{fill:#f3f1ea}.wf .sc-arrow{fill:#f2b600;stroke:#b88a00}.wf .wf-light{transition:opacity .3s}.wf .wf-light[data-dim]{opacity:.25}.wf-label strong span{font:600 11px/1 var(--anatomy-mono);color:#8a8a8f;margin-right:6px}.wf-controls{justify-content:center;align-items:center;gap:10px;margin-top:10px;display:flex}.wf-controls p{text-align:center;color:#1a1a1a;min-width:190px;font:500 15px/1.3 var(--font-sans), sans-serif;margin:0}.wf-controls p span{color:#8a8a8f;font:400 14px/1 var(--anatomy-mono);margin-left:8px}.wf-controls button{color:#1a1a1a;min-width:34px;height:34px;font:500 14px/1 var(--font-sans), sans-serif;cursor:pointer;background:#fff;border:1px solid #d6d3d1;border-radius:0;place-items:center;padding:0 12px;transition:all .2s;display:grid}.wf-controls button:hover{border-color:#1a1a1a}.wf-controls .wf-play[aria-pressed=true]{color:#fff;background:#1a1a1a;border-color:#1a1a1a}@media (prefers-reduced-motion:reduce){.wf .wf-pulse[data-on]{stroke-dasharray:none;animation:none}}.wf .wf-roof>.iso-fill,.wf .wf-roof>.iso-top{fill:#d9a08e}.wf .wf-roof>.iso-shade{fill:#c9876f}.wf .wf-lantern>.iso-fill,.wf .wf-lantern>.iso-top,.wf .wf-lantern>.iso-shade{fill:#3a3d44}.wf .wf-pixels{image-rendering:pixelated}.wf-photo{max-width:600px;margin:28px auto 0}.wf-photo figcaption{color:#a8a29e;font:400 12px/1.4 var(--font-sans), sans-serif;text-align:right;margin-top:6px}.wf-photo figcaption a{color:inherit;text-underline-offset:2px;text-decoration:underline}.wf-photo-frame{aspect-ratio:3/2;background:#16181c;transition:box-shadow .4s;position:relative;overflow:hidden}.wf-photo-frame img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .5s;position:absolute;inset:0}.wf-photo-frame img[data-on]{opacity:1}.wf-photo-frame img[data-name=sensor]{filter:contrast(1.05)}.wf-photo[data-look=processor] img[data-name=final]{animation:2.8s ease-in-out infinite wf-wipe}@keyframes wf-wipe{0%,20%{clip-path:inset(0 100% 0 0)}75%,to{clip-path:inset(0)}}.wf-iris{transform-origin:50%;width:100%;height:100%;animation:2.8s ease-in-out infinite wf-iris;position:absolute;inset:0}.wf-iris path{fill:#1b1d21}@keyframes wf-iris{0%,to{transform:scale(2.1)}50%{transform:scale(.95)}}.wf-curtain{background:repeating-linear-gradient(#202227 0 15%,#2d3036 15% 16%);height:100%;position:absolute;left:0;right:0}.wf-curtain-first{animation:2.8s ease-in-out infinite wf-first;top:0}.wf-curtain-second{animation:2.8s ease-in-out infinite wf-second;top:0}@keyframes wf-first{0%,22%{transform:translateY(0)}48%,to{transform:translateY(100%)}}@keyframes wf-second{0%,40%{transform:translateY(-100%)}66%,92%{transform:translateY(0)}to{transform:translateY(0)}}.wf-zoom-in{aspect-ratio:1;width:30%;image-rendering:pixelated;background:url(/images/explainers/how-a-camera-works/sensor.webp) 52% 72%/1000% no-repeat;border:2px solid #fff;position:absolute;bottom:12px;right:12px}.wf-file{color:#1a1a1a;font:500 14px/1.3 var(--font-sans), sans-serif;background:#fff;justify-content:space-between;gap:12px;padding:10px 14px;display:flex;position:absolute;bottom:0;left:0;right:0}.wf-file span+span{color:#78716c;font-weight:400}.wf-photo[data-look=screen] .wf-photo-frame{box-shadow:0 0 0 10px #1f2125}.wf-rotate,.wf-list{display:none}.wf-list{border-top:1px solid #e7e5e4;margin:16px 0 0;padding:0;list-style:none}.wf-list li{border-bottom:1px solid #e7e5e4}.wf-list button{text-align:left;color:#57534e;align-items:flex-start;gap:12px;width:100%;padding:10px 0;display:flex}.wf-list img{object-fit:cover;opacity:.55;flex:none;width:72px;height:48px;transition:opacity .3s}.wf-list img[data-pixels]{image-rendering:pixelated}.wf-list strong{font:500 15px/1.3 var(--font-sans), sans-serif;color:#57534e;display:block}.wf-list em{font:400 14px/1.45 var(--font-sans), sans-serif;color:#44403c;margin-top:3px;font-style:normal;display:block}.wf-list button[aria-current] img{opacity:1}.wf-list button[aria-current] strong{color:#1a1a1a}@media (max-width:640px) and (orientation:portrait){.wf .wf-bench{display:none}.wf-rotate{color:#78716c;font:400 14px/1.4 var(--font-sans), sans-serif;text-align:center;margin:0 0 12px;display:block}.wf-list{display:block}.wf-photo{margin-top:0}.wf-controls{flex-wrap:wrap}.wf-controls p{order:-1;width:100%}}@media (prefers-reduced-motion:reduce){.wf-iris,.wf-curtain,.wf-photo[data-look=processor] img[data-name=final]{animation:none}.wf-curtain{display:none}}.iso[data-theme=light]{--anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;--anatomy-paper:#fbfbfa;--anatomy-face:#fff;--anatomy-top:#fff;--anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;--anatomy-lit-top:#fff;--anatomy-lit-shade:#eeeeeb;--anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000;--anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;--anatomy-weight:.6px;--anatomy-mono:var(--font-sans), sans-serif}.iso-svg{width:100%;height:auto;display:block;overflow:visible}.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}.iso-fill{fill:var(--anatomy-paper);stroke:none}.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}.iso-shade,.iso-top{stroke:none}.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}.iso-top{fill:var(--anatomy-top)}.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4px;stroke-linejoin:round}.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}.iso-line[data-tone=hi]{stroke:var(--anatomy-hi)}.iso-line[data-tone=mid]{stroke:var(--anatomy-mid)}.iso-line[data-tone=lo]{stroke:var(--anatomy-lo)}.iso-line[data-tone=faint]{stroke:var(--anatomy-faint)}.iso-line[data-tone=lit]{stroke:var(--anatomy-lit)}.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}.iso-dots[data-tone=hi] circle{opacity:.85}.iso-dots[data-tone=mid] circle{opacity:.45}.iso-dots[data-tone=lo] circle{opacity:.22}.iso-dots[data-tone=faint] circle{opacity:.12}.iso-figure{margin:0}.iso-plate{background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-lo);--anatomy-paper:var(--anatomy-card);padding:52px 24px;position:relative}.iso-plate-corners{pointer-events:none;position:absolute;inset:18px 20px}.iso-plate-corner{color:var(--anatomy-muted);font-family:var(--anatomy-mono);letter-spacing:.04em;white-space:nowrap;font-size:13px;line-height:1;position:absolute}.iso-plate-corner[data-corner=fig]{color:var(--anatomy-text);top:0;left:0}.iso-plate-corner[data-corner=title]{letter-spacing:0;top:0;right:0}.iso-plate-corner[data-corner=hint]{letter-spacing:0;bottom:0;left:0}.iso-plate-corner[data-corner=readout]{color:var(--anatomy-text);font-variant-numeric:tabular-nums;bottom:0;right:0}.iso-legend{color:var(--anatomy-muted);gap:8px;margin-top:12px;font-size:13px;line-height:1.55;display:grid}.iso-keys{flex-wrap:wrap;gap:6px 18px;display:flex}.iso-key{align-items:center;gap:7px;display:inline-flex}.iso-swatch{flex:none;width:16px;height:10px;overflow:visible}.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}@media (max-width:560px){.iso-plate{padding:44px 10px 64px}.iso-plate-corner[data-corner=hint]{bottom:22px}.iso-plate-corner[data-corner=title]{display:none}}