print-lab{display:block}.print-lab__header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:2rem;align-items:end}.print-lab__header h2{max-width:18ch;margin-bottom:0}.print-lab__intro{max-width:48ch;opacity:.8}.print-lab__demo{--separation:.65;--sheet-ratio:4/5;--sheet-width:21%;--source-opacity:min(1,calc(var(--separation)*5));margin-top:2rem}.print-lab__demo--square{--sheet-ratio:1;--sheet-width:24%}.print-lab__demo--landscape{--sheet-ratio:5/4;--sheet-width:26%}.print-lab__stage{position:relative;height:clamp(23rem,42vw,34rem);overflow:hidden;border-radius:2rem;background:radial-gradient(ellipse at 52% 95%,#c9d1cf55,transparent 54%),linear-gradient(160deg,#f6f7f5,#ebefed);isolation:isolate}.scheme-dark .print-lab__stage{background:radial-gradient(ellipse at 50% 100%,#526b6655,transparent 65%),linear-gradient(160deg,#222a28,#111715)}.print-lab__scene{position:absolute;inset:0;perspective:1600px;transform-style:preserve-3d}.print-lab__floor{position:absolute;width:55%;height:11%;left:23%;bottom:7%;background:#182a2840;filter:blur(22px);border-radius:50%;opacity:calc(.35 + var(--separation)*.25)}.print-lab__sheet{position:absolute;top:48%;left:50%;width:var(--sheet-width);aspect-ratio:var(--sheet-ratio);transform-style:preserve-3d;border-radius:2px;will-change:transform}.print-lab__source{background:#fff;padding:2.5%;box-shadow:1px 1px 0 #b4b4ad,2px 2px 0 #dfdfda,0 18px 30px #152d2520;opacity:var(--source-opacity);padding:8px 8px 22px;transform:translate(-50%,-50%) translateX(calc(var(--separation)*120%)) translateY(calc(var(--separation)*-16%)) translateZ(calc(var(--separation)*-90px)) rotateX(8deg) rotateY(-22deg) rotateZ(-9deg)}.print-lab__source--second{transform:translate(-50%,-50%) translateX(calc(var(--separation)*124%)) translateY(calc(var(--separation)*22%)) translateZ(calc(var(--separation)*-70px)) rotateX(8deg) rotateY(-20deg) rotateZ(-2deg)}.print-lab__demo--depth .print-lab__source{transform:translate(-50%,-50%) translateX(calc(var(--separation)*125%)) translateZ(calc(var(--separation)*-90px)) rotateX(9deg) rotateY(-24deg) rotateZ(-7deg)}.print-lab__photo{position:relative;width:100%;height:100%;overflow:hidden;background:#e9eeeb}.print-lab__sheet img,.print-lab__placeholder{width:100%;height:100%;object-fit:cover;display:block}.print-lab__placeholder{display:grid;place-items:center;padding:.5rem;font-size:.65rem;color:#52645d;background:repeating-linear-gradient(135deg,#f2f5f3 0 8px,#e6ede9 8px 16px);text-align:center}.print-lab__photo-mark{position:absolute;left:9px;bottom:4px;color:#64706a;font-size:8px;font-weight:700;letter-spacing:.1em}.print-lab__paper{background:#fff;padding:4px;box-shadow:1px 0 0 #bbb9b0,2px 1px 0 #d1d0c8,0 22px 32px #152d2530;transform:translate(-50%,-50%) translateX(calc(var(--separation)*2%)) rotateX(10deg) rotateY(-27deg) rotateZ(-6deg)}.print-lab__ink{position:relative;width:100%;height:100%;overflow:hidden;background:#f2f1ec}.print-lab__stripes{position:absolute;inset:0}.print-lab__stripes--a{mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px)}.print-lab__stripes--b{mask-image:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px 4px)}.print-lab__assembled-image{position:absolute;inset:0;opacity:clamp(0,calc(1 - var(--separation)*3),1)}.print-lab__view{position:absolute;inset:0;mask-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--view)*1.5px),#000 calc(var(--view)*1.5px) calc((var(--view) + 1)*1.5px),transparent calc((var(--view) + 1)*1.5px) 12px)}.print-lab__view img{transform:scale(1.05) translateX(calc((var(--view) - 3.5)*.5%))}.print-lab__paper-edge{position:absolute;inset:0;pointer-events:none;border:1px solid #fff9;box-shadow:inset 0 0 12px #766b4720}.print-lab__lens{transform:translate(-50%,-50%) translateX(calc(var(--separation)*-118%)) translateZ(calc(6px + var(--separation)*80px)) rotateX(10deg) rotateY(-27deg) rotateZ(-6deg);background:linear-gradient(135deg,#fff3,#b5d4d30a 40%,#fff3);border:1px solid #ffffffe0;box-shadow:inset 1px 0 0 #ffffffee,inset -2px 0 1px #a2c3c277,2px 1px 0 #98b6b7,3px 2px 0 #d2e9e7,0 22px 35px #152d2520}.print-lab__ridges{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff8c 0 .5px,#b1caca35 .7px 1.2px,#233c3c15 1.4px 1.8px,#ffffff66 2px 2.8px);opacity:calc(.3 + var(--separation)*.5)}.print-lab__reflection{position:absolute;inset:0;background:linear-gradient(120deg,transparent 15%,#fff8 18%,#fff2 22%,transparent 30%,transparent 58%,#fff9 62%,#fff1 68%,transparent 75%);opacity:.6}.print-lab__lens-edge{position:absolute;inset:0;box-shadow:inset 0 0 15px #d9eeee66;border-bottom:2px solid #ffffffbb}.print-lab__demo--float .print-lab__scene{animation:print-lab-float 7s ease-in-out infinite;animation-play-state:paused}.print-lab__demo--float.is-visible .print-lab__scene{animation-play-state:running}.print-lab__control{max-width:42rem;margin:1.5rem auto 0}.print-lab__control-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.print-lab__control-head label{font-weight:700;margin:0;font-size:.9rem}.print-lab__control-head output{font-variant-numeric:tabular-nums;font-size:.8rem;opacity:.7}.print-lab__control input[type=range]{display:block;appearance:none;background:transparent;border:0;padding:0;margin:1rem 0 .4rem;min-height:2rem;height:2rem;accent-color:var(--blue);cursor:ew-resize}.print-lab__control input::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:4px}.print-lab__control input::-webkit-slider-thumb{appearance:none;width:26px;height:26px;background:var(--page);border:2px solid var(--text);border-radius:50%;margin-top:-11px;box-shadow:0 2px 8px #0002}.print-lab__control input::-moz-range-track{height:4px;background:var(--blue)}.print-lab__control input::-moz-range-thumb{width:22px;height:22px;background:var(--page);border:2px solid var(--text);border-radius:50%}.print-lab__endpoints{display:flex;justify-content:space-between;font-size:.75rem;opacity:.7}.print-lab__legend{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.print-lab__legend li{display:flex;gap:.8rem;border-top:1px solid var(--border);padding-top:1rem}.print-lab__legend li>span{font-size:.7rem;font-weight:800;color:var(--blue);padding-top:.2rem}.scheme-dark .print-lab__legend li>span{color:var(--green)}.print-lab__legend h3{font-size:1.05rem;margin-bottom:.45rem}.print-lab__legend p{font-size:.85rem;opacity:.75;max-width:35ch}.print-lab__note{font-size:.75rem;opacity:.65;margin-top:1.5rem;max-width:85ch}@keyframes print-lab-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}@media(max-width:700px){.print-lab__header{grid-template-columns:1fr;gap:1rem}.print-lab__stage{height:23rem}.print-lab__sheet{width:24%}.print-lab__source{padding:4px 4px 17px}.print-lab__demo--flip .print-lab__source--first{transform:translate(-50%,-50%) translateX(calc(var(--separation)*120%)) translateY(calc(var(--separation)*-28%)) translateZ(calc(var(--separation)*-50px)) rotateX(8deg) rotateY(-20deg) rotateZ(-9deg)}.print-lab__demo--flip .print-lab__source--second{transform:translate(-50%,-50%) translateX(calc(var(--separation)*122%)) translateY(calc(var(--separation)*30%)) translateZ(calc(var(--separation)*-40px)) rotateX(8deg) rotateY(-20deg) rotateZ(-2deg)}.print-lab__lens{transform:translate(-50%,-50%) translateX(calc(var(--separation)*-114%)) translateZ(calc(6px + var(--separation)*45px)) rotateX(10deg) rotateY(-27deg) rotateZ(-6deg)}.print-lab__paper{padding:2px}.print-lab__legend{grid-template-columns:1fr;gap:.5rem}.print-lab__legend p{max-width:none}.print-lab__stage{border-radius:1rem}.print-lab__photo-mark{font-size:6px}}@media(max-width:430px){.print-lab__stage{height:19rem}}@media(prefers-reduced-motion:reduce){.print-lab__scene{animation:none!important}.print-lab__sheet{will-change:auto}}

.print-lab__callout{--leader:28px;position:absolute;left:50%;display:flex;align-items:center;gap:6px;width:max-content;max-width:10rem;padding:6px 10px;border:1px solid #cdd9d5;border-radius:999px;background:#fffffff2;color:#253a32;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;white-space:nowrap;box-shadow:0 4px 14px #183a2710;transform:translateX(-50%) translateZ(2px);opacity:clamp(0,calc((var(--separation) - .2)*4),1);pointer-events:none}
.print-lab__callout::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #cde6df70}
.print-lab__callout::after{content:"";position:absolute;left:50%;width:1px;height:var(--leader);background:linear-gradient(var(--blue),#638b7b65)}
.print-lab__callout--above{bottom:calc(100% + var(--leader))}.print-lab__callout--above::after{top:100%}
.print-lab__callout--below{top:calc(100% + var(--leader))}.print-lab__callout--below::after{bottom:100%;background:linear-gradient(#638b7b65,var(--blue))}
.print-lab__paper .print-lab__callout{--leader:44px}.print-lab__lens .print-lab__callout{--leader:36px}
@media(max-width:700px){.print-lab__callout{--leader:20px;padding:5px 7px;gap:5px;font-size:8px;letter-spacing:.04em}.print-lab__callout::before{width:4px;height:4px;box-shadow:0 0 0 2px #cde6df70}.print-lab__paper .print-lab__callout{--leader:34px}.print-lab__lens .print-lab__callout{--leader:28px}}

/* Keep the two source photos in one flat stack, so their 3D planes cannot intersect. */
.print-lab__sources{position:absolute;top:48%;left:50%;width:var(--sheet-width);aspect-ratio:var(--sheet-ratio);transform:translate(-50%,-50%) translateX(calc(var(--separation)*122%)) translateZ(calc(var(--separation)*-90px));transform-style:flat;opacity:var(--source-opacity)}
.print-lab__sources .print-lab__source{top:50%;width:100%;opacity:1;transform-style:flat}
.print-lab__sources .print-lab__source--first{z-index:1;transform:translate(-50%,-50%) translateY(calc(var(--separation)*-16%)) rotateX(8deg) rotateY(-22deg) rotateZ(-9deg)}
.print-lab__sources .print-lab__source--second{z-index:2;transform:translate(-50%,-50%) translateX(calc(var(--separation)*8%)) translateY(calc(var(--separation)*22%)) rotateX(8deg) rotateY(-20deg) rotateZ(-2deg)}
.print-lab__layers{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 48%}
.print-lab__assembled-view{position:absolute;inset:0}
.print-lab__assembled-view--b{opacity:0}
.is-assembled .print-lab__paper{transform:translate(-50%,-50%) rotateX(10deg) rotateZ(-6deg)}
.is-assembled .print-lab__lens{transform:translate(-50%,-50%) translateZ(6px) rotateX(10deg) rotateZ(-6deg)}
@media(max-width:700px){
  .print-lab__sources{width:24%;transform:translate(-50%,-50%) translateX(calc(var(--separation)*120%)) translateZ(calc(var(--separation)*-50px))}
  .print-lab__demo--flip .print-lab__sources .print-lab__source--first{transform:translate(-50%,-50%) translateY(calc(var(--separation)*-28%)) rotateX(8deg) rotateY(-20deg) rotateZ(-9deg)}
  .print-lab__demo--flip .print-lab__sources .print-lab__source--second{transform:translate(-50%,-50%) translateX(calc(var(--separation)*8%)) translateY(calc(var(--separation)*30%)) rotateX(8deg) rotateY(-20deg) rotateZ(-2deg)}
}
@media(prefers-reduced-motion:no-preference){
  .print-lab__demo--depth.is-assembled .print-lab__layers{animation:print-lab-twist 6s ease-in-out infinite;animation-play-state:paused}
  .print-lab__demo--depth.is-assembled .print-lab__assembled-view--a img{animation:print-lab-parallax 6s ease-in-out infinite;animation-play-state:paused}
  .print-lab__demo--depth.is-visible.is-assembled .print-lab__layers,.print-lab__demo--depth.is-visible.is-assembled .print-lab__assembled-view--a img{animation-play-state:running}
}
@keyframes print-lab-twist{0%,100%{transform:rotateY(-16deg)}50%{transform:rotateY(16deg)}}
@keyframes print-lab-parallax{0%,100%{transform:scale(1.06) translateX(-1.2%)}50%{transform:scale(1.06) translateX(1.2%)}}

.print-lab__demo--flip.is-assembled.is-optics-ready .print-lab__assembled-view--b{opacity:1}