.optics .stage{border:1px solid var(--color-border-light);background:var(--color-surface-light);border-radius:1rem;margin:0;overflow:hidden}.optics .stage svg{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;display:block}.optics .axis{stroke:#b9ae7c;stroke-width:1.5px}.optics .mark circle{fill:var(--color-text-light)}.optics .mark text{text-anchor:middle;fill:var(--color-muted-light);font:600 14px Space Grotesk,sans-serif}.optics{--ray1:#b85c50;--ray2:#5e8f5f;--ray3:#5877a8;--image:#8a6aa8}.optics .lens{fill:#7896be29;stroke:#8aa2c4;stroke-width:1.8px}.optics .ray{fill:none;stroke-width:2px;stroke-linecap:round}.optics .ray.back{stroke-dasharray:6 6;stroke-width:1.6px;opacity:.75}.optics .r1{stroke:var(--ray1)}.optics .r2{stroke:var(--ray2)}.optics .r3{stroke:var(--ray3)}.optics .arrow line{stroke:currentColor;stroke-width:4px}.optics .arrow path{fill:currentColor}.optics .arrow.dashed line{stroke-dasharray:8 6}.optics .image{color:var(--image)}.optics .label{text-anchor:middle;fill:#4a4530;pointer-events:none;font:600 14px Space Grotesk,sans-serif}.optics .image-label{fill:var(--image)}.optics .object{cursor:var(--cursor-grab);outline:none}.optics .object .arrow{color:#4a4530}.optics .object .handle{fill:var(--color-primary);stroke:var(--color-text-light);stroke-width:2px}.optics .object:focus-visible .handle{stroke-width:4px;r:12}.optics .object.dragging{cursor:var(--cursor-grabbing)}.optics .equation{margin:.5rem 0;font-size:1.15rem}.optics .readout{font-variant-numeric:tabular-nums;gap:.75rem;margin-top:1rem;display:grid}.optics .what{font-size:1.05rem;line-height:1.5;display:grid}.optics .what p{visibility:hidden;grid-area:1/1;margin:0}.optics .what p.shown{visibility:visible}.optics .readout dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem 1.5rem;margin:0;display:grid}.optics .readout dl div{flex-direction:column;display:flex}.optics .readout dt{color:var(--color-muted-light);font-size:.85rem}.optics .readout dd{white-space:nowrap;margin:0;font-weight:700}@media (width<=640px){.optics .readout dl{grid-template-columns:1fr;gap:.35rem}.optics .readout dl div{flex-direction:row;align-items:baseline;gap:.5rem}}.optics .setting{gap:.25rem;max-width:34rem;font-size:.95rem;display:grid}.optics .setting .hint{color:var(--color-muted-light);font-size:.85rem;display:inline-block}.optics .setting input{accent-color:var(--color-primary);width:100%}.optics .more summary{cursor:pointer;font-weight:700}.optics .key{vertical-align:middle;border-radius:2px;width:18px;height:3px;margin-right:6px;display:inline-block}.optics .key.r1{background:var(--ray1)}.optics .key.r2{background:var(--ray2)}.optics .key.r3{background:var(--ray3)}.optics .exhibit{border:1px solid var(--color-border-light);background:var(--color-surface-light);border-radius:999px;padding:.4rem .9rem;font-size:.9rem;font-weight:600;display:inline-block}.optics .exhibit:hover{border-color:var(--color-text-light)}@media (prefers-reduced-motion:no-preference){.optics .object .handle{transition:r .15s}}.optics .mirror{fill:none;stroke:#7f93ad;stroke-width:3px;stroke-linecap:round}.optics .mirror-back{fill:none;stroke:#aab6c6;stroke-width:1.2px}.optics .readout dl.four{grid-template-columns:repeat(4,minmax(0,1fr))}@media (width<=640px){.optics .readout dl.four{grid-template-columns:1fr}}.optics .pills{border:0;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;padding:0;font-size:.95rem;display:flex}.optics .pills legend{float:left;color:var(--color-muted-light);margin-right:.4rem;font-size:.85rem}.optics .pills label{border:1px solid var(--color-border-light);background:var(--color-surface-light);cursor:pointer;border-radius:999px;padding:.25rem .75rem}.optics .pills label.on{border-color:var(--color-text-light);font-weight:600}.optics .pills label:has(input:focus-visible){outline:2px solid var(--color-text-light);outline-offset:2px}.optics .pills input{opacity:0;pointer-events:none;position:absolute}