@font-face{font-family:Plex;src:url(/fonts/ibm-plex-mono.ttf)}:root{font-family:Plex,monospace;color:#242620;background:#f3f1e9;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit}button:focus-visible{outline:1px solid #687259;outline-offset:7px}.runs-app{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center}.composition{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;background:#f3f1e9;overflow:hidden;isolation:isolate;touch-action:none;container-type:inline-size;-webkit-user-select:none;user-select:none}.meta{font-family:Plex,monospace;font-size:.625cqw;font-weight:400;letter-spacing:.1em;line-height:1.8;color:#2426207a}.masthead{position:absolute;top:7%;left:6.5%}.wordmark{font-family:Arial,Helvetica,sans-serif;font-size:3.3cqw;font-weight:700;letter-spacing:-.21cqw;line-height:1}.wordmark>span{vertical-align:top;display:inline-block;margin:.28cqw 0 0 .75cqw}.control{position:absolute;left:11%;top:43%;pointer-events:none;line-height:1.8}.lens{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:2.25cqw;letter-spacing:-.1cqw;margin:0 0 .7cqw}.world{position:absolute;left:50%;top:calc(50% + 3svh);width:1440px;height:810px;transform-style:preserve-3d;perspective:1500px;pointer-events:none;transform-origin:center}.world .meta{font-size:9px}.print,.expected{position:absolute;left:calc(50% - 135px);top:calc(50% - 182px);width:270px;height:364px;border:0;padding:0;border-radius:0;background:transparent;transform-style:preserve-3d}.print{pointer-events:auto;cursor:grab;will-change:transform,opacity;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left}.print:active{cursor:grabbing}.image-window{width:100%;height:100%;overflow:hidden;background:#b5b3a7;clip-path:inset(var(--slit-inset, 0px) calc((270 - var(--aperture, 270)) * .5px))}.image-window img,.expected-photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.image-window img{position:relative;left:var(--crop-shift, 0px)}.run-label{position:absolute;left:0;bottom:-24px;opacity:var(--label-opacity, 0);white-space:nowrap;pointer-events:none}.print:hover .run-label,.print:focus-visible .run-label{opacity:var(--fan-label, 0)}.expected{width:270px;height:364px;left:calc(50% - 135px);top:calc(50% - 182px);pointer-events:none;transform:translateZ(-3px)}.expected-photo{position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--reference, 0);overflow:hidden}.expected-photo img{transform:scale(1.04)}.expected-label{position:absolute;left:0;top:-25px;opacity:var(--comparison, 0)}.corner{position:absolute;width:9px;height:9px;border-color:#2426203d;border-style:solid;opacity:var(--comparison, 0)}.corner.a{left:-1px;top:-1px;border-width:1px 0 0 1px}.corner.c{right:-1px;bottom:-1px;border-width:0 1px 1px 0}.comparison-column{position:absolute;top:calc(50% + 3svh - 8.8cqw);width:14%;opacity:var(--metrics, 0);pointer-events:none;font-family:Plex,monospace}.expected-column{left:11%;transform:translate(calc(-1 * var(--metrics-shift, 16px)))}.observed-column{left:75%;transform:translate(var(--metrics-shift, 16px))}.comparison-heading,.comparison-column dt{color:#2426206b;font-size:max(8px,.625cqw);font-weight:400;letter-spacing:.1em}.comparison-column dl{margin:2cqw 0 0}.comparison-column dl>div{height:4.1cqw;min-height:45px}.comparison-column dd{margin:.5cqw 0 0;font-size:max(11px,1.05cqw);color:#2426207a}.observed-column dd{font-size:max(12px,1.2cqw);font-weight:500;color:#242620f0}.sample-caption{position:absolute;top:calc(50% + 3svh + 20.2cqw);left:var(--counter-left, 53.8%);transform:translate(-50%);pointer-events:none;transition:opacity .25s linear}.textless .annotation{visibility:hidden}.motion-play{position:absolute;right:5%;bottom:7%;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#2426208c;cursor:pointer}.motion-play:hover,.motion-play:focus-visible{color:#242620}.motion-play svg{width:18px;height:18px;fill:currentColor}.asset-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;background:#f3f1e9;padding:12px;pointer-events:none}.debug{padding:24px 32px 0}.debug .composition{width:min(100%,calc((100svh - 110px) * 16 / 9))}.dev-controls{width:min(100%,1600px);height:72px;display:flex;align-items:center;justify-content:space-between;gap:36px;font-size:9px;letter-spacing:.04em;color:#777b70}.dev-controls>div{display:flex;gap:20px;align-items:center}.dev-controls button{font-size:9px;letter-spacing:.06em;border:0;padding:8px 0;background:none;cursor:pointer;white-space:nowrap}.dev-controls button:hover{color:#171b14}.dev-controls button[aria-pressed=true]{color:#8c6246}.dev-controls .play{color:#38422d;display:flex;gap:10px;align-items:center}.play>span{font-size:15px}.timeline{display:flex;gap:20px;align-items:center;flex:1;max-width:400px}.timeline>span{white-space:nowrap;font-size:9px;font-variant-numeric:tabular-nums}.timeline input{width:100%;height:1px;accent-color:#606b4e;cursor:ew-resize}@media(max-width:700px){.debug{padding:12px 8px}.dev-controls{flex-wrap:wrap;height:auto;gap:10px;padding:15px 4px}.dev-controls>div{gap:12px}.timeline{order:3;max-width:none;flex-basis:100%}}@media(max-width:760px){.composition{min-height:92svh;aspect-ratio:auto}.control{left:8%;top:calc(50% + 3svh - 30cqw)}.comparison-column{top:calc(50% + 3svh + 23cqw);width:32%}.expected-column{left:14%}.observed-column{left:54%}.comparison-column dl{margin-top:16px}.comparison-column dl>div{margin-bottom:10px}.motion-play{bottom:2%}}.demo-pointer{position:absolute;left:50%;top:50%;z-index:1000;width:24px;height:30px;opacity:0;pointer-events:none;transform-origin:3px 2px}.demo-pointer svg{width:24px;height:30px;fill:#242620;stroke:#f3f1e9;stroke-width:1.4;stroke-linejoin:round}.demo-pointer i{position:absolute;left:-12px;top:-13px;width:30px;height:30px;border:1px solid #f3f1e9;border-radius:50%;opacity:calc(var(--press, 0) * .65)}
