/* A living material study layered over product photography. */
.material-lab{isolation:isolate;--lab-x:50%;--lab-y:50%;background:#14241e}
.material-lab>img{filter:brightness(.72) saturate(.82) contrast(1.14);transition:filter .5s ease}
.material-lab:hover>img{filter:brightness(.8) saturate(.94) contrast(1.13)}
.material-lab::before{position:absolute;inset:0;z-index:1;content:"";pointer-events:none;background:radial-gradient(370px circle at var(--lab-x) var(--lab-y),#d2eba94d,transparent 76%),linear-gradient(180deg,#0c1b1880,transparent 37%,#07100b8a);mix-blend-mode:screen}
.material-lab::after{z-index:4}
.material-lab canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .7s ease}
.material-lab[data-renderer="webgpu"] canvas,.material-lab[data-renderer="webgl2"] canvas{opacity:1}
.material-lab__static{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.85;transition:opacity .6s ease}
.material-lab[data-renderer="webgpu"] .material-lab__static,.material-lab[data-renderer="webgl2"] .material-lab__static{opacity:0}
.material-lab__static span{position:absolute;left:50%;top:50%;display:block;border:1px solid #d9efb48c;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 35px #c7ed9822}
.material-lab__static span:nth-child(1){width:25%;aspect-ratio:1}
.material-lab__static span:nth-child(2){width:48%;aspect-ratio:1;border-style:dashed;opacity:.52}
.material-lab__static span:nth-child(3){width:72%;aspect-ratio:1;opacity:.23}
.material-lab__hud{position:absolute;inset:0;z-index:3;pointer-events:none;color:#f3f8ea;text-shadow:0 2px 9px #06110e;letter-spacing:.14em;font-size:8px;font-weight:700}
.material-lab__tag{position:absolute;left:28px;top:29px;display:flex;align-items:center;gap:13px}
.material-lab__tag::before{display:block;width:17px;height:1px;content:"";background:#cbe69f}
.material-lab__cross{position:absolute;left:var(--lab-x);top:var(--lab-y);font-size:24px;font-weight:300;line-height:1;transform:translate(-50%,-50%);text-shadow:0 0 20px #d4efad;transition:left .25s ease,top .25s ease}
.material-lab__readout{position:absolute;left:28px;bottom:65px;display:flex;flex-direction:column;gap:7px;max-width:55%;padding-top:11px;border-top:1px solid #edf7e9a8}
.material-lab__readout>span{color:#d7e8d3;font-size:7px}
.material-lab__readout strong{font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1.45}
.material-lab__status{position:absolute;right:29px;bottom:30px;display:flex;align-items:center;gap:10px;color:#e6f0dc}
.material-lab__status i{width:5px;height:5px;border-radius:50%;background:#c9e787;box-shadow:0 0 13px #d2f5a2}
.material-lab .image-index{left:28px;right:auto;bottom:28px;z-index:3}
.material-lab[data-renderer="fallback"] .material-lab__status,.material-lab[data-renderer="data-saver"] .material-lab__status{opacity:.55}
@media(max-width:760px){.material-lab__tag{left:19px;top:19px;font-size:7px}.material-lab__readout{left:19px;bottom:58px;max-width:68%}.material-lab__readout strong{font-size:10px}.material-lab .image-index{left:19px;bottom:18px}.material-lab__status{right:19px;bottom:18px;font-size:7px}}
@media(max-width:420px){.material-lab__status{display:none}.material-lab__readout{max-width:80%}}
@media(prefers-reduced-motion:reduce){.material-lab canvas,.material-lab__static,.material-lab__cross{transition:none}}