.lens-figure{margin:0;padding:22px}
.lens-figure svg{display:block;width:100%;height:auto}
.lens-figure figcaption{color:var(--on-body-muted);font:14px/1.5 var(--sans);margin:10px 0 0}
.lens-figure figcaption a{color:inherit}
.lens-subhead{margin:42px 0 18px}
.lens-exterior{margin-top:0}
.lens-infographic-scroll{overflow-x:auto;overscroll-behavior-inline:contain;border-radius:10px}
.lens-infographic-scroll:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.lens-exterior img{display:block;width:100%;min-width:900px;height:auto}
.lens-anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0 0}
.lens-anatomy p{margin:0}
.lens-lab{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:32px;align-items:start;margin:30px 0}
.lens-lab .control{border-top:1px solid var(--rule)}
.lens-lab-view{padding:18px}
.lens-lab-view svg{display:block;width:100%;height:auto}
.lens-result{font:800 24px var(--sans);color:var(--amber);margin:8px 0}
.aperture-figure{margin:28px 0;background:var(--paper-2);border-radius:20px;padding:22px}
.aperture-pair{display:flex;justify-content:center;gap:clamp(24px,8vw,110px);font-family:var(--sans);text-align:center}
.aperture-pair>div{display:grid;justify-items:center;gap:5px}
.aperture-pair strong{font-size:22px}
.aperture-pair small{font-size:14px;color:var(--muted)}
.aperture-disc{width:130px;height:130px;background:var(--body);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 10px #4b5255}
.aperture-disc span{display:block;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px #e7e9e4}
.aperture-disc.wide span{width:78px;height:78px}
.aperture-disc.narrow span{width:20px;height:20px}
.aperture-figure figcaption{max-width:60em;margin:16px auto 0;text-align:center;font:14px/1.5 var(--sans);color:var(--muted)}
.lens-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lens-cards article{padding:22px;border:1px solid var(--rule);border-radius:16px;background:var(--paper-2)}
.lens-cards article p{margin:0}
.lens-cards article p+p{margin-top:12px}
.lens-cards h4,.lens-type h4,.lens-converter h4{font:800 24px/1.15 var(--sans);margin:0 0 14px}
.lens-type-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lens-type{grid-column:span 2;padding:22px;border:1px solid var(--rule);border-radius:16px}
.lens-type:nth-child(4),.lens-type:nth-child(5){grid-column:span 3}
.lens-type p{margin:0 0 12px}
.lens-type p:last-child{margin-bottom:0}
.lens-range{font:700 13px/1.4 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lens-converter{margin:18px 0 0;padding:20px 22px;border-left:4px solid var(--amber);background:var(--paper-2);border-radius:0 14px 14px 0}
.lens-converter h4{font-size:19px;margin-bottom:6px}
.lens-converter p{margin:0;max-width:60em}
.lens-steps{max-width:55em}
.lens-steps li{margin-bottom:8px}
.lens-sources ol{max-width:62em;padding-left:24px;font-family:var(--sans);font-size:15px;line-height:1.55}
.lens-sources li{margin:0 0 12px}
@media(max-width:900px){.lens-anatomy{grid-template-columns:1fr}.lens-type{grid-column:span 3}.lens-type:nth-child(4),.lens-type:nth-child(5){grid-column:span 3}}
@media(max-width:760px){.lens-lab{grid-template-columns:1fr;gap:16px}.lens-cards{grid-template-columns:1fr}.lens-figure{padding:10px}.aperture-disc{width:100px;height:100px}.aperture-disc.wide span{width:60px;height:60px}.aperture-disc.narrow span{width:15px;height:15px}.lens-type-grid{display:block}.lens-type{margin-bottom:12px}}