/* Material studio: silver, warm white, graphite and champagne. */
.studio-model{isolation:isolate}
.touch-controls{position:absolute;top:24px;left:24px;right:24px;z-index:3;display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none}
#studio-touch-toggle{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border:1px solid #9f855c;border-radius:30px;background:#fbfcfaf2;color:#55452d;font-size:14px;font-weight:500;line-height:1.5;box-shadow:0 5px 20px #29323912;touch-action:manipulation}
#studio-touch-toggle>span:first-child{font:16px Georgia,serif;letter-spacing:.5px;color:#88642f}
#studio-touch-toggle:disabled{opacity:.55;cursor:wait}
.touch-controls p{margin:0;color:#667078;font-size:12px;line-height:1.5;text-align:center}
.studio-model.touch-rotating #studio-canvas{touch-action:none;outline:1px solid #b6986466;outline-offset:-12px;border-radius:24px}
.touch-rotating #studio-touch-toggle{background:#354048;border-color:#354048;color:#fff8ee}
.touch-rotating #studio-touch-toggle>span:first-child{color:#e7ca98}
.studio-model.dragging #studio-canvas{cursor:grabbing}
.studio-model.touch-device .mouse-instruction{display:none}
.studio-model.touch-device .touch-instruction{display:inline}
.studio-model.touch-device .drag-caption{padding:0 22px;font-size:12px;line-height:1.6;letter-spacing:.7px;pointer-events:none}
#studio-canvas{outline:none}
#studio-canvas:focus-visible{outline:1px solid #967340;outline-offset:-12px;border-radius:24px}
.rotation-hint{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:14px;padding:11px 20px 11px 14px;border:1px solid #aa936659;border-radius:80px;background:#fcfdfbcf;box-shadow:0 9px 32px #3d444614;backdrop-filter:blur(10px);color:#84612f;pointer-events:none;transition:opacity .55s,transform .55s;white-space:nowrap}
.rotation-hint svg{width:70px;height:51px;flex-shrink:0;overflow:visible}
.rotation-hint .orbit{transform-origin:40px 30px;animation:rotation-invite 3.8s ease-in-out infinite}
.rotation-hint strong{font-size:14px;font-weight:500;letter-spacing:1.5px;color:#394247}
.rotation-hint small{display:block;margin-top:5px;font-size:11px;letter-spacing:1px;color:#7a705e}
.studio-model.interacted .rotation-hint{opacity:0;transform:translate(-50%,8px)}
.studio-model.interacted .rotation-hint .orbit{animation:none}
.rotation-hint[hidden]{display:none}
.studio .swatches{gap:24px;flex-wrap:wrap;margin-bottom:20px}
.studio .swatches button{min-width:54px;position:relative}
.studio .swatches i{width:48px;height:48px;box-shadow:0 3px 9px #29323917;transition:transform .25s,outline-color .25s;background-size:cover;background-position:center}
.studio .swatches button:hover i{transform:translateY(-3px)}
.studio .swatches .oak{background-image:url('assets/materials/Wood049-swatch.webp');background-color:#ad9477}
.studio .swatches .walnut{background-image:url('assets/materials/Wood051-swatch.webp');background-color:#493c32;background-blend-mode:normal}
.studio .swatches .onyx{background-image:url('assets/materials/Onyx015-swatch.webp');background-color:#e4e3dc}
.studio .swatches .metal{background-image:linear-gradient(115deg,#4c585969,#ffffff99 42%,#bec5c655 65%,#65707270),url('assets/materials/Metal050C-swatch.webp');background-color:#c8ccca}
.studio .swatches .pending i{outline:1px dashed #967340;outline-offset:2px}
.studio-copy .finish-status{font-size:13px;margin:0;color:#5e6b75;min-height:24px}
.studio-copy .material-detail{font-size:12px;color:#88642f!important;letter-spacing:.4px;margin:3px 0 0;min-height:23px}
.studio-copy .lighting{margin-top:26px}
.drag-caption .touch-instruction{display:none}
@keyframes rotation-invite{0%,65%,100%{transform:rotate(0deg)}25%{transform:rotate(-13deg)}45%{transform:rotate(10deg)}}
@media(max-width:1050px) and (min-width:801px){.studio-copy{padding-right:6%;padding-left:0}.studio .swatches{gap:15px}.studio-copy h2{font-size:39px}}
@media(max-width:800px){.studio .swatches{gap:23px;margin-top:25px}.rotation-hint{bottom:68px;padding:8px 15px 8px 10px;gap:9px}.rotation-hint svg{width:58px;height:44px}.rotation-hint strong{font-size:12px}.rotation-hint small{font-size:10px}.studio-model{height:420px}.studio-copy .material-detail{margin-bottom:0}}
@media(max-width:800px){.touch-controls{top:15px;left:18px;right:18px}.studio-model.touch-device{height:460px}.touch-device .rotation-hint{bottom:72px}.touch-device .drag-caption{bottom:24px}}
@media(any-pointer:coarse) and (min-width:801px){.studio-model{height:min(770px,90svh);min-height:430px;align-self:center}.touch-controls{top:18px}}
@media(any-pointer:coarse) and (max-height:500px){.studio-model.touch-device{height:calc(100svh - 28px);min-height:260px}.touch-device .rotation-hint{bottom:64px}.touch-device .drag-caption{bottom:18px}}
@media(prefers-reduced-motion:reduce){.rotation-hint,.studio .swatches i{transition:none}.rotation-hint .orbit{animation:none}}
