*{margin:0;padding:0;box-sizing:border-box}#material-visualizer{position:fixed;inset:2rem;font-family:Arial,Helvetica,sans-serif}.three{width:100%;height:100%;background-color:#fdfcf8;overflow:hidden;box-shadow:1px 1px 12px 8px #0000001a}.three__canvas{display:block;width:100%;height:100%;position:relative;z-index:3}.three__background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(0deg,#cdc8cb,#fff9fd)}.three__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:2;opacity:0}.panel{position:absolute;bottom:0;left:50%;background-color:#f3f2f0;transform:translate(-50%);padding:1rem 1.5rem;box-shadow:0 0 18px 8px #00000014;border:1px solid rgba(128,128,128,.1);border-top-left-radius:1rem;border-top-right-radius:1rem;display:flex;align-items:center;justify-content:center;gap:2rem;z-index:100}.panel__text{color:#484848;-webkit-user-select:none;user-select:none;text-transform:uppercase;font-size:.8rem;letter-spacing:-.02em;font-weight:600;padding:.25rem .5rem}.panel__element{display:flex;align-items:center;gap:.25rem}.panel__zoom-element{display:none}@media (min-width: 768px){.panel__zoom-element{display:flex}}.panel__icon{display:block;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;padding:.25rem;z-index:50;-webkit-user-select:none;user-select:none}.panel__icon img{width:100%;height:100%}.panel__range{width:64px!important}.panel__toggle{display:flex;background-color:#ddd;position:relative;gap:.25rem;border-radius:4px;cursor:pointer}.panel__toggle-button{position:absolute;top:0;left:0;height:100%;width:50%;background-color:#fff;border-radius:4px;box-shadow:1px 1px 12px 4px #00000014}#moon-icon{opacity:.3;transform:scale(.8)}.dropdown__element-color{width:16px;height:16px;aspect-ratio:1 / 1;border-radius:1000px;background-color:#ffebcd;border:1px solid rgba(128,128,128,.1);box-shadow:1px 1px 12px 4px #00000014}.dropdown{position:relative;background-color:#f3f2f0;cursor:pointer;padding-left:.5rem}.dropdown__elements{position:absolute;bottom:100%;left:0;right:0;width:100%;background-color:#f3f2f0;display:flex;flex-direction:column;border-top-left-radius:8px;border-top-right-radius:8px;clip-path:inset(100% 0% 0% 0%);padding-bottom:1rem}.dropdown__current{width:100px}.dropdown__element{display:flex;align-items:center;gap:.15rem;padding:.5rem;padding-right:0}.dropdown__element *{pointer-events:none}.dropdown__element:hover{background-color:#0000001a}.dropdown__icon{margin-left:.4rem}.dropdown__current-color{background:#fff9fd}[data-name=warmwhite] div{background:#feeadb}[data-name=softwhite] div{background:#fff2ec}[data-name=daylight] div{background:#fff9fd}[data-name=crystalwhite] div{background:#f8f5fe}#grid-icon{opacity:.5}#range-slider{width:600px;margin:auto;height:4px}#range-slider .range-slider__range{background:#484848;transition:height .3s;height:4px}#range-slider .range-slider__thumb{background:#484848;transition:transform .3s;width:12px;height:12px}#range-slider .range-slider__thumb[data-lower]{width:0}#range-slider .range-slider__range{border-radius:6px}.range-slider{touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;display:block;position:relative;width:100%;height:8px;background:#ddd;border-radius:4px}.range-slider[data-vertical]{height:100%;width:8px}.range-slider[data-disabled]{opacity:.5;cursor:not-allowed}.range-slider .range-slider__thumb{position:absolute;z-index:3;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%;background:#2196f3}.range-slider .range-slider__thumb:focus-visible{outline:0;box-shadow:0 0 0 6px #2196f380}.range-slider[data-vertical] .range-slider__thumb{left:50%}.range-slider .range-slider__thumb[data-disabled]{z-index:2}.range-slider .range-slider__range{position:absolute;z-index:1;transform:translateY(-50%);top:50%;width:100%;height:100%;background:#51adf6}.range-slider[data-vertical] .range-slider__range{left:50%;transform:translate(-50%)}.range-slider input[type=range]{-webkit-appearance:none;pointer-events:none;position:absolute;z-index:2;top:0;left:0;width:0;height:0;background-color:transparent}.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none}.range-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:0}.range-slider input[type=range]:focus{outline:0}