main>#material-experience{
  position:relative;isolation:isolate;width:100%;max-width:none;margin:0;padding:0;
  aspect-ratio:1.5;min-height:660px;max-height:1040px;overflow:clip;
  background:transparent;box-shadow:none;scroll-margin-top:70px;
}
/* Always fill the canvas. Contain left visible side gutters on wide screens. */
.material-scene{
  position:absolute;inset:0;display:block;width:100%;max-width:none;height:100%;
  object-fit:cover;object-position:left center;z-index:-1;
  -webkit-mask-image:linear-gradient(transparent,#000 13%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 13%,#000 78%,transparent);
}
.material-controls{position:absolute;top:17%;right:4.5%;width:32%;max-width:492px;text-align:center}
.material-controls h2{font:500 clamp(26px,3vw,46px)/1.5 ArabicUI,Arial,sans-serif;margin:0 -10% 34px;color:#f0f5fa;text-shadow:0 3px 22px #0008}
.material-options{display:flex;direction:ltr;gap:20px;justify-content:space-between;margin:0 0 36px;padding:0;border:0;min-width:0}
.material-option{flex:1;min-width:0;border:0;padding:0;background:none;color:#f2f6fc;cursor:pointer;font:22px ArabicUI,Arial,sans-serif}
.material-swatch{display:block;width:100%;aspect-ratio:1;border-radius:50%;border:1px solid #c1cbd0a0;background-size:280%;background-position:35% 75%;margin-bottom:8px;transition:box-shadow .2s,transform .2s}
.material-option[data-material=wood] .material-swatch{background-image:url('/assets/sections/material-wood-v1.webp')}
.material-option[data-material=stone] .material-swatch{background-image:url('/assets/sections/material-stone-v1.webp')}
.material-option[data-material=marble] .material-swatch{background-image:url('/assets/sections/material-marble-v1.webp')}
.material-option[aria-pressed=true] .material-swatch{outline:2px solid #d8efff;outline-offset:4px;box-shadow:0 0 22px #168dffb0}
.material-option:hover .material-swatch{transform:translateY(-3px)}
.material-option:focus-visible{outline:2px solid #94dfff;outline-offset:8px;border-radius:8px}
.material-preview{position:relative;margin:0;aspect-ratio:1.42;border-radius:20px;border:1.5px solid #b1ddff;box-shadow:0 0 13px #168dff85,0 20px 50px #0003}
.material-preview:before{content:'';position:absolute;height:37px;width:1px;background:#8de3ff;bottom:100%;left:var(--connector,50%);transition:left .25s}
.material-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;opacity:0;transition:opacity .28s ease}
.material-preview img.is-active{opacity:1}
.material-note{position:absolute;right:4.5%;bottom:8%;font-size:12px;color:#a5c3d7;margin:0;z-index:1}
.material-note:before{content:'';display:inline-block;width:40px;height:1px;background:#6d99b0;vertical-align:middle;margin-inline-end:14px}
.material-number{position:absolute;top:8%;left:4.5%;font:22px Georgia,serif;color:#9bc8df;direction:ltr}
.material-number:after{content:'';display:inline-block;width:36px;height:1px;background:#6d99b0;margin-left:14px;vertical-align:middle}
@media(max-width:1050px) and (min-width:761px){
  .material-controls{right:4%;width:34%}.material-controls h2{margin-inline:-5%;font-size:28px}
  .material-options{gap:15px}.material-option{font-size:18px}
}
@media(max-width:760px){
  main>#material-experience{aspect-ratio:auto;min-height:0;max-height:none;padding:clamp(330px,88vw,540px) 24px 88px}
  .material-scene{height:clamp(370px,94vw,600px);object-position:left center;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 66%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 66%,transparent)}
  .material-controls{position:relative;inset:auto;width:100%;max-width:440px;margin-inline:auto}
  .material-controls h2{font-size:30px;margin:0 0 24px}
  .material-options{max-width:320px;margin:0 auto 30px;gap:24px}.material-option{font-size:19px}
  .material-preview{max-width:370px;margin:auto;aspect-ratio:1.65}.material-preview:before{height:31px}
  .material-note{bottom:34px;right:7%;font-size:10px}.material-number{top:35px;left:6%;font-size:16px}
}
@media(max-width:380px){.material-controls h2{font-size:27px}.material-options{gap:20px}}
@media(prefers-reduced-motion:reduce){.material-swatch,.material-preview:before,.material-preview img{transition:none}}