body{margin:0;padding:0}.viewerWrapper{width:75vw;height:100vh;position:relative}.modelViewer{background:#fff;background:radial-gradient(circle,#fff,#9c9c9c,#666);width:100%;height:100%}.dot{display:none}.custom-ar-button{bottom:15px;left:15px;position:fixed;display:none;align-items:center;justify-content:center;background-color:#fff;color:#000;border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform .15s ease,background-color .15s ease;z-index:1000}.custom-ar-button:hover{background-color:#f0f0f0;transform:scale(1.05)}.ar-icon{width:24px;height:24px}.dim{border-radius:4px;border:none;box-sizing:border-box;box-shadow:0 2px 4px #00000040;color:#000c;display:block;font-family:Futura,Helvetica Neue,sans-serif;font-size:1em;font-weight:700;max-width:128px;overflow-wrap:break-word;padding:.5em 1em;position:absolute;width:max-content;height:max-content;transform:translate3d(-50%,-50%,0);pointer-events:none;--min-hotspot-opacity: 0;background:#fff}@media(max-width:1024px){.viewerWrapper{width:100vw;height:100vh}.modelViewer{height:100vh}.custom-ar-button{display:flex}}.dimensionLineContainer{pointer-events:none;display:block}.dimensionLine{stroke:#16a5e6;stroke-width:2;stroke-dasharray:2}.rightPanel{position:absolute;top:10px;right:10px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.rightPanel>*{pointer-events:auto}.panelLabel,.bodyTypeLabel{display:flex;align-items:center;justify-content:flex-start;gap:12px;background:#ffffffe6;padding:8px 16px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:0 4px 12px #0000001a;transition:all .3s cubic-bezier(.4,0,.2,1);width:max-content;min-width:140px}.panelLabel{cursor:pointer}.glossyToggle,.dimToggle{transform:scale(1.3);cursor:pointer}.glossyLabel.hidden{display:none}.unitSelect{font-size:14px;font-weight:600;cursor:pointer;border:1px solid #ccc;border-radius:4px;padding:2px 4px;background:transparent}.hide{display:none}.swatchItem{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:85px;padding:4px;transition:transform .2s ease;cursor:pointer}.swatchCircle{width:48px;height:48px;border-radius:50%;border:2px solid #ccc;margin-bottom:.5rem;background:linear-gradient(145deg,#fff,#e6e6e6);box-shadow:inset -3px -3px 6px #ffffffb3,inset 3px 3px 6px #00000026,0 4px 6px #0000001a;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;background-size:cover;background-position:center}.swatchCircle.roughness{width:48px;height:48px;border-radius:50%;border:2px solid #ccc;margin-bottom:.5rem;box-shadow:inset -3px -3px 6px #ffffffb3,inset 3px 3px 6px #00000026,0 4px 6px #0000001a;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;background-size:cover;background-position:center}.swatchCircle:before{content:"";position:absolute;top:5%;left:5%;width:90%;height:40%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent);border-radius:50%;transform:rotate(-20deg);pointer-events:none}.swatchCircle.roughness:before{content:none;position:absolute;top:5%;left:5%;width:90%;height:40%;border-radius:50%;transform:rotate(-20deg);pointer-events:none}.swatchItem:hover .swatchCircle{transform:scale(1.1);box-shadow:inset -2px -2px 6px #00000040,inset 2px 2px 6px #ffffff80,0 6px 15px #0006}.swatchItem:active .swatchCircle{transform:scale(.95)}.swatchLabel{font-size:.85rem;color:#333;text-align:center;font-weight:500;width:100%;max-width:85px;white-space:normal;word-wrap:break-word;line-height:1.2}.categoryContainer{margin-bottom:2rem;overflow:visible}.categoryHeading{font-size:1.1rem;font-weight:700;margin-bottom:.8rem;color:#222;border-left:4px solid #444;padding-left:8px}.swatchGrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}.panel{position:fixed;top:0;right:0;width:25vw;min-width:300px;height:100vh;background:#f9f9f9;border-left:1px solid #e0e0e0;padding:2rem 1rem;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;z-index:2000;box-shadow:-2px 0 10px #0000001a}.panelContent{flex:1;overflow-y:auto;overflow-x:hidden}.section{margin-bottom:2rem}.heading{font-size:1.25rem;font-weight:600;margin-bottom:1.2rem;color:#222}.swatchGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(30%,75px),1fr));gap:.5rem;padding:10px;justify-items:center}.colorCard{width:100%;padding-top:100%;border-radius:8px;cursor:pointer;position:relative;transition:transform .2s ease}.colorCard:hover{transform:scale(1.05)}.materialsScroll{max-height:50vh;overflow-y:auto;padding:0 5px}.materialsScroll::-webkit-scrollbar{width:6px}.materialsScroll::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}.materialsScroll::-webkit-scrollbar-track{background:transparent}.closeButton{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:6px;border-radius:50%;display:none;z-index:1100}.closeButton:hover{background:#00000014}.openButton{position:fixed;top:20px;left:20px;border:none;background:#181818;color:#fff;padding:.6rem 1rem;border-radius:8px;font-size:1rem;cursor:pointer;display:none;z-index:1200}.openButton:hover{background:#333}@media(min-width:300px)and (max-width:1024px){.panel{width:60vw;min-width:380px;max-width:100%;transform:translate(100%);height:100vh;box-shadow:-4px 0 15px #00000026;padding-top:4rem}.panel.open{transform:translate(0)}.openButton,.closeButton{display:block}}.envGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;margin-bottom:1.2rem;padding:0 10px}.envItem{display:flex;justify-content:center;align-items:center}.envThumb{width:100%;height:auto;aspect-ratio:10 / 7;object-fit:cover;border-radius:8px;border:1px solid #ddd;background:#fff;transition:transform .2s ease-in-out}.envThumb:hover{transform:scale(1.05)}.envButton{width:50%;background:#181818;color:#fff;font-size:1.1rem;border:none;border-radius:10px;font-weight:500;cursor:pointer;display:block;margin:0 auto;transition:background .3s ease}.envButton:hover{background:#333}#app{display:flex;position:fixed;width:100%;height:100vh;overflow:hidden;font-family:Arial,sans-serif;background-color:#f5f5f5}.main-container{display:flex;flex-direction:row;width:100%;overflow:hidden}.main-container .viewerWrapper{height:100%;position:relative}.main-container .viewerWrapper model-viewer{width:100%;height:100%}.main-container .panel{width:25vw;flex-shrink:0;height:100%}@media(max-width:768px){.main-container{flex-direction:column}.main-container .panel{width:80%;max-width:350px;position:fixed;right:0;top:0;height:100%;transform:translate(100%);transition:transform .3s ease-in-out;z-index:2000}.main-container .panel.open{transform:translate(0)}}