.viewer-wrapper{border-radius:12px;width:100%;height:500px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d}.viewer-canvas{cursor:grab;width:100%!important;height:100%!important}.viewer-canvas:active{cursor:grabbing}.shader-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;border-radius:12px;flex-wrap:wrap;gap:20px;padding:20px;display:flex;position:absolute;bottom:20px;left:20px;right:20px}.control-group{flex-direction:column;gap:8px;min-width:140px;display:flex}.control-group label{color:#fff;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.control-group input[type=range]{-webkit-appearance:none;background:#333;border-radius:3px;outline:none;width:100%;height:6px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#3b82f6;border-radius:50%;width:20px;height:20px}.control-group span{color:#ccc;font-family:monospace;font-size:14px}.shader-controls{z-index:1000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;background:#000000bf;border-radius:12px;flex-direction:column;gap:12px;width:220px;padding:14px 16px;display:flex;position:absolute;bottom:20px;right:20px}.shader-controls label{flex-direction:column;gap:4px;font-size:12px;display:flex}.shader-controls input[type=range]{width:100%}.shader-controls input[type=checkbox]{accent-color:#f36}.export-btn{z-index:2000;color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;position:absolute;top:20px;right:20px;box-shadow:0 8px 20px #00000059}.export-btn:hover{background:linear-gradient(135deg,#60a5fa,#3b82f6)}.export-btn:active{transform:translateY(1px)}