.material-studio{background:#0e140f;padding:90px 6% 70px;border-block:1px solid #293b2b}
.studio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:36px}.studio-heading .eyebrow{color:#a9c2ac;font-size:9px;letter-spacing:2.4px}.studio-heading h2{font-size:46px;line-height:1.16;letter-spacing:-2px;margin:17px 0 0}.studio-heading h2 em{color:#8bcba3}.studio-heading>p{color:#a6b9a9;font-size:12px;line-height:1.9;margin:0 0 4px}
.studio-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;border:1px solid #344638;border-radius:12px;overflow:hidden;background:#141e16}
.studio-preview{min-width:0;background:radial-gradient(ellipse at 58% 44%,#28433277,transparent 65%),#101912}
.studio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:61px;padding:0 26px;border-bottom:1px solid #35473766;color:#a2b8a7;font-size:8px;letter-spacing:1.6px}.studio-toolbar>span:first-child{display:flex;align-items:center;gap:8px;color:#c3d7c7}.studio-toolbar i{width:5px;height:5px;border-radius:50%;background:#53d999;box-shadow:0 0 12px #53d99955}
.studio-canvas{position:relative;isolation:isolate;height:450px;margin:0;overflow:hidden}.studio-floor{position:absolute;inset:38% -30% -70%;background-image:linear-gradient(#71987718 1px,transparent 1px),linear-gradient(90deg,#71987718 1px,transparent 1px);background-size:45px 45px;transform:perspective(450px) rotateX(65deg);transform-origin:top;mask-image:radial-gradient(ellipse,#0008,transparent 65%);z-index:-1}
.studio-image-stack{position:absolute;inset:15px 4% 35px}.studio-image-stack img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 20px 20px #0005)}.studio-result{clip-path:inset(0 0 0 var(--studio-split));transition:opacity .25s}.studio-canvas.is-loading .studio-result{opacity:.45}
.studio-divider{position:absolute;top:14%;bottom:17%;left:calc(4% + var(--studio-split) * .92);width:1px;background:linear-gradient(transparent,#b1d6b7aa 25%,#b1d6b7aa 75%,transparent);pointer-events:none;transition:opacity .2s}.studio-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:31px;height:31px;background:#132719;border:1px solid #6f9b78;border-radius:50%;color:#c8ebd0;font-size:15px;box-shadow:0 0 0 6px #13271940}.studio-canvas.is-endpoint .studio-divider{opacity:0}
.studio-before-tag,.studio-after-tag{position:absolute;top:23px;font-size:8px;letter-spacing:1.6px;color:#8caa94}.studio-before-tag{left:26px}.studio-after-tag{right:26px;color:#84d9a3}.studio-canvas figcaption{position:absolute;left:26px;right:26px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;font-size:8px;letter-spacing:1.4px;color:#819f8a}.studio-canvas figcaption b{display:block;margin-top:6px;font-weight:450;font-size:10px;letter-spacing:.2px;color:#bed1c2}.studio-canvas figcaption>span:last-child{color:#b5cbb9}
.studio-compare{padding:21px 26px 25px;border-top:1px solid #35473766;background:#10191188}.studio-compare-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.studio-compare-label label{font-size:11px;color:#d8e6da}.studio-compare-label output{font-size:9px;color:#88b99b;font-variant-numeric:tabular-nums}.studio-range-row{display:flex;align-items:center;gap:17px}.studio-range-row button{font:inherit;font-size:10px;border:0;background:none;padding:5px 0;color:#a4bca9;cursor:pointer}.studio-range-row button:hover{color:#53d999}.studio-range-row input{flex:1;min-width:0;accent-color:#53d999;height:4px;cursor:ew-resize;margin:0;border-radius:5px}.studio-range-row input:focus-visible{outline:2px solid #53d999;outline-offset:7px}
.studio-materials{padding:25px 23px;background:linear-gradient(160deg,#1a281d,#142017);border-left:1px solid #344638;min-width:0}.studio-panel-heading{display:flex;justify-content:space-between;align-items:center;color:#9ab6a2;font-size:8px;letter-spacing:1.5px}.studio-panel-heading>span:last-child{color:#d6e9d8;font-size:10px}.studio-materials h3{font-size:23px;font-weight:450;letter-spacing:-.7px;color:#edf5ee;margin:29px 0 12px}.studio-panel-description{font-size:11px;line-height:1.8;color:#9fb7a5;margin:0 0 25px}
.studio-material-list{display:flex;flex-direction:column;gap:10px}.studio-material{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#122017;border:1px solid #344f3b;border-radius:6px;padding:9px;color:#dae8de;cursor:pointer;transition:border-color .2s,background .2s}.studio-material:hover{border-color:#709f7e;background:#1d3424}.studio-material.is-selected{border-color:#53d999;background:#213e2b;box-shadow:inset 0 0 0 1px #53d99912}.studio-sample{display:block;flex-shrink:0;width:59px;height:64px;border-radius:3px;background-color:#153c2b;background-size:450%;background-position:89% 22%;background-repeat:no-repeat;border:1px solid #ffffff0c}.studio-material-text{display:block;min-width:0}.studio-material-text small{display:block;font-size:6px;letter-spacing:1.5px;color:#8dad96}.studio-material-text strong{display:block;font-size:14px;font-weight:500;letter-spacing:-.25px;margin:6px 0}.studio-material-text>span{display:block;font-size:8px;line-height:1.5;color:#a3baa9}.studio-material>i{font-size:13px;font-style:normal;color:#7a9e85;margin-left:auto;align-self:flex-start;margin-top:2px}.studio-material.is-selected>i{color:#53d999}
.studio-material-detail{display:flex;align-items:flex-start;gap:10px;border-top:1px solid #3d594366;padding-top:18px;margin-top:23px}.studio-detail-icon{color:#53d999;font-size:21px;line-height:1}.studio-material-detail p{font-size:10px;line-height:1.85;color:#a9c0af;margin:0;min-height:56px}.studio-command-link{display:flex;align-items:center;gap:10px;padding-top:20px;font-size:10px;color:#d5e7d9}.studio-command-link img{padding:3px;background:#dcebdc;border-radius:5px}.studio-command-link b{font-size:17px;margin-left:auto;color:#53d999;font-weight:400}.studio-command-link:hover{color:#53d999}
.studio-footnote{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:18px}.studio-footnote>span{display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:1.5px;color:#87a28c}.studio-footnote i{width:4px;height:4px;background:#4aa775;border-radius:50%}.studio-footnote p{margin:0;font-size:9px;line-height:1.6;color:#8da292}.studio-status{font-size:11px;color:#b4d5bc;line-height:1.8;margin:0}.studio-status:empty{display:none}
@media(min-width:1600px){.studio-workspace{grid-template-columns:minmax(0,1fr) 355px}.studio-canvas{height:520px}.studio-materials{padding:29px}.studio-materials h3{font-size:26px}.studio-sample{width:70px;height:75px}.studio-material-text strong{font-size:16px}.studio-material-text>span{font-size:10px}.studio-material-detail p{font-size:11px}}
@media(max-width:1050px){.studio-workspace{grid-template-columns:minmax(0,1fr) 285px}.studio-materials{padding:23px 17px}.studio-canvas{height:455px}.studio-heading h2{font-size:40px}.studio-toolbar{padding:0 20px}.studio-toolbar>span:last-child{display:none}.studio-image-stack{inset:15px -9% 35px}.studio-divider{left:calc(-9% + var(--studio-split) * 1.18)}.studio-sample{width:50px;height:58px}.studio-material{gap:9px}.studio-material-detail{margin-top:20px}.studio-material-text>span{font-size:7px}}
@media(max-width:760px){.material-studio{padding:58px 6% 45px}.studio-heading{display:block;margin-bottom:27px}.studio-heading h2{font-size:36px}.studio-heading>p{font-size:11px;margin-top:18px}.studio-workspace{grid-template-columns:1fr;border-radius:9px}.studio-toolbar{height:47px;font-size:7px;padding:0 18px}.studio-toolbar>span:last-child{display:inline;font-size:6px;letter-spacing:.5px}.studio-canvas{height:330px}.studio-image-stack{inset:24px 0 39px}.studio-divider{left:var(--studio-split);top:20%;bottom:22%}.studio-before-tag,.studio-after-tag{top:17px;font-size:7px}.studio-before-tag{left:18px}.studio-after-tag{right:18px}.studio-canvas figcaption{left:18px;right:18px;font-size:7px}.studio-compare{padding:18px}.studio-range-row{gap:15px}.studio-materials{border-left:0;border-top:1px solid #344638;padding:23px 19px}.studio-materials h3{font-size:24px;margin-top:19px}.studio-panel-description{font-size:11px;margin-bottom:20px}.studio-material-list{gap:9px}.studio-material{padding:10px;gap:16px}.studio-sample{width:65px;height:59px}.studio-material-text strong{font-size:15px}.studio-material-text>span{font-size:10px}.studio-material-text small{font-size:7px}.studio-material-detail p{font-size:11px;min-height:0}.studio-command-link{font-size:11px}.studio-footnote{align-items:flex-start;flex-direction:column;gap:9px}.studio-footnote p{font-size:8px}}
@media(prefers-reduced-motion:reduce){.studio-result,.studio-divider,.studio-material{transition:none}}