@font-face{font-family:DM Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/optical-playground/fonts/font-0.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/optical-playground/fonts/font-1.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/optical-playground/fonts/font-2.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/optical-playground/fonts/font-3.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:800;font-display:swap;src:url(/optical-playground/fonts/font-4.ttf) format("truetype")}:root{font-family:DM Sans,Arial,sans-serif;color:#171717;background:#f4f2ec;font-synthesis:none;--paper: #f4f2ec;--ink: #171717;--blue: #3057ff;--line: #cecec6;--muted: #66685f;--mono: "DM Sans", Arial, sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:transparent;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button{transition:color .16s,background .16s,border-color .16s}button:hover,a:hover{color:var(--blue)}button:disabled{cursor:default}header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 36px;background:var(--paper);position:sticky;top:0;z-index:20}.wordmark{font-size:19px;font-weight:600;letter-spacing:-.65px}.wordmark-index{font-size:12px;font-weight:400;color:var(--muted);margin-left:18px;letter-spacing:0}.header-actions{display:flex;gap:40px;align-items:center}.masthead-note{font-size:12px;color:var(--muted)}.persistent{font-size:12px;display:flex;align-items:center;gap:9px;min-height:44px;padding:0 0 0 20px;border-left:1px solid var(--line);min-width:123px}.motion-symbol{display:inline-block;width:9px;height:9px;border:1px solid currentColor;border-radius:50%;color:var(--blue)}.motion-symbol.on{background:var(--blue)}.exhibition{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:196px minmax(0,1fr);column-gap:42px;padding:34px 36px 0}.exhibition-rail{grid-column:1;grid-row:1;align-self:start;position:sticky;top:111px}.rail-intro{font-size:13px;line-height:1.6;margin:3px 0 39px;color:var(--muted);letter-spacing:-.15px}.experiment-selector{display:flex;flex-direction:column}.experiment-selector>button{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);text-align:left;align-items:center;gap:12px;width:100%;padding:18px 0;min-height:85px;border-top:1px solid var(--line)}.experiment-selector>button:last-child{border-bottom:1px solid var(--line)}.experiment-selector>button.active{color:var(--blue)}.experiment-selector>button.active:before{content:"";position:absolute;width:2px;top:19px;bottom:19px;left:-12px;background:var(--blue)}.preview{position:relative;width:32px;height:32px;overflow:hidden;background:#e5e3dc;pointer-events:none}.preview .moire{transform:scale(.27);width:370%;height:370%;transform-origin:0 0}.preview .target{width:28%}.selector-label{display:flex;flex-direction:column;gap:5px;min-width:0}.selector-label>.mono{font-size:10px;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}.active .selector-label>.mono{color:var(--blue)}.selector-label strong{font-size:14px;line-height:1.2;letter-spacing:-.35px;font-weight:500}.active .selector-label strong{font-weight:600}.selector-arrow{display:none}.rail-note{font-size:20px;line-height:1.22;letter-spacing:-.65px;margin:42px 0 18px}.rail-about{font-size:11px;color:var(--muted);display:inline-flex;min-height:44px;align-items:center}.laboratory{grid-column:2;min-width:0}.lab-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.piece-index{font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums}.piece-index>span{color:var(--muted);margin-left:10px}h1{font-size:clamp(44px,4.6vw,78px);line-height:1.08;letter-spacing:-.06em;font-weight:500;margin:12px 0 0}.expand{min-height:44px;padding:0;display:flex;align-items:center;gap:9px;font-size:11px;flex-shrink:0}.expand>span{font-size:22px}.lab-layout{display:block}.stage{height:clamp(350px,52vh,660px);position:relative;overflow:hidden;isolation:isolate;-webkit-user-select:none;user-select:none;background:#eae8e1}.kind-0{cursor:grab;touch-action:pan-y}.kind-0:active{cursor:grabbing}.kind-1{height:clamp(420px,60vh,700px);background:#eae8e1}.kind-2{height:clamp(320px,42vh,540px)}.kind-3{height:clamp(370px,52vh,650px)}.stage-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 0 20px;font-size:12px;line-height:1.5}.stage-bottom p{margin:0;max-width:80%}.caption-index{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);margin-right:13px}.caption-detail{color:var(--muted);margin-left:5px}.stage-state{font-size:10px;white-space:nowrap;color:var(--muted);display:flex;align-items:center;gap:7px}.status-dot{height:5px;width:5px;border:1px solid #7b7e73;border-radius:50%;display:inline-block}.status-dot.live{border-color:var(--blue);background:var(--blue)}.controls{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--ink);padding:22px 0 0;gap:20px 24px}.parameters{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:start}.piece-1 .parameters{grid-template-columns:repeat(3,minmax(0,1fr))}.piece-2 .parameters{grid-template-columns:repeat(4,minmax(0,1fr))}.piece-3 .parameters{grid-template-columns:1.25fr 1fr 1fr 1.1fr}.slider{display:block;min-width:0}.slider-heading{display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:baseline;gap:5px;font-size:11px;white-space:nowrap}.slider-heading output{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:-.15px}.slider input[type=range]{display:block;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:28px;padding:0;margin:7px 0 0;cursor:ew-resize;accent-color:var(--blue)}.slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--blue) 0 var(--progress),#cacbc2 var(--progress) 100%)}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:16px;margin-top:-7px;background:var(--ink);border:2px solid var(--paper);border-radius:0;box-shadow:0 0 0 1px var(--ink);transition:background .15s,box-shadow .15s}.slider input[type=range]:hover::-webkit-slider-thumb,.slider input[type=range]:active::-webkit-slider-thumb,.slider input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--blue);box-shadow:0 0 0 1px var(--blue)}.slider input[type=range]::-moz-range-track{height:2px;background:#cacbc2}.slider input[type=range]::-moz-range-progress{height:2px;background:var(--blue)}.slider input[type=range]::-moz-range-thumb{width:8px;height:14px;border:2px solid var(--paper);border-radius:0;background:var(--ink)}.motion-controls{display:flex;gap:10px;align-items:start;flex-wrap:wrap;grid-column:1}.primary,.reset,.reveal{min-height:44px;font-size:12px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);white-space:nowrap}.primary{min-width:127px;background:var(--ink);color:var(--paper);border-color:var(--ink)}.primary:hover{background:var(--blue);border-color:var(--blue);color:#fff}.reset:hover,.reveal:hover{border-color:var(--ink)}.reset{padding:0 17px}.reveal-section{display:flex;gap:8px;grid-column:2;justify-content:end;flex-wrap:wrap}.reveal{border-color:transparent;padding-right:0}.reveal:hover{border-color:transparent;color:var(--blue)}.reveal.selected{color:var(--blue)}.check{width:16px;height:16px;border:1px solid #a9aca0;display:grid;place-items:center;font-size:12px;line-height:1}.selected .check{background:var(--blue);border-color:var(--blue);color:#fff}.motion-note{font-size:11px;line-height:1.5;margin:4px 0;color:var(--muted);width:100%}.palette,.presets{padding:0;margin:0;border:0;min-width:0}.palette legend,.presets legend{font-size:11px;margin-bottom:10px}.palette button{border:1px solid transparent;padding:4px;margin-right:7px;display:inline-flex;align-items:center;min-height:32px}.palette button span{width:20px;height:20px}.palette .selected{outline:1px solid var(--blue)}.color-control{font-size:11px;display:flex;flex-direction:column;gap:9px;align-items:start;min-width:0}.color-control>span{display:flex;align-items:center;gap:10px}.color-control output{font-size:11px;font-variant-numeric:tabular-nums;min-width:64px}.color-control input{width:44px;height:32px;border:1px solid var(--line);padding:3px;background:transparent;cursor:pointer}.presets{grid-column:1/4;grid-row:2}.presets legend{margin-bottom:7px}.presets button{font-size:11px;min-height:36px;padding:0 11px;border:1px solid var(--line);margin-right:5px}.presets button:hover,.presets button[aria-pressed=true]{border-color:var(--blue);color:var(--blue)}.text-button{font-size:11px;min-height:36px;text-align:left;justify-self:start;padding:0;grid-column:4;grid-row:2;align-self:end}.piece-3 .parameters>.slider{grid-column:4;grid-row:1}.explanation{display:grid;grid-template-columns:1.25fr 1fr;gap:8%;margin-top:38px;padding:30px 0 38px;border-top:1px solid var(--line)}.eyebrow{font-size:11px;color:var(--muted)}.explanation h3{font-size:23px;letter-spacing:-.65px;font-weight:500;margin:12px 0}.explanation p{font-size:13px;line-height:1.75;color:var(--muted);margin:0;max-width:560px}.observations{display:flex;flex-direction:column;gap:22px}.observations h4{font-size:12px;font-weight:500;margin:0 0 5px}.observations p{font-size:12px;line-height:1.6}.about{grid-column:2;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:28px 0 38px;scroll-margin-top:100px}.about>span{font-size:12px}.about p{font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:610px}footer{max-width:1760px;margin:auto;padding:25px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}footer strong{font-size:12px;font-weight:500}footer p{font-size:11px;color:var(--muted);margin:5px 0 0}footer>a{font-size:11px}.moire,.stripe-window,.color-fields{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.moire{background:var(--paper)}.stripe-window{transition:left .32s ease,right .32s ease;pointer-events:none}.stripe{position:absolute;top:-65%;right:-65%;bottom:-65%;left:-65%;background:repeating-linear-gradient(90deg,#171717 0 var(--thickness),transparent var(--thickness) var(--spacing));transform-origin:center;will-change:transform}.layer-a{transform:rotate(-22deg)}.layer-b{transform:rotate(calc(-22deg + var(--angle))) translate(var(--offset));animation:interference calc(var(--duration) / 3) linear infinite;animation-play-state:paused}.separated .window-a{right:calc(50% + 8px);background:var(--paper)}.separated .window-b{left:calc(50% + 8px);background:var(--paper)}.layer-label{position:absolute;top:16px;padding:7px 10px;background:var(--paper);font-size:11px}.layer-label.a{left:16px}.layer-label.b{left:calc(50% + 24px)}@keyframes interference{0%{transform:rotate(calc(-22deg + var(--angle))) translate(var(--offset))}to{transform:rotate(calc(-22deg + var(--angle))) translate(calc(var(--offset) + var(--spacing)))}}.triangle-svg,.grid-svg{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.triangle-spin{transform-origin:300px 300px;animation:spin 48s linear infinite;animation-play-state:paused}.beam{transition:transform .35s cubic-bezier(.22,.61,.36,1)}@keyframes spin{to{transform:rotate(360deg)}}.row{animation:row-shift var(--duration) linear infinite alternate;animation-play-state:paused}.row.aligned{transform:none!important}.odd{--dir: 1}.even{--dir: -1}@keyframes row-shift{to{transform:translate(calc(64px * var(--dir)))}}.color-fields{display:flex;--center-color: var(--center)}.color-field{width:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:color-cycle var(--duration) linear infinite alternate;animation-play-state:paused}.color-field.left{background:var(--left);--end: #bd683e}.color-field.right{background:var(--right);--end: #3c6992}.target{width:27%;aspect-ratio:1;background:var(--center-color);flex-shrink:0}.neutral .color-field{background:#b8b8b2!important}.color-value{position:absolute;top:70%;font-size:12px;font-variant-numeric:tabular-nums;background:var(--paper);padding:5px 9px}.neutral:after{content:"=";position:absolute;top:calc(50% - 14px);left:calc(50% - 6px);font-size:20px}@keyframes color-cycle{to{background:var(--end)}}.running .layer-b,.running .triangle-spin,.running .row,.running .color-field{animation-play-state:running}.reduced *{animation:none!important;transition:none!important}.focus-dialog{position:fixed;top:16px;right:16px;bottom:16px;left:16px;margin:auto;width:calc(100% - 32px);max-width:1600px;max-height:calc(100dvh - 32px);padding:22px;background:var(--paper);color:var(--ink);border:0;overflow:auto}.focus-dialog::backdrop{background:#171717bf}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;font-size:14px}.dialog-header>div{display:flex;gap:12px}.dialog-header button{min-height:44px;font-size:12px;padding:0 13px;border:1px solid var(--line)}.dialog-header button span{margin-left:12px;font-size:20px}.focus-dialog .stage{height:calc(100dvh - 180px);min-height:240px}.focus-dialog>p{display:flex;justify-content:space-between;gap:16px;font-size:11px;margin:16px 0 0}.focus-dialog>p span{color:var(--muted)}.preview *{transition:none!important}.preview .stripe{will-change:auto}.motion-on .preview .layer-b,.motion-on .preview .triangle-spin,.motion-on .preview .row,.motion-on .preview .color-field{animation-play-state:running}@media(min-width:1600px){.stage{height:58vh;max-height:700px}.kind-1{height:62vh}.kind-2{height:46vh}}@media(max-width:1150px){header{padding:0 28px}.exhibition{grid-template-columns:160px minmax(0,1fr);gap:28px;padding:28px 28px 0}.parameters{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.piece-2 .parameters{grid-template-columns:repeat(2,minmax(0,1fr))}.piece-3 .parameters{grid-template-columns:repeat(3,minmax(0,1fr))}.piece-3 .parameters>.slider{grid-column:1;grid-row:2}.presets{grid-column:2/4;grid-row:2}.text-button{grid-column:1/-1;grid-row:3}.controls{gap:18px 12px}.reveal-section{gap:4px}.primary{min-width:112px}.primary,.reset,.reveal{font-size:11px;padding:0 11px}.reveal{padding-right:0}.stage-bottom{gap:12px}.caption-detail{display:none}.rail-intro{margin-bottom:31px}.selector-label strong{font-size:13px}.explanation{gap:6%}.explanation h3{font-size:21px}}@media(max-width:800px){header{height:66px;padding:0 22px}.wordmark{font-size:18px}.wordmark-index,.masthead-note{display:none}.header-actions{gap:0}.persistent{font-size:11px;min-width:112px;padding-left:16px}.exhibition{display:block;padding:22px 22px 0}.exhibition-rail{position:static}.rail-intro,.rail-note,.rail-about{display:none}.experiment-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:29px;border-bottom:1px solid var(--line)}.experiment-selector>button{grid-template-columns:1fr;gap:0;border-top:0;padding:9px 10px 17px 0;min-height:66px;align-items:start}.experiment-selector>button:last-child{border-bottom:0}.experiment-selector>button.active:before{left:0;right:14px;top:auto;bottom:-1px;width:auto;height:2px}.preview{display:none}.selector-label{gap:9px}.selector-label strong{font-size:13px}.lab-heading{margin-bottom:22px}.lab-heading h1{font-size:clamp(42px,7vw,60px);margin-top:10px}.piece-index{font-size:10px}.expand{font-size:11px}.stage{height:clamp(360px,50vh,550px)}.kind-1{height:480px}.kind-2{height:320px}.kind-3{height:400px}.parameters{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 25px}.piece-2 .parameters{grid-template-columns:repeat(4,minmax(0,1fr))}.controls{padding-top:20px}.slider-heading{font-size:12px}.slider-heading output{font-size:12px}.explanation{margin-top:30px;padding-top:26px}.about{display:grid}.about{grid-template-columns:1fr 2fr}.focus-dialog{top:10px;right:10px;bottom:10px;left:10px;width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:16px}.focus-dialog .stage{height:calc(100dvh - 165px)}footer{padding:24px 22px}}@media(max-width:520px){header{padding:0 18px;height:62px}.wordmark{font-size:17px}.persistent{min-width:103px;font-size:11px;padding-left:14px}.exhibition{padding:15px 18px 0}.experiment-selector{grid-template-columns:1fr 1fr;margin-bottom:24px;border-top:1px solid var(--line);gap:0 20px}.experiment-selector>button{min-height:61px;padding:12px 0;display:block}.selector-label{flex-direction:row;align-items:baseline;gap:10px}.selector-label>.mono{font-size:10px;flex-shrink:0}.selector-label strong{font-size:13px;letter-spacing:-.35px}.experiment-selector>button:nth-child(-n+2){border-bottom:1px solid var(--line)}.experiment-selector>button.active:before{right:0;bottom:0;top:auto}.experiment-selector>button:last-child{border-bottom:0}.lab-heading{gap:12px;align-items:end;margin-bottom:19px}.piece-index{font-size:10px}.piece-index>span{margin-left:7px}.lab-heading h1{font-size:43px;letter-spacing:-2.4px;line-height:1.03;max-width:270px}.expand{font-size:0;min-width:36px;min-height:44px;justify-content:end;gap:0}.expand>span{font-size:27px}.stage{height:390px}.kind-1{height:410px}.kind-2{height:300px}.kind-3{height:360px}.target{width:35%}.stage-bottom{padding:13px 0 19px;font-size:11px;gap:8px}.stage-bottom p{max-width:78%}.caption-index{margin-right:8px;font-size:9px}.stage-state{font-size:9px;gap:5px}.controls{grid-template-columns:1fr;gap:18px;padding-top:19px}.parameters,.piece-1 .parameters,.piece-2 .parameters,.piece-3 .parameters{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.slider-heading{grid-template-columns:minmax(0,1fr) 54px;font-size:11px;gap:3px}.slider-heading output{font-size:11px}.slider input[type=range]{margin-top:5px;height:30px}.motion-controls{grid-column:1;grid-row:2}.primary,.reset{font-size:12px;min-height:44px}.primary{min-width:130px}.reset{min-width:75px}.reveal-section{grid-column:1;grid-row:3;justify-content:start;gap:15px;border-top:1px solid var(--line);padding-top:9px}.reveal{padding:0;font-size:12px;min-height:44px}.palette{grid-column:1/-1}.palette button{min-height:44px}.palette button span{height:26px;width:25px}.color-control{font-size:12px;gap:9px}.color-control:first-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.color-control input{height:44px;width:50px}.piece-3 .parameters>.slider{grid-column:1/-1;grid-row:4}.presets{grid-column:1/-1;grid-row:3}.presets legend{font-size:11px}.presets button{min-height:44px;padding:0 9px;font-size:11px}.text-button{grid-column:1/-1;grid-row:5;min-height:36px}.explanation{display:block;margin-top:28px;padding:24px 0 28px}.explanation h3{font-size:24px;letter-spacing:-.7px;margin:11px 0 13px}.explanation p{font-size:13px;line-height:1.7}.observations{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:25px}.observations p{font-size:12px}.about{display:block;padding:24px 0 29px}.about>span{display:block;margin-bottom:12px}.about p{font-size:12px}footer{padding:22px 18px;align-items:start}footer p{font-size:10px;max-width:190px;line-height:1.5}footer>a{font-size:10px;text-align:right;max-width:80px;line-height:1.5}.dialog-header{font-size:12px;gap:10px;margin-bottom:13px}.dialog-header>div{gap:7px}.dialog-header button{font-size:11px;padding:0 10px}.dialog-header button span{margin-left:8px}.focus-dialog .stage{height:calc(100dvh - 160px)}.focus-dialog>p{font-size:10px}.layer-label{top:12px;font-size:10px;padding:6px 8px}.layer-label.a{left:12px}.layer-label.b{left:calc(50% + 20px)}}@media(max-height:540px)and (orientation:landscape){header{position:static;height:58px}.exhibition-rail{top:20px}.stage{height:330px;min-height:0}.kind-1{height:380px}.kind-2{height:270px}.focus-dialog{top:8px;right:8px;bottom:8px;left:8px;padding:12px;width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.dialog-header{margin-bottom:10px}.focus-dialog .stage{height:calc(100dvh - 130px);min-height:180px}.focus-dialog>p{margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}@media(min-width:801px){.exhibition{padding-top:28px}.lab-heading{margin-bottom:18px}.lab-heading h1{margin-top:8px}.stage.kind-0{height:clamp(300px,42vh,640px)}}@media(min-width:1160px){.slider-heading,.slider-heading output{font-size:12px}}@media(max-width:520px){.expand{min-width:44px}}@media(max-width:1000px)and (max-height:540px)and (orientation:landscape){header{height:50px;padding:0 20px}.masthead-note,.wordmark-index{display:none}.exhibition{display:block;padding:12px 20px 0}.exhibition-rail{position:static}.rail-intro,.rail-note,.rail-about{display:none}.experiment-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px;border-bottom:1px solid var(--line)}.experiment-selector>button{display:block;min-height:36px;border:0;padding:4px 12px 10px 0}.experiment-selector>button:last-child{border:0}.experiment-selector .preview{display:none}.selector-label{flex-direction:row;align-items:baseline;gap:8px}.selector-label strong{font-size:12px}.selector-label>.mono{font-size:10px}.experiment-selector>button.active:before{left:0;right:12px;top:auto;bottom:-1px;width:auto;height:2px}.lab-heading{margin-bottom:12px;align-items:center}.lab-heading h1{font-size:32px;margin-top:6px}.piece-index{font-size:10px}.stage{height:220px;min-height:0}.stage.kind-0,.kind-1,.kind-2,.kind-3{height:220px}.parameters{grid-template-columns:repeat(5,minmax(0,1fr))}.focus-dialog .stage{height:calc(100dvh - 130px);min-height:180px}}