.optics-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin-bottom:14px}.optics-controls label{display:grid;grid-template-columns:1fr auto;min-width:0;font-size:16px;gap:5px}.optics-controls input[type=range],.optics-controls select{grid-column:1/-1;width:100%;min-width:0;accent-color:var(--accent);font:inherit;color:var(--ink);background:var(--paper)}.optics-controls label:has(input[type=checkbox]){display:flex;align-items:center}.optics-controls button{font-size:16px}.optics-lab canvas{display:block;width:100%;max-width:1100px;image-rendering:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line)}.optics-result{display:block;white-space:pre-wrap;font:16px/1.5 "Segoe UI",sans-serif;margin:14px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.optics-note{font-size:14px;color:var(--muted);line-height:1.5}.optics-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;margin:10px 0}.optics-legend span{border-bottom:3px solid;padding-bottom:2px}.optics-legend .primary{border-color:#c37600}.optics-legend .shadow{border-color:#15974c}.optics-legend .reflected{border-color:#ac419a}.optics-legend .transmitted{border-color:#247de0}.optics-lab:not([data-optics=ray2d]) .shadow{display:none}.optics-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}.optics-gallery img{width:100%;height:auto;max-height:45vh}.optics-gallery figcaption{font-size:15px}.workshop-page .slide{min-height:0;padding-top:35px}.workshop-page main{padding-bottom:40px}.workshop-page h1{font-size:42px}.workshop-page .eyebrow{display:none}
@media(min-width:1101px){.slide:has(>.optics-lab:not([data-optics=ray2d])){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 30px;align-content:start;align-items:start}.slide:has(>.optics-lab)>.eyebrow,.slide:has(>.optics-lab)>h2{grid-column:1/-1}.slide:has(>.optics-lab)>.content{grid-column:1;grid-row:3;font-size:24px}.slide:has(>.optics-lab)>.optics-lab:not([data-optics=ray2d]){grid-column:2;grid-row:3/span 6;margin:0;padding:0;border:0}.slide:has(>.optics-lab)>.brdf-references,.slide:has(>.optics-lab)>.related-example{grid-column:1}.slide:has(>.optics-lab) .tex-equation{font-size:23px}.optics-lab:not([data-optics=ray2d]) .optics-controls{grid-template-columns:1fr 1fr}.presenting .slide:has(>.optics-lab){padding-block:20px}.presenting .slide:has(>.optics-lab)>.eyebrow{margin-bottom:12px}.presenting .slide:has(>.optics-lab)>h2{margin-bottom:18px}}
@media(max-width:760px){.optics-controls{grid-template-columns:1fr 1fr}.optics-controls label{font-size:14px}.optics-gallery{grid-template-columns:1fr}.optics-gallery img{max-height:none}.optics-result{font-size:14px}.optics-legend{gap:10px}}
@media print{.optics-controls{display:none}.optics-lab canvas{color:#172d3b;background:white;--line:#aab7be;max-height:100mm;width:auto}.optics-gallery img{max-height:80mm}.optics-note{font-size:11px}.slide:has(>.optics-lab){display:block!important}}
.presenting .optics-gallery img{max-height:34vh;object-fit:contain}
@media(min-width:1101px){.optics-lab[data-optics=ior] .optics-controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
.optics-assumptions{font-size:14px}.optics-assumptions summary{min-height:32px;padding:5px 0;cursor:pointer}
.optics-lab[data-optics=reflection] .transmitted{display:none}
@media(min-width:1101px){.optics-lab:not([data-optics=ray2d]) canvas{max-width:690px}.presenting .slide:has(>.optics-lab){padding-block:16px}.presenting .slide:has(>.optics-lab)>h2{margin-bottom:14px}}
.presenting .slide:has(>.optics-gallery),.presenting:has(#reflection-vector) #slide-19{padding-block:24px;line-height:1.4}
.presenting .slide:has(>.optics-gallery)>.eyebrow,.presenting:has(#reflection-vector) #slide-19>.eyebrow{margin-bottom:12px}
.presenting .slide:has(>.optics-gallery)>h2,.presenting:has(#reflection-vector) #slide-19>h2{margin-bottom:18px}
.presenting .slide:has(>.optics-gallery) li,.presenting:has(#reflection-vector) #slide-19 li{margin-bottom:.3em}
.presenting .slide:has(>.optics-gallery)>.brdf-references,.presenting:has(#reflection-vector) #slide-19>.brdf-references{margin-block:12px}